├── img ├── 1.jpg ├── 2.jpg ├── 3.jpg ├── 4.jpg └── 5.jpg ├── project.png ├── README.md ├── app.js ├── index.html └── style.css /img/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HoanghoDev/slider_dots/HEAD/img/1.jpg -------------------------------------------------------------------------------- /img/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HoanghoDev/slider_dots/HEAD/img/2.jpg -------------------------------------------------------------------------------- /img/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HoanghoDev/slider_dots/HEAD/img/3.jpg -------------------------------------------------------------------------------- /img/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HoanghoDev/slider_dots/HEAD/img/4.jpg -------------------------------------------------------------------------------- /img/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HoanghoDev/slider_dots/HEAD/img/5.jpg -------------------------------------------------------------------------------- /project.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HoanghoDev/slider_dots/HEAD/project.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | # Youtube Lun Dev 3 | 4 | Free code HTML CSS Javascript and Free learning web developer 5 | 6 | 7 | ![Logo](https://yt3.googleusercontent.com/LnD0yL5NAb8yvZu2d25qLZ-oAehUISz9tfe3aN36syGqTKbs4irbPeVUJfNlmVFRzel7KHV3-uo=s88-c-k-c0x00ffffff-no-rj) 8 | 9 | ## Image in project 10 | 11 | ![Alt text](project.png "Lun Dev") 12 | - [Detailed instructions on this project](https://www.youtube.com/@lundeveloper/featured) 13 | 14 | 15 | ## Follow me for more free codes 16 | 17 | - [Youtube Lun Dev](https://www.youtube.com/results?search_query=lun+dev) 18 | - [Tiktok Lun Dev](https://www.tiktok.com/@lun.dev) 19 | - [Website Lun Dev Web](https://lundevweb.com) 20 | 21 | 22 | ## Built By 23 | 24 | This project is built and shared by 25 | 26 | - Lun Dev Youtube 27 | 28 | 29 | ## Feedback 30 | 31 | If you have any feedback, please reach out to us at hohoang.dev@gmail.com 32 | 33 | 34 | ## Tags 35 | 36 | Free code HTML CSS Javascript and Free learning web developer, html code, css code, javascript code tutorial 37 | -------------------------------------------------------------------------------- /app.js: -------------------------------------------------------------------------------- 1 | let slider = document.querySelector('.slider .list'); 2 | let items = document.querySelectorAll('.slider .list .item'); 3 | let next = document.getElementById('next'); 4 | let prev = document.getElementById('prev'); 5 | let dots = document.querySelectorAll('.slider .dots li'); 6 | 7 | let lengthItems = items.length - 1; 8 | let active = 0; 9 | next.onclick = function(){ 10 | active = active + 1 <= lengthItems ? active + 1 : 0; 11 | reloadSlider(); 12 | } 13 | prev.onclick = function(){ 14 | active = active - 1 >= 0 ? active - 1 : lengthItems; 15 | reloadSlider(); 16 | } 17 | let refreshInterval = setInterval(()=> {next.click()}, 3000); 18 | function reloadSlider(){ 19 | slider.style.left = -items[active].offsetLeft + 'px'; 20 | // 21 | let last_active_dot = document.querySelector('.slider .dots li.active'); 22 | last_active_dot.classList.remove('active'); 23 | dots[active].classList.add('active'); 24 | 25 | clearInterval(refreshInterval); 26 | refreshInterval = setInterval(()=> {next.click()}, 3000); 27 | 28 | 29 | } 30 | 31 | dots.forEach((li, key) => { 32 | li.addEventListener('click', ()=>{ 33 | active = key; 34 | reloadSlider(); 35 | }) 36 | }) 37 | window.onresize = function(event) { 38 | reloadSlider(); 39 | }; 40 | 41 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 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 | 33 |
34 | 41 |
42 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | .slider{ 2 | width: 1300px; 3 | max-width: 100vw; 4 | height: 700px; 5 | margin: auto; 6 | position: relative; 7 | overflow: hidden; 8 | } 9 | .slider .list{ 10 | position: absolute; 11 | width: max-content; 12 | height: 100%; 13 | left: 0; 14 | top: 0; 15 | display: flex; 16 | transition: 1s; 17 | } 18 | .slider .list img{ 19 | width: 1300px; 20 | max-width: 100vw; 21 | height: 100%; 22 | object-fit: cover; 23 | } 24 | .slider .buttons{ 25 | position: absolute; 26 | top: 45%; 27 | left: 5%; 28 | width: 90%; 29 | display: flex; 30 | justify-content: space-between; 31 | } 32 | .slider .buttons button{ 33 | width: 50px; 34 | height: 50px; 35 | border-radius: 50%; 36 | background-color: #fff5; 37 | color: #fff; 38 | border: none; 39 | font-family: monospace; 40 | font-weight: bold; 41 | } 42 | .slider .dots{ 43 | position: absolute; 44 | bottom: 10px; 45 | left: 0; 46 | color: #fff; 47 | width: 100%; 48 | margin: 0; 49 | padding: 0; 50 | display: flex; 51 | justify-content: center; 52 | } 53 | .slider .dots li{ 54 | list-style: none; 55 | width: 10px; 56 | height: 10px; 57 | background-color: #fff; 58 | margin: 10px; 59 | border-radius: 20px; 60 | transition: 0.5s; 61 | } 62 | .slider .dots li.active{ 63 | width: 30px; 64 | } 65 | @media screen and (max-width: 768px){ 66 | .slider{ 67 | height: 400px; 68 | } 69 | } --------------------------------------------------------------------------------