Slider

├── favicon.ico ├── src ├── images │ ├── img-1.jpg │ ├── img-2.jpg │ ├── img-3.jpg │ ├── mobile.png │ └── desktop.png ├── js │ └── script.js └── css │ └── styles.css ├── index.html └── README.md /favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Iqbolshoh/javascript-dynamic-slider/main/favicon.ico -------------------------------------------------------------------------------- /src/images/img-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Iqbolshoh/javascript-dynamic-slider/main/src/images/img-1.jpg -------------------------------------------------------------------------------- /src/images/img-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Iqbolshoh/javascript-dynamic-slider/main/src/images/img-2.jpg -------------------------------------------------------------------------------- /src/images/img-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Iqbolshoh/javascript-dynamic-slider/main/src/images/img-3.jpg -------------------------------------------------------------------------------- /src/images/mobile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Iqbolshoh/javascript-dynamic-slider/main/src/images/mobile.png -------------------------------------------------------------------------------- /src/images/desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Iqbolshoh/javascript-dynamic-slider/main/src/images/desktop.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Slider 8 | 9 | 10 | 11 | 12 | 13 | 14 |

15 | 16 |

17 |

18 |

19 |

20 |

21 | 22 | 23 | 24 | 25 | 26 | 27 |

28 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /src/js/script.js: -------------------------------------------------------------------------------- 1 | let imgs = document.querySelectorAll('.slider img'); 2 | let navButtonsContainer = document.getElementById('navButtons'); 3 | let prevButton = document.getElementById('prevButton'); 4 | let nextButton = document.getElementById('nextButton'); 5 | let currentImg = 0; 6 | const interval = 4000; // time for automatic slide transition 7 | 8 | function changeSlide(n) { 9 | // Remove active classes from current image and nav button 10 | for (let i = 0; i < imgs.length; i++) { 11 | imgs[i].classList.remove('active', 'previous'); 12 | navButtonsContainer.children[i].classList.remove('active'); 13 | } 14 | 15 | let previousImg = currentImg; 16 | currentImg = (n + imgs.length) % imgs.length; // Wrap around 17 | 18 | imgs[currentImg].classList.add('active'); 19 | imgs[previousImg].classList.add('previous'); 20 | navButtonsContainer.children[currentImg].classList.add('active'); 21 | } 22 | 23 | function setupNavButtons() { 24 | // Create navigation dots 25 | for (let i = 0; i < imgs.length; i++) { 26 | let button = document.createElement('span'); 27 | button.classList.add('line'); 28 | button.setAttribute('onclick', 'changeSlide(' + i + ')'); 29 | navButtonsContainer.appendChild(button); 30 | } 31 | 32 | // Set the initial active state 33 | navButtonsContainer.children[currentImg].classList.add('active'); 34 | } 35 | 36 | // Initialize navigation dots 37 | setupNavButtons(); 38 | 39 | let timer = setInterval(function () { 40 | changeSlide(currentImg + 1); 41 | }, interval); 42 | 43 | prevButton.addEventListener('click', function () { 44 | changeSlide(currentImg - 1); 45 | resetTimer(); 46 | }); 47 | 48 | nextButton.addEventListener('click', function () { 49 | changeSlide(currentImg + 1); 50 | resetTimer(); 51 | }); 52 | 53 | function resetTimer() { 54 | clearInterval(timer); 55 | timer = setInterval(function () { 56 | changeSlide(currentImg + 1); 57 | }, interval); 58 | } 59 | -------------------------------------------------------------------------------- /src/css/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: Arial, sans-serif; 4 | background-color: #f0f0f0; 5 | } 6 | 7 | .container { 8 | /* if you only give width, all dimensions will be correct */ 9 | width: 80%; 10 | aspect-ratio: 16 / 9; 11 | margin: 40px auto; 12 | position: relative; 13 | } 14 | 15 | 16 | .slider { 17 | width: 100%; 18 | aspect-ratio: 16 / 9; 19 | border-radius: 15px; 20 | box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 21 | position: relative; 22 | overflow: hidden; 23 | } 24 | 25 | .slider img { 26 | width: 100%; 27 | height: auto; 28 | position: absolute; 29 | top: 0; 30 | left: 0; 31 | opacity: 0; 32 | transform: translateX(100%); 33 | border-radius: 15px; 34 | transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out; 35 | } 36 | 37 | .slider img.active { 38 | opacity: 1; 39 | transform: translateX(0); 40 | } 41 | 42 | .slider img.previous { 43 | transform: translateX(-100%); 44 | } 45 | 46 | .navigation-button { 47 | position: absolute; 48 | bottom: 20px; 49 | width: 100%; 50 | text-align: center; 51 | } 52 | 53 | .line { 54 | cursor: pointer; 55 | height: 10px; 56 | width: 10px; 57 | margin: 0 5px; 58 | background-color: #777; 59 | border-radius: 50%; 60 | display: inline-block; 61 | transition: background-color 0.3s, transform 0.3s; 62 | } 63 | 64 | .line.active { 65 | background-color: #ffffff; 66 | transform: scale(1.2); 67 | } 68 | 69 | .nav-button { 70 | position: absolute; 71 | top: 50%; 72 | background-color: rgba(134, 129, 129, 0.5); 73 | color: white; 74 | border: none; 75 | border-radius: 50%; 76 | cursor: pointer; 77 | font-size: 24px; 78 | padding: 15px; 79 | z-index: 10; 80 | transition: background-color 0.3s, transform 0.3s; 81 | transform: translateY(-50%); 82 | } 83 | 84 | .nav-button:hover { 85 | background-color: rgba(0, 0, 0, 0.5); 86 | } 87 | 88 | .prev { 89 | left: 15px; 90 | } 91 | 92 | .next { 93 | right: 15px; 94 | } 95 | 96 | @media (max-width: 890px) { 97 | .nav-button { 98 | font-size: 22px; 99 | padding: 11px; 100 | } 101 | 102 | .navigation-button { 103 | bottom: 12px; 104 | } 105 | 106 | .line { 107 | height: 9px; 108 | width: 9px; 109 | } 110 | } 111 | 112 | @media (max-width: 700px) { 113 | 114 | .container { 115 | width: 90%; 116 | } 117 | 118 | .navigation-button { 119 | bottom: 10px; 120 | } 121 | 122 | .line { 123 | height: 7px; 124 | width: 7px; 125 | } 126 | 127 | .nav-button { 128 | font-size: 14px; 129 | padding: 7px; 130 | } 131 | 132 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 🖼️ JavaScript Dynamic Slider 2 | 3 | 🚀 A **lightweight, responsive, and customizable slider** built using **HTML, CSS, and JavaScript**. 4 | It features **smooth transitions, navigation controls**, and **auto-play functionality**. 5 | 6 | ## 🌟 Features 7 | ✅ **Fully Responsive** – Adapts to different screen sizes 📱💻 8 | ✅ **Smooth Transitions** – Enhances user experience 🎞️ 9 | ✅ **Navigation Controls** – Previous & next buttons for manual control ⏪⏩ 10 | ✅ **Auto-Play Mode** – Automatically cycles through images 🔄 11 | ✅ **Easy Customization** – Modify styles, transition speed, and behavior 🎨 12 | 13 | --- 14 | 15 | ## 📸 Preview 16 | 17 | ### 🖥️ Desktop 18 | ![Desktop Preview](./src/images/desktop.png) 19 | 20 | ### 📱 Mobile 21 | ![Mobile Preview](./src/images/mobile.png) 22 | 23 | The slider **automatically adjusts** to different screen sizes using **CSS media queries**. 24 | 25 | --- 26 | 27 | ## 📂 Project Structure 28 | ``` 29 | /javascript-dynamic-slider 30 | │── /src/css/styles.css # Styling for the slider 31 | │── /src/js/script.js # JavaScript logic 32 | │── /src/images/ # Image assets 33 | │── index.html # Main HTML file 34 | │── README.md # Documentation 35 | │── favicon.ico # Website icon 36 | ``` 37 | 38 | --- 39 | 40 | ## 🔧 Getting Started 41 | 42 | 1️⃣ **Clone the repository:** 43 | ```sh 44 | git clone https://github.com/iqbolshoh/javascript-dynamic-slider.git 45 | cd javascript-dynamic-slider 46 | ``` 47 | 48 | 2️⃣ **Open the `index.html` file in your browser:** 49 | ```sh 50 | open index.html 51 | ``` 52 | 53 | --- 54 | 55 | ## 🖥 Technologies Used 56 | ![HTML](https://img.shields.io/badge/HTML-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white) 57 | ![CSS](https://img.shields.io/badge/CSS-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white) 58 | ![JavaScript](https://img.shields.io/badge/JavaScript-%23F7DF1C.svg?style=for-the-badge&logo=javascript&logoColor=black) 59 | 60 | ## 📜 License 61 | This project is open-source and available under the **MIT License**. 62 | 63 | ## 🤝 Contributing 64 | 🎯 Contributions are welcome! If you have suggestions or want to enhance the project, feel free to fork the repository and submit a pull request. 65 | 66 | ## 📬 Connect with Me 67 | 💬 I love meeting new people and discussing tech, business, and creative ideas. Let’s connect! You can reach me on these platforms: 68 | 69 |

70 | 71 | 72 | 78 | 84 | 90 | 96 | 102 | 108 | 114 | 120 | 126 | 127 |

73 | 74 |

76 | 77 |