"carousel"
Bootstrap 4.1.1 Snippet by evarevirus

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="shortcut icon" type="image/x-icon" href="https://static.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico" /> <link rel="mask-icon" type="" href="https://static.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg" color="#111" /> <title>CodePen - Swiper w/ thumbnails auto width</title> <link rel='stylesheet' href='https://idangero.us/swiper/dist/css/swiper.min.css'> <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.css'> <style> .wrapper { margin: 0 auto; max-width: 768px; } html, body { position: relative; height: 100%; background: white; } body { color: #000; margin: 0; padding: 0; } .swiper-container { width: 100%; margin-left: auto; margin-right: auto; } .swiper-slide { background-size: cover; background-position: center; display: flex; justify-content: center; align-items: center; } .gallery-top { height: 300px; width: 100%; } .gallery-top img { display: block; margin: 0 auto; } img { max-height: 100%; max-width: 100%; } /* THUMBNAILS */ .gallery-thumbs { /*height: 20%;*/ height: 100px; box-sizing: border-box; padding: 10px 0; } .gallery-thumbs .swiper-slide { /*width: 25%;*/ width: auto; height: 100%; border-bottom: 4px solid transparent; padding-bottom: 5px; } .gallery-thumbs .swiper-slide-active { border-bottom-color: #eee; } /* .gallery-thumbs .swiper-slide { text-align: center; display: flex; justify-content: center; align-items: center; }*/ /* CUSTOM */ /*.gallery-thumbs .swiper-slide { text-align: center; display: flex; justify-content: center; align-items: center; } */ </style> <script> window.console = window.console || function(t) {}; </script> <script> if (document.location.search.match(/type=embed/gi)) { window.parent.postMessage("resize", "*"); } </script> </head> <body translate="no"> <div class="wrapper"> <div class="swiper-container gallery-top"> <div class="swiper-wrapper"> <div class="swiper-slide"><img src="https://cdn.mio.se/image/1d3af94f-7112-449a-bc6e-45cb757f64da.jpg?preset=25"></img></div> <div class="swiper-slide"><img src="https://cdn.mio.se/image/f6a09fa5-7d9b-497a-9e64-3ff64bf6f69f.jpg?preset=25"></img></div> <div class="swiper-slide"><img src="https://cdn.mio.se/image/538feefe-9357-4b49-9297-40f8a10323bf.jpg?preset=25"></img></div> <div class="swiper-slide"><img src="https://cdn.mio.se/image/728949d8-4d4d-418c-bd96-42be26c2a4ad.jpg?preset=25"></img></div> <div class="swiper-slide"><img src="https://cdn.mio.se/image/f1ff6009-d081-492e-b600-8bec4d8876b2.jpg?preset=25"></img></div> <div class="swiper-slide"><img src="https://cdn.mio.se/image/b41d6fe0-e1d7-4778-9590-f069080b1c31.jpg?preset=25"></img></div> <div class="swiper-slide"><img src="https://cdn.mio.se/image/91e06ba7-dbbb-40cc-95e9-b7a9bd690604.jpg?preset=25"></img></div> <div class="swiper-slide"><img src="https://cdn.mio.se/image/4090a057-6ed9-47f0-9d84-24201e45edff.jpg?preset=25"></img></div> </div> <div class="main-swiper-button-next swiper-button-next swiper-button-black"></div> <div class="main-swiper-button-prev swiper-button-prev swiper-button-black"></div> </div> <div class="swiper-container gallery-thumbs"> <div class="swiper-wrapper"> <div class="swiper-slide"><img src="https://cdn.mio.se/image/1d3af94f-7112-449a-bc6e-45cb757f64da.jpg?preset=25"></img></div> <div class="swiper-slide"><img src="https://cdn.mio.se/image/f6a09fa5-7d9b-497a-9e64-3ff64bf6f69f.jpg?preset=25"></img></div> <div class="swiper-slide"><img src="https://cdn.mio.se/image/538feefe-9357-4b49-9297-40f8a10323bf.jpg?preset=25"></img></div> <div class="swiper-slide"><img src="https://cdn.mio.se/image/728949d8-4d4d-418c-bd96-42be26c2a4ad.jpg?preset=25"></img></div> <div class="swiper-slide"><img src="https://cdn.mio.se/image/f1ff6009-d081-492e-b600-8bec4d8876b2.jpg?preset=25"></img></div> <div class="swiper-slide"><img src="https://cdn.mio.se/image/b41d6fe0-e1d7-4778-9590-f069080b1c31.jpg?preset=25"></img></div> <div class="swiper-slide"><img src="https://cdn.mio.se/image/91e06ba7-dbbb-40cc-95e9-b7a9bd690604.jpg?preset=25"></img></div> <div class="swiper-slide"><img src="https://cdn.mio.se/image/4090a057-6ed9-47f0-9d84-24201e45edff.jpg?preset=25"></img></div> </div> </div> </div> <script src="https://static.codepen.io/assets/common/stopExecutionOnTimeout-de7e2ef6bfefd24b79a3f68b414b87b8db5b08439cac3f1012092b2290c719cd.js"></script> <script src='https://idangero.us/swiper/dist/js/swiper.min.js'></script> <script id="rendered-js"> var galleryTop = new Swiper(".gallery-top", { centeredSlides: true, slidesPerView: 1, on: {}, navigation: { nextEl: ".main-swiper-button-next", prevEl: ".main-swiper-button-prev" } }); var galleryThumbs = new Swiper(".gallery-thumbs", { spaceBetween: 10, slidesPerView: "auto", centeredSlides: true, touchRatio: 0.2, slideToClickedSlide: true, on: {} /*navigation: { nextEl: ".thumbs-swiper-button-next", prevEl: ".thumbs-swiper-button-prev" }*/ }); galleryTop.controller.control = galleryThumbs; galleryThumbs.controller.control = galleryTop; function updateWidth(thumbnail) { const img = thumbnail.querySelector("img"); const width = img.offsetWidth; thumbnail.style.width = width; } function updateWidth(thumbnail) { const img = thumbnail.querySelector("img"); const width = img.offsetWidth; thumbnail.style.width = width; } window.addEventListener("load", function (event) { let thumbs = document.querySelectorAll(".gallery-thumbs .swiper-slide"); thumbs.forEach(thumb => updateWidth(thumb)); }); //# sourceURL=pen.js </script> </body> </html>

Questions / Comments: