Skip to content

Commit a3fcfcc

Browse files
nxr-deennxr-deen
authored
Add files via upload
1 parent dbc538f commit a3fcfcc

File tree

1 file changed

+149
-0
lines changed

1 file changed

+149
-0
lines changed

‎Project 1 - Responsive Card Slider/markdown-readme.md

+149
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,149 @@
1+
# Responsive Card Slider
2+
3+
A modern, lightweight responsive card slider built with vanilla JavaScript, HTML, and CSS. This slider automatically adapts to different screen sizes, showing the optimal number of cards for each viewport while maintaining smooth transitions.
4+
5+
![Responsive Card Slider](https://via.placeholder.com/800x400?text=Responsive+Card+Slider)
6+
7+
## Features
8+
9+
- **Fully Responsive**: Automatically adjusts the number of visible cards based on screen size
10+
- **Touch Support**: Swipe gestures on mobile devices
11+
- **Keyboard Navigation**: Use arrow keys to navigate between slides
12+
- **Pagination**: Visual indicator of current position with clickable dots
13+
- **Smooth Transitions**: CSS transitions for smooth sliding effects
14+
- **No Dependencies**: Built with vanilla JavaScript, no external libraries required
15+
- **Optional Autoplay**: Can be enabled for automatic cycling through cards
16+
- **Customizable**: Easily modify styles to match your project's design
17+
18+
## Demo
19+
20+
View the live demo [here](#) (replace with your actual demo link when available)
21+
22+
## Installation
23+
24+
1. Clone the repository:
25+
```bash
26+
git clone https://github.com/yourusername/responsive-card-slider.git
27+
```
28+
29+
2. Open `index.html` in your browser to see the slider in action.
30+
31+
## Usage
32+
33+
### Basic Structure
34+
35+
```html
36+
<!DOCTYPE html>
37+
<html lang="en">
38+
<head>
39+
<meta charset="UTF-8">
40+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
41+
<title>Responsive Card Slider</title>
42+
<link rel="stylesheet" href="css/styles.css">
43+
</head>
44+
<body>
45+
<div class="container">
46+
<h1>Responsive Card Slider</h1>
47+
48+
<div class="slider-container">
49+
<!-- Slider controls -->
50+
<div class="slider-controls">
51+
<button id="prev-btn" class="control-btn">
52+
<!-- Previous button icon -->
53+
</button>
54+
<button id="next-btn" class="control-btn">
55+
<!-- Next button icon -->
56+
</button>
57+
</div>
58+
59+
<!-- Slider wrapper -->
60+
<div class="slider-wrapper">
61+
<div class="slider">
62+
<!-- Your cards go here -->
63+
</div>
64+
</div>
65+
66+
<!-- Pagination dots -->
67+
<div class="pagination"></div>
68+
</div>
69+
</div>
70+
71+
<script src="js/script.js"></script>
72+
</body>
73+
</html>
74+
```
75+
76+
### Adding Cards
77+
78+
To add or modify cards, edit the HTML structure inside the `.slider` div:
79+
80+
```html
81+
<div class="card">
82+
<div class="card-image" style="background-color: #3498db;"></div>
83+
<div class="card-content">
84+
<h3>Card Title</h3>
85+
<p>Card description text goes here.</p>
86+
</div>
87+
</div>
88+
```
89+
90+
### Customization
91+
92+
#### Changing Colors and Styles
93+
94+
Edit the CSS variables in the `styles.css` file to match your project's design.
95+
96+
#### Enabling Autoplay
97+
98+
To enable autoplay functionality, uncomment the following line in `script.js`:
99+
100+
```javascript
101+
// startAutoplay();
102+
```
103+
104+
You can also adjust the autoplay delay (default 5000ms):
105+
106+
```javascript
107+
const autoplayDelay = 5000; // 5 seconds
108+
```
109+
110+
## Responsive Breakpoints
111+
112+
The slider adjusts the number of visible cards based on these breakpoints:
113+
114+
- **Mobile** (<640px): 1 card per view
115+
- **Tablet** (≥640px): 2 cards per view
116+
- **Medium screens** (≥768px): 3 cards per view
117+
- **Large screens** (≥1024px): 4 cards per view
118+
119+
## Browser Support
120+
121+
The slider works on all modern browsers including:
122+
123+
- Chrome (latest)
124+
- Firefox (latest)
125+
- Safari (latest)
126+
- Edge (latest)
127+
- Opera (latest)
128+
- Mobile browsers (iOS Safari, Android Chrome)
129+
130+
## Contributing
131+
132+
1. Fork the repository
133+
2. Create your feature branch: `git checkout -b feature/my-new-feature`
134+
3. Commit your changes: `git commit -am 'Add some feature'`
135+
4. Push to the branch: `git push origin feature/my-new-feature`
136+
5. Submit a pull request
137+
138+
## License
139+
140+
This project is licensed under the MIT License - see the LICENSE file for details.
141+
142+
## Acknowledgments
143+
144+
- Inspired by various card slider designs across the web
145+
- SVG icons for navigation buttons
146+
147+
---
148+
149+
Made with ❤️ by [Your Name]

0 commit comments

Comments
 (0)