У меня стоял вопрос, как же все таки правильно инициировать Swiper slider в Табах, что бы он правильно работал.
Потратив не мало времени я нашел решение!
1 - Первое что надо определить - сколько слайдеров будет на сайте.
2 - Второе: У каждого слайдера должен быть свой собственный код, иначе при пролистывании кнопками Arrow, все слайдеры на сайте будут листаться одновременно, для этого и ограничиваем каждый слайдер собственным кодом со своими классами. Если есть решение лучше, пишите.
3 - Это касается и слайдеров в табах, в каждом табе если даже будут одинаковые слайдеры, то для каждого нужно определить собственный код со своими уникальными классами, именно классы играют роль, по этому у каждого слайдера будут свои классы (Это всего 3 класса которые нужно будет менять - класс Оболочки слайдера, и 2 класса кнопок навигации).
Но, если не проблема, можно просто дублировать слайдеры с одним кодом и с теми же классами, но учтите что они, при пролистывании одного слайдера кнопками Arrow, будут листаться и все остальные, если же просто перетаскиванием мыши листать, то все норм. По этому этот вариант больше подходит для слайдеров без кнопок (стрелок) навигации!
Перейдем к коду:
Структура пусть будет такая:
1й слайдер - Обычный не в табах.
2-3-4 слайдеры - Они все в табах.
5й слайдер - Обычный.
Код:
1) Внутри тега "head" ставим ссылку на сам скрипт Swiper слайдера.
<script async src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
2) Внутри тега "body" добавляем этот код для всех слайдеров
<script>
// Этот код для 1го слайдера!
var swiper1 = new Swiper('.swiper1', {
direction: 'horizontal',
loop: false,
grabCursor: true,
centeredSlides: false,
slidesPerView: "auto",
observer: true,
observeParents: true,
// Navigation arrows
navigation: {
nextEl: '.swiper1-but-next',
prevEl: '.swiper1-but-prev',
},
});
// Этот код для 5го слайдера! Порядок не важен, главное порядок у вас в голове =)
var swiper5 = new Swiper('.swiper5', {
direction: 'horizontal',
loop: false,
grabCursor: true,
centeredSlides: false,
slidesPerView: "auto",
observer: true,
observeParents: true,
// Navigation arrows
navigation: {
nextEl: '.swiperteach-but-next',
prevEl: '.swiperteach-but-prev',
},
});
// Этот код для Табов и их контента, добавляем классы как ниже либо переписываем на свои!
window.addEventListener('DOMContentLoaded', function() {
// Клаcс Одного Таба
var tabs = [].slice.call(document.querySelectorAll('.tab'));
// Класc контента Таба (Обычно его назsвают "Tab Pane") Внутри которого слайдер и тд...
var sheets = [].slice.call(document.querySelectorAll('.sheet'));
tabs.forEach(function(tab, idx) {
tab.addEventListener('click', function(idx, e) {
e.preventDefault();
e.stopPropagation();
// Так же в css для Таб добавляем класс "tab-active"
tabs.forEach(function(t, i) {
if (i == idx) {
t.classList.add('tab-active');
} else {
t.classList.remove('tab-active');
}
});
// И тоже самое для контента. добавляем в css класс "sheet-active" как указано ниже.
sheets.forEach(function(sheet, i) {
if (i == idx) {
sheet.classList.add('sheet-active');
} else {
sheet.classList.remove('sheet-active');
}
});
}.bind(null, idx));
});
// С Табами разобрались . Дальше конкретно код для 1го Слайдера уже для табов. Т.е код ниже используется только если слайдер в табах. Для простого смотрим самые первые коды Слайдера 1 и 5 =).
var swipers = [].slice.call(document.querySelectorAll('.swiper-tab1 '));
swipers.forEach(function(container) {
var swiper = new Swiper(container, {
// Optional parameters
direction: 'horizontal',
loop: false,
grabCursor: true,
centeredSlides: false,
slidesPerView: "auto",
observer: true,
observeParents: true,
// Navigation arrows
navigation: {
nextEl: '.swiper-t1-but-next',
prevEl: '.swiper-t1-but-prev',
},
});
});
// Код для 2го точно такого же слайдера но с другими классами!
var swipers = [].slice.call(document.querySelectorAll('.swiper-tab2'));
swipers.forEach(function(container) {
var swiper = new Swiper(container, {
// Optional parameters
direction: 'horizontal',
loop: false,
grabCursor: true,
centeredSlides: false,
slidesPerView: "auto",
observer: true,
observeParents: true,
// Navigation arrows
navigation: {
nextEl: '.swiper-t2-but-next',
prevEl: '.swiper-t2-but-prev',
},
});
});
// Код для 3го такого же слайдера со своими классами.
var swipers = [].slice.call(document.querySelectorAll('.swiper-tab3'));
swipers.forEach(function(container) {
var swiper = new Swiper(container, {
// Optional parameters
direction: 'horizontal',
loop: false,
grabCursor: true,
centeredSlides: false,
slidesPerView: "auto",
observer: true,
observeParents: true,
// Navigation arrows
navigation: {
nextEl: '.swiper-t3-but-next',
prevEl: '.swiper-t3-but-prev',
},
});
});
});
</script>