Swiper не работает в другом блоке?

Question

[Иван Гордиенко]

Использую для верстки на сайте плагин Swiper
У меня есть обычный раздел с логотипами, который исправно работает и не вызывает вопросов.

В модальном окне карточки товара мне нужно вставить точно такой же слайдер, только с другими "слайдами", соответственно. Слайдер исправно вставляет и отображается, но кнопки не пролистывают его. Если зажать мышью и прокрутить слайдер, то он проходит, но слайды не переключаются по кнопке. Что я делаю не так? Внизу скрипт для первого слайдера, который работает исправно и второй с другой переменной. Пробовал и с такой же, пробовал задавать классы для других кнопок.

<!-- Swiper -->
	<div class="swiper-container m-auto">
		<h1 class="swiper__title">Посмотрите, как мы сэкономили нашим клиентам деньги</h1>
		<div class="swiper-wrapper">
			<div class="swiper-slide"><img class="swaper-img-fluid" src="img/rectangle2.png" alt="logobrand"></div>
			<div class="swiper-slide"><img class="swaper-img-fluid" src="img/rectangle4.png" alt="logobrand"></div>
			<div class="swiper-slide"><img class="swaper-img-fluid" src="img/rectangle3.png" alt="logobrand"></div>
			<div class="swiper-slide"><img class="swaper-img-fluid" src="img/rectangle6.png" alt="logobrand"></div>
			<div class="swiper-slide"><img class="swaper-img-fluid" src="img/rectangle5.png" alt="logobrand"></div>
		</div>
		<!-- Add Arrows -->
		<div class="swiper-button-next"></div>
		<div class="swiper-button-prev"></div>
	</div>

$(function() {

	// Swiper JS //
	var swiper = new Swiper('.swiper-container', {
		slidesPerView: 5,
		spaceBetween: 0,
		slidesPerGroup: 5,
		loop: true,
		loopFillGroupWithBlank: true,
		navigation: {
			nextEl: '.swiper-button-next',
			prevEl: '.swiper-button-prev',
		},
	});

	// Swiper JS //
	var swiper1 = new Swiper1('.swiper-container', {
		slidesPerView: 4,
		spaceBetween: 0,
		slidesPerGroup: 5,
		loop: true,
		loopFillGroupWithBlank: true,
		navigation: {
			nextEl: '.swiper-button-next-second',
			prevEl: '.swiper-button-prev-second',
		},
	});
});

Comments

[Vitaly Max]

Слава Дроздов второй слайдер здесь инициализируется в тот же контейнер, что и первый

[Иван Гордиенко]

Vitaly Max, ответ уже найден, вопрос решенный ниже! Спасибо.

Answer 1

[Иван Гордиенко]

Так как второй слайдер находился в модальном окне Bootstrap, то -

// Swiper JS Внутри карточки магазига //
	var myswiper2 = new Swiper('.swiper-container-item', {
		slidesPerView: 1,
		spaceBetween: 4,
		slidesPerGroup: 1,
		loop: true,
		loopFillGroupWithBlank: true,
		navigation: {
			nextEl: '.swiper-button-next',
			prevEl: '.swiper-button-prev',
		},
	});

	// Swiper JS Modal //
	$('#product_view').on('shown.bs.modal', function(e) {
		myswiper2.update();
	    //var $invoker = $(e.relatedTarget);
		//swiper.slideTo($invoker.data('slider'));
		//swiper.update();
	});

Была создана вторая переменная, закомментированый код не влияет на работу, то был указан в решении другого источника.

Comments

[Dmitry]

Вячеслав, я столкнулся с такой же проблемой. Сегодня решил её с помощью твоего комментария.

У меня, в модальном окне, заработали кнопки слайдера после команды: myswiper2.update();
Наименования кнопок я не менял, только переменную слайдера.

p.s. Огромное спасибо, что не поленился указать, как её решить! Плюсанул.