I have a swiperjs component with thumbnails at the bottom. To be able to fit as many as can fit on a page, I have limited the width and height of the swiper-slide and the contained image in the thumbnail.
The problem is, the thumbnail swiper allows scroll beyond the last thumbnail page.
Following is a pen to illustrate the issue.
https://codepen.io/ydubey/pen/KKOwYbQ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Swiper demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
<style>
html,
body {
position: relative;
height: 100%;
}
body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color: #000;
margin: 0;
padding: 0;
}
swiper-container {
width: 100%;
height: 100%;
}
swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
}
swiper-slide img {
display: sw </swiper-slidek;
width: 100%;
height: 100%;
object-fit: cover;
}
body {
background: #000;
color: #000;
}
swiper-container {
width: 100%;
height: 300px;
margin-left: auto;
margin-right: auto;
}
swiper-slide {
background-size: cover;
background-position: center;
}
.mySwiper {
height: 80%;
width: 100%;
}
.mySwiper2 {
height: 20%;
box-sizing: border-box;
padding: 10px 0;
}
.mySwiper2 swiper-slide {
width: 4rem !important;
height: 4rem !important;
img {
object-fit: contain;
width: 4rem;
max-height: 4rem;
}
opacity: 0.4;
}
.mySwiper2 .swiper-slide-thumb-active {
opacity: 1;
}
swiper-slide img {
display: sw </swiper-slidek;
width: 100%;
height: 100%;
object-fit: cover;
}
</style>
</head>
<body>
<swiper-container style="--swiper-navigation-color: #fff; --swiper-pagination-color: #fff" class="mySwiper"
thumbs-swiper=".mySwiper2" loop="true" space-between="10" navigation="true">
<swiper-slide>
<img src="https://swiperjs.com/demos/images/nature-1.jpg" />
</swiper-slide>
<swiper-slide>
<img src="https://swiperjs.com/demos/images/nature-2.jpg" />
</swiper-slide>
<swiper-slide>
<img src="https://swiperjs.com/demos/images/nature-3.jpg" />
</swiper-slide>
<swiper-slide>
<img src="https://swiperjs.com/demos/images/nature-4.jpg" />
</swiper-slide>
<swiper-slide>
<img src="https://swiperjs.com/demos/images/nature-5.jpg" />
</swiper-slide>
<swiper-slide>
<img src="https://swiperjs.com/demos/images/nature-6.jpg" />
</swiper-slide>
<swiper-slide>
<img src="https://swiperjs.com/demos/images/nature-7.jpg" />
</swiper-slide>
<swiper-slide>
<img src="https://swiperjs.com/demos/images/nature-8.jpg" />
</swiper-slide>
<swiper-slide>
<img src="https://swiperjs.com/demos/images/nature-9.jpg" />
</swiper-slide>
<swiper-slide>
<img src="https://swiperjs.com/demos/images/nature-10.jpg" />
</swiper-slide>
</swiper-container>
<swiper-container class="mySwiper2" space-between="10"
watch-slides-progress="true">
<swiper-slide>
<img src="https://swiperjs.com/demos/images/nature-1.jpg" />
</swiper-slide>
<swiper-slide>
<img src="https://swiperjs.com/demos/images/nature-2.jpg" />
</swiper-slide>
<swiper-slide>
<img src="https://swiperjs.com/demos/images/nature-3.jpg" />
</swiper-slide>
<swiper-slide>
<img src="https://swiperjs.com/demos/images/nature-4.jpg" />
</swiper-slide>
<swiper-slide>
<img src="https://swiperjs.com/demos/images/nature-5.jpg" />
</swiper-slide>
<swiper-slide>
<img src="https://swiperjs.com/demos/images/nature-6.jpg" />
</swiper-slide>
<swiper-slide>
<img src="https://swiperjs.com/demos/images/nature-7.jpg" />
</swiper-slide>
<swiper-slide>
<img src="https://swiperjs.com/demos/images/nature-8.jpg" />
</swiper-slide>
<swiper-slide>
<img src="https://swiperjs.com/demos/images/nature-9.jpg" />
</swiper-slide>
<swiper-slide>
<img src="https://swiperjs.com/demos/images/nature-10.jpg" />
</swiper-slide>
</swiper-container>
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-element-bundle.min.js"></script>
</body>
</html>
2
Answers
You can create an array in js to store the onclick event of the slider, along with some pop and stack functionality to take control over the sliders functionality.
Personally I would go with a bootstrap5 carousel and set wrap to "false", you can use the minimized version of bootstrap to save space.
You can initializes the Swiper by JavaScript and add the number of slides on the property
slidesPerView
. I’ll put an example below, but you can see it too on CodeSandbox.