"slider"
Bootstrap 3.0.0 Snippet by Ashish336

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Image Carousel</title> <meta name="viewport" content="width=device-width,initial-scale=1"> <link href="style.css" rel="stylesheet"> </head> <body> <div class="image-carousel"> <div class="inner"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcROnCnF0sNI5TYUtVCvG9P11a11LJkE0lNsli4XttQOLNBxbW8U" width="1350px" height="550px"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSf3kKVchUE4vK8BB3FiXGWAjxntwOeZHF0bXlE8jBhUo3Amcph" width="1350px" height="550px"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSnsAguzLk06jyhNj2Fk5YUR4Bh538ghcEVkbIQNescv9YanKBi" width="1350px" height="550px"> <img src="http://hd.wallpaperswide.com/thumbs/mosque-t1.jpg" width="1350px" height="550px"> </div> <div class="bubbles"></div> <div class="prev"></div> <div class="next"></div> </div> <script src="script.js"></script> </body> </html>
.image-carousel { width: 1350px; height: 550px; overflow: hidden; position: relative; } .inner { display: flex; position: absolute; left: 0; transition: left 0.25s ease-out; } .bubbles { display: flex; justify-content: center; position: absolute; bottom: 0; left: 0; right: 0; margin-bottom: 5px; } .bubble { margin: 2.5px; background-color: white; border-radius: 100000px; width: 10px; height: 10px; display: inline-block; opacity: 0.25; transition: opacity 0.1s linear; cursor: pointer; } .bubbles:hover { opacity: 0.65; } .bubble.active { opacity: 1; } .next::after, .prev::after { content: '>'; position: absolute; top: 50%; right: 0; background-color: white; font-size: 20px; width: 1em; height: 3em; font-weight: bold; font-family: sans-serif; transform: translateY(-50%); line-height: 3em; box-sizing: border-box; padding: 0 0.2em; cursor: pointer; opacity: 0.5; transition: opacity 0.1s linear; } .next:hover::after, .prev:hover::after { opacity: 1; } .prev::after { content: '<'; left: 0; }
let carousels = document.getElementsByClassName('image-carousel'); [].forEach.call(carousels, function (c) { let next = c.getElementsByClassName('next')[0], prev = c.getElementsByClassName('prev')[0], bubblesContainer = c.getElementsByClassName('bubbles')[0], inner = c.getElementsByClassName('inner')[0], imgs = inner.getElementsByTagName('img'), currentImageIndex = 0, width = 1350, bubbles = []; for (let i = 0; i < imgs.length; i++) { let b = document.createElement('span'); b.classList.add('bubble'); bubblesContainer.appendChild(b); bubbles.push(b); b.addEventListener('click', function () { currentImageIndex = i; switchImg(); }); } function switchImg () { inner.style.left = -width * currentImageIndex + 'px'; bubbles.forEach(function (b, i) { if (i === currentImageIndex) { b.classList.add('active'); } else { b.classList.remove('active'); } }); } next.addEventListener('click', function () { currentImageIndex++; if (currentImageIndex >= imgs.length) { currentImageIndex = 0; } switchImg(); }); prev.addEventListener('click', function () { currentImageIndex--; if (currentImageIndex < 0) { currentImageIndex = imgs.length - 1; } switchImg(); }); switchImg(); });

Related: See More


Questions / Comments: