Есть такая конструкция слайдера:
var menu_obj = ['Все', 'Последние']
const ObjSlider = new Swiper('.objects-swiper', {
pagination: {
el: '.swiper-pagination-attached',
clickable: true,
renderBullet: function(index, className) {
return '<span class="' + className + '">' + (menu_obj[index]) + '</span>';
},
}
});
const AttachedSlider = new Swiper('.attached-swiper', {
loop: true,
pagination: {
el: '.swiper-pagination-objects',
type: 'fraction'
},
slidesPerView: 3,
spaceBetween: 30,
navigation: {
nextEl: '.objects-button-right',
prevEl: '.objects-button-left',
}
});
$('.objects-swiper .swiper-pagination-bullet').click(function() {
AttachedSlider.slideTo(0, 1000, true);
})
.objects {
padding: 80px 0 110px 0;
color: #141416;
}
.objects .top__container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.objects .objects__nav {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.objects .objects__nav .swiper-pagination-objects {
margin: 0 27px;
color: #141416;
font-weight: 600;
}
.objects .objects__nav .swiper-pagination-objects .swiper-pagination-current {
color: #EE4623;
}
.objects .objects__nav .swiper-pagination-attached {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
text-align: center;
width: 100%;
margin-right: 70px;
}
.objects .objects__nav .swiper-pagination-attached .swiper-pagination-bullet {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: initial;
height: initial;
opacity: initial;
background: initial;
border-radius: initial;
padding: 0 35px 9px 35px;
font-weight: 600;
color: rgba(20, 20, 22, 0.5);
border-bottom: 2px solid rgba(20, 20, 22, 0.2);
padding-bottom: 9px;
-webkit-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.objects .objects__nav .swiper-pagination-attached .swiper-pagination-bullet:first-child {
padding: 0 35px 9px 0;
}
.objects .objects__nav .swiper-pagination-attached .swiper-pagination-bullet:last-child {
padding: 0 0 9px 35px;
}
.objects .objects__nav .swiper-pagination-attached .swiper-pagination-bullet:hover {
color: #EE4623;
border-bottom: 2px solid #EE4623;
}
.objects .objects__nav .swiper-pagination-attached .swiper-pagination-bullet-active {
color: #EE4623;
border-bottom: 2px solid #EE4623;
}
.objects .objects__nav .objects-button-left, .objects .objects__nav .objects-button-right {
cursor: pointer;
}
.objects .objects__nav svg path {
stroke: #141416;
}
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="objects">
<div class="wrapper">
<div class="top__container">
<div class="title__container">
<h2 class="title">
Объекты
</h2>
</div>
<div class="objects__nav">
<div class="swiper-pagination-attached"></div>
<div class="objects-button-left">
<svg xmlns="http://www.w3.org/2000/svg" width="9.121" height="15.414" viewBox="0 0 9.121 15.414">
<path id="Контур_124" data-name="Контур 124" d="M0,7,7,0l7,7" transform="translate(1.414 14.707) rotate(-90)" fill="none" stroke="#fff" stroke-width="2"/>
</svg>
</div>
<div class="swiper-pagination-objects"></div>
<div class="objects-button-right">
<svg xmlns="http://www.w3.org/2000/svg" width="9.121" height="15.414" viewBox="0 0 9.121 15.414">
<path id="Контур_123" data-name="Контур 123" d="M1036.165,65l7,7,7-7" transform="translate(-64.293 1050.872) rotate(-90)" fill="none" stroke="#fff" stroke-width="2"/>
</svg>
</div>
</div>
</div>
</div>
<div class="objects__inner">
<div class="swiper-container objects-swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="swiper-container attached-swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
1
</div>
<div class="swiper-slide">
2
</div>
<div class="swiper-slide">
3
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="swiper-container attached-swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
1
</div>
<div class="swiper-slide">
2
</div>
<div class="swiper-slide">
3
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Вся проблема заключается в том, что при нажатии на кнопки "Все/Последние" нужно что-бы вложенный слайдер переключался на первый слайд. Я попытался использовать метод swiper.slideto
из документации, выглядит это так:
$('.objects-swiper .swiper-pagination-bullet').click(function() {
AttachedSlider.slideTo(0, 1000, true);
})
но судя по всему слушается он только внутри самого const Swiper
, только вот функцию туда вложить не получается.
Так же у Swiper есть событие click, которое можно обрабатывать, но дело в том, что слушает он сам клик по слайдеру, а не по pagination(Кнопки переключения).