Инциализация двух слайдеров Swiper JS. Не работает второй слайдер
Необходимо сделать несколько слайдеров на каждый таб. Пробовал задавать разные селекторы кнопкам и самим слайдерам. Но всегда один слайдер работает адекватно, второй прокручивается только мышкой и то некорректно.
Код JS:
var mySwiper = new Swiper('#math', {
navigation: {
nextEl: '#next-math',
prevEl: '#prev-math',
}
});
var mySwiper = new Swiper('#chemistry', {
navigation: {
nextEl: '.next-chemistry',
prevEl: '.prev-chemistry',
}
});
<div class="swiper-container slider-container math" id="math">
<div class="slider-title">
<h4 class="slider-title-title title">Математика</h4>
<p class="slider-title-subtitle">Больше 20 учителей химии с многолетним стажем делились своим
опытом, для
создания понятного и лёгкого к восприятию курса химии для наших учеников</p>
</div>
<div class="swiper-wrapper slider-wrapper">
<div class="swiper-slide lesson-slide">
<img src="img/lesson/chemistry-photo.png" alt="" class="lesson-slide-img">
<div class="lesson-slide-text">
<div class="slide-title">
<span class="name"><strong>Маркова Светлана</strong></span>
<span class="year">17 лет</span>
<span class="city">Саратов</span>
<span class="points"><strong>82</strong>Балла</span>
</div>
<div class="slide-subtitle">
<p class="slide-subtitle-text">В 2019 году прошла подготовку по химии за два месяца до ЕГЭ
</p>
<p class="slide-subtitle-text">“Моя подруга посоветовала мне этот сайт и показала свои
результаты
по ЕГЭ с прошлого года. Решила попробовать и
нисколечки не пожалела. Даже близко не ожидала, что смогу сдать на столько баллов.
Спасибо за
Вашу помощь”</p>
</div>
</div>
</div>
<div class="swiper-slide">Информация отсутсвует</div>
</div>
<!-- /slider-wrapper -->
<div class="swiper-container slider-container chemistry visible" id="chemistry">
<div class="slider-title">
<h4 class="slider-title-title title">Химия</h4>
<p class="slider-title-subtitle">Больше 20 учителей химии с многолетним стажем делились своим
опытом, для
создания понятного и лёгкого к восприятию курса химии для наших учеников</p>
</div>
<div class="swiper-wrapper slider-wrapper">
<div class="swiper-slide lesson-slide">
<img src="img/lesson/chemistry-photo.png" alt="" class="lesson-slide-img">
<div class="lesson-slide-text">
<div class="slide-title">
<span class="name"><strong>Маркова Светлана</strong></span>
<span class="year">17 лет</span>
<span class="city">Саратов</span>
<span class="points"><strong>82</strong>Балла</span>
</div>
<div class="slide-subtitle">
<p class="slide-subtitle-text">В 2019 году прошла подготовку по химии за два месяца до ЕГЭ
</p>
<p class="slide-subtitle-text">“Моя подруга посоветовала мне этот сайт и показала свои
результаты
по ЕГЭ с прошлого года. Решила попробовать и
нисколечки не пожалела. Даже близко не ожидала, что смогу сдать на столько баллов.
Спасибо за
Вашу помощь”</p>
</div>
</div>
</div>
<div class="swiper-slide">Информация отсутсвует</div>
</div>
<!-- /slider-wrapper -->
<div class="slider-button-prev prev-chemistry"></div>
<div class="slider-button-next next-chemistry"></div>
</div>
<!-- /slider-container -->