Как вызвать событие в swiper по нажатию на кнопку?
Есть такая конструкция слайдера:
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(Кнопки переключения).
Ответы (1 шт):
Учитывая, что в вашем коде вложенные слайдеры привязаны к одному и тому instance - управлять ими будет невозможно. Одно из решений этой проблемы:
Создаем переменную, где будем хранить instance для каждого вложенного слайдера, допустим:
// в переменной будут храниться все созданные вложенные слайдеры
const instanceNestedSlider = {}
и, чтобы одной навигацией управлять разными вложенными слайдерами, создаем переменную, где будем хранить индекс текущего(видимого в настоящий момент) вложенного слайдера:
// индекс активного вложенного слайдера
let activeNestedSlider = 0
создаем функцию, которая будет создавать вложенные слайдеры по требованию
// функция создания нового вложенного слайдера
const createNestedSlider = (el) => {
return new Swiper(el, {
loop: true,
nested: true,
pagination: {
el: '.swiper-pagination-objects',
type: 'fraction',
},
slidesPerView: 3,
spaceBetween: 30,
// отключаем навигацию по умолчанию, так как у нас будет одна для всех
// navigation: {
// nextEl: '.objects-button-right',
// prevEl: '.objects-button-left',
// },
})
}
Создаем функцию, которая будет проводить управление активным вложенным слайдером посредствам пользовательской навигации:
// Пользовательский функционал навигации
// так как она общая для всех вложенных слайдеров
// берет активный слайдер и меняет слайды
const clickNavigate = function (i) {
if (i > 0) {
instanceNestedSlider[activeNestedSlider].slideNext()
} else {
instanceNestedSlider[activeNestedSlider].slidePrev()
}
}
И используя метод on создаем функционал, который будет создавать вложенные слайдеры и управлять индексом активного слайдера:
on: {
init: function (swiper) {
...
},
slideChange: function (swiper) {
...
},
},
Добавляем к элементам навигации обработчики событий:
...
<div class="objects-button-right" onClick="clickNavigate(1)">
...
<div class="objects-button-left" onClick="clickNavigate(-1)">
...
Слайдер готов к работе. В качестве наглядного пример - привожу рабочий пример:
var menu_obj = ['Все', 'Последние']
// в переменной будут храниться все созданные слайдеры
const instanceNestedSlider = {}
// индекс активного вложенного слайдера
let activeNestedSlider = 0
// функция создания нового вложенного слайдера
const createNestedSlider = (el) => {
return new Swiper(el, {
loop: true,
nested: true,
observer: true,
observeParents: true,
pagination: {
el: '.swiper-pagination-objects',
type: 'fraction',
},
slidesPerView: 3,
spaceBetween: 30,
// отключаем навигацию по умолчанию, так как у нас будет одна для всех
// navigation: {
// nextEl: '.objects-button-right',
// prevEl: '.objects-button-left',
// },
})
}
// Пользовательский функционал навигации
// так как она общая для всех вложенных слайдеров
// берет активный слайдер и меняет слайды
const clickNavigate = function(i) {
if (i > 0) {
instanceNestedSlider[activeNestedSlider].slideNext()
} else {
instanceNestedSlider[activeNestedSlider].slidePrev()
}
}
const ObjSlider = new Swiper('.objects-swiper', {
pagination: {
el: '.swiper-pagination-attached',
clickable: true,
observer: true,
observeParents: true,
renderBullet: function(index, className) {
return (
'<span class="' + className + '">' + menu_obj[index] + '</span>'
)
},
},
on: {
init: function(swiper) {
const nestedSlider =
swiper.slides[swiper.activeIndex].querySelector(
'.swiper-container'
)
// если есть вложенный контейнер слайдера
if (nestedSlider) {
// создаем слайдер
instanceNestedSlider[swiper.activeIndex] =
createNestedSlider(nestedSlider)
// устанавливаем его активным
activeNestedSlider = swiper.activeIndex
}
},
slideChange: function(swiper) {
// если среди созданных вложенных слайдеров нет с индексом текущего слайда
if (!instanceNestedSlider[swiper.activeIndex]) {
// если есть вложенный контейнер слайдера
const nestedSlider =
swiper.slides[swiper.activeIndex].querySelector(
'.swiper-container'
)
// создаем слайдер
instanceNestedSlider[swiper.activeIndex] =
createNestedSlider(nestedSlider)
} else {
// иначе переходим к первому слайдеру в активном вложенном слайдере
instanceNestedSlider[swiper.activeIndex].slideToLoop(
0,
1000,
true
)
instanceNestedSlider[swiper.activeIndex].update()
instanceNestedSlider[swiper.activeIndex].pagination.update()
}
// меняем индекс активного слайдера
activeNestedSlider = swiper.activeIndex
},
},
})
.objects {
padding: 5px 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;
}
/* эти стили можно удалить */
.objects-swiper>.swiper-wrapper>.swiper-slide {
background: #eee;
padding: 20px 0;
}
.objects-swiper .swiper-slide:nth-child(2) {
background: #ddd;
}
.objects-swiper .swiper-slide .swiper-slide>div {
padding: 20px;
background: #fff;
color: #ee4623;
}
<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" onClick="clickNavigate(-1)">
<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" onClick="clickNavigate(1)">
<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">
<div>1 слайд 1 вложенного слайдера</div>
</div>
<div class="swiper-slide">
<div>2 слайд 1 вложенного слайдера</div>
</div>
<div class="swiper-slide">
<div>3 слайд 1 вложенного слайдера</div>
</div>
<div class="swiper-slide">
<div>4 слайд 1 вложенного слайдера</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="swiper-container attached-swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div>1 слайд 2 вложенного слайдера</div>
</div>
<div class="swiper-slide">
<div>2 слайд 2 вложенного слайдера</div>
</div>
<div class="swiper-slide">
<div>3 слайд 2 вложенного слайдера</div>
</div>
<div class="swiper-slide">
<div>4 слайд 2 вложенного слайдера</div>
</div>
<div class="swiper-slide">
<div>5 слайд 2 вложенного слайдера</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>