@Kurban777

Как инициировать Swiper в Табах правильно, без лагов и багов?

Как правильно инициировать Swiper slider в Табах? Что бы он правильно работали. Потому что все решения которые я нашел не подходят, они у меня тупо не работают. Т.е работают коряво, один слайдер работает нормально а остальные в других табах ведут себя странно...
  • Вопрос задан
  • 40 просмотров
Пригласить эксперта
Ответы на вопрос 1
@Kurban777 Автор вопроса
В общем покопавшись и потратив куча времени нашел идеальное решение на мой взгляд:

Подробно опишу что бы каждому было понятно, а для "профи" достаточно будет скопировать код ниже и подстроить под себя=)

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>
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы