HTML
<div class="product-main-top-left">
<div class="product-swiper">
<div class="swiper-container product-swiper-slider">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="./assets/product-page/main_pen.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="./assets/product-page/main_pen.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="./assets/product-page/main_pen.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="./assets/product-page/main_pen.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="./assets/product-page/main_pen.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="./assets/product-page/main_pen.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="./assets/product-page/main_pen.jpg" alt="">
</div>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<div class="swiper-container product-swiper-thumbs">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="./assets/product-page/main_pen.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="./assets/product-page/main_pen.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="./assets/product-page/main_pen.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="./assets/product-page/main_pen.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="./assets/product-page/main_pen.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="./assets/product-page/main_pen.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="./assets/product-page/main_pen.jpg" alt="">
</div>
</div>
</div>
</div>
</div>
SCSS
.product-main-top-left {
width: 55%;
overflow: hidden;
.product-swiper {
position: relative;
display: flex;
z-index: 0;
width: 100%;
height: 610px;
.product-swiper-thumbs {
display: flex;
order: 1;
width: auto;
height: 610px;
margin-right: 0;
margin-top: 48px !important;
.swiper-slide {
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
cursor: pointer;
width: 120px !important;
height: 120px !important;
&.swiper-slide-active {
img {
border: 1px solid #83C000;
}
}
img {
width: 80%;
height: 80%;
padding: 10px;
border: 1px solid #D9D9D9;
border-radius: 8px;
object-fit: cover;
user-select: none;
background-color: #FFFFFF;
&:hover {
border: 1px solid #83C000;
}
}
}
}
.product-swiper-slider {
display: flex;
order: 2;
height: 710px;
margin-top: 16px;
overflow: hidden;
.swiper-slide {
display: flex;
align-items: flex-start;
justify-content: center;
box-sizing: border-box;
img {
width: 80%;
height: 80%;
padding: 10px;
border: 1px solid #D9D9D9;
border-radius: 8px;
object-fit: cover;
user-select: none;
background-color: #FFFFFF;
}
}
.swiper-button-prev {
position: absolute;
top: 40px;
left: 40px;
width: 44px;
height: 16px;
&::after {
background: url('./../assets/product-page/product-prev-btn.svg') no-repeat !important;
font-size: 0 !important;
width: 44px;
height: 16px;
background-size: contain !important;
}
}
.swiper-button-next {
position: absolute;
top: unset;
bottom: 24px;
left: 40px;
width: 44px;
height: 16px;
transform: rotate(180deg);
&::after {
background: url('./../assets/product-page/product-prev-btn.svg') no-repeat !important;
font-size: 0 !important;
width: 44px;
height: 16px;
background-size: contain !important;
}
}
}
}
JS
const slider2 = new Swiper ('.product-swiper-slider', {
slidesPerView: 1,
loop: true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
const thumbs = new Swiper ('.product-swiper-thumbs', {
direction: 'vertical',
slidesPerView: 4,
slideToClickedSlide: true,
spaceBetween: 10,
freeMode: true,
watchSlidesProgress: true,
ClickAble: true,
loop: true,
});
slider2.controller.control = thumbs;
thumbs.controller.control = slider2;