БЛОГ НА HUSL


Проблема с нумерацией в swiper слайдере (несколько слайдеров на одной странице)

Автор вопроса: Sergey Marano

подскажите, пожалуйста. Каким образом можно настроить swiper слайдер (несколько на одной странице), чтобы в ситуации, когда ты убираешь курсор с контента, нумерация (соответственно и сам контент) не обнулялась.

Раньше была проблема в том, что один слайдер работал, другой же просто ломался. Тот код, который есть сейчас исправил ту проблему, но возникла эта. Вот ссылка, где решали клик

Если с таким кодом нельзя ничего сделать, чтобы сохранить функционал (скрол контента навигационными стрелочками, клавишами стрелочек и свайпом мышкой) то подскажите какие-то аналоги, через которые можно было бы это сделать.

Буду очень благодарен за любую помощь :)

Вот сам swiper slider (https://stackblitz.com/edit/swiper-demo-6-fraction-pagination?file=index.html).

Через запуск кода работает тут, но для большей понятности, вот видео фрагмент, как это работает: Вот такой вид оно имеет: https://youtu.be/d-pzJMKqbqE

$(".accordion_tab").click(function () {
  if ($(this).hasClass("active")) {
    $(this).removeClass("active");
    $(this).next().removeClass("active"); 
    return;
  }
  $(".accordion_tab").each(function () {
    $(this).removeClass("active");
  });
  $(this).addClass("active");
  $(this).next().addClass("active");
  var mySwiper;
  $('.swiper-container').each(function () {
    $(this).on("mouseenter", function (e) {
      $(this).find('.swiper-pagination,.swiper-button-next,.swiper-button-prev,.swiper-scrollbar').addClass('activeSwipe');
      $(this).attr("data-id");
      mySwiper = new Swiper('.' + $(this).attr("data-id"), {
        loop: true,
        speed: 400,
        pagination: {
          el: '.swiper-pagination',
          type: 'fraction',
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
        keyboard: {
          enabled: true,
        },
        preventClicksPropagation: false
      });
    });

    $(this).on("mouseleave", function (e) {
      $(this).find('.swiper-pagination,.swiper-button-next,.swiper-button-prev,.swiper-scrollbar').removeClass('activeSwipe');
      mySwiper.destroy(true, true);
    });
  })
});
@import url(https://fonts.googleapis.com/css?family=Roboto:400,500);
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css);
*, *:before, *:after {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  color: #444;
  font-family: 'Roboto', sans-serif;
  font-size: 1rem;
  line-height: 1.5;
}

.slider__contents {
  height: 100%;
  padding: 2rem;
  text-align: center;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  -webkit-flex-flow: column nowrap;
      -ms-flex-flow: column nowrap;
          flex-flow: column nowrap;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.slider__caption {
  font-weight: 500;
  margin: 2rem 0 1rem;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  text-transform: uppercase;
}
.slider__txt {
  color: #999;
  margin-bottom: 3rem;
  max-width: 700px;
}







@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700&display=swap');

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Open Sans', sans-serif;
}

body{
  background: #f8f9fb;
}

.wrapper{ /* 13.02.20-14.02.20 курсы */
	max-width: 1000px;
	width: 100%;
	margin: 50px auto;
}

.wrapper .title{
	margin-bottom: 25px;
	background: #5393dc;
	padding: 20px;
	font-size: 20px;
	text-align: center;
	color: #fff;
	text-transform: uppercase;
	border-radius: 2px;
	font-weight: 700;
}

.wrapper .accordion_item{
	margin-bottom: 25px;
	box-shadow: 0 0 5px rgba(225,225,225,0.5);
}

.wrapper .accordion_item .accordion_tab{
	background: #fff;
	padding: 20px;
	color: #2e3038;
	font-size: 18px;
	font-weight: 600;
	cursor: pointer;
	position: relative;
	transition: all 0.3s ease;
}

.wrapper .accordion_item .accordion_tab.active{
	color: #fff;
	background: #5393dc;
}

.wrapper .accordion_item .accordion_tab .arrow{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 20px;
	width: 25px;
	height: 25px;
	border-radius: 50%;
	background: #5393dc;
}

.wrapper .accordion_item .accordion_tab .arrow img{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 13px;
	height: 13px;
}

.wrapper .accordion_item .accordion_tab.active .arrow img{
	transform: translate(-50%,-50%) rotate(180deg);
	transition: all 0.3s ease;
}

.wrapper .accordion_item .accordion_content{
	background: #fff;
	display: none;
	transition: all 0.3s ease;
}

.wrapper .accordion_item .accordion_content p{
	font-size: 14px;
	line-height: 22px;
	padding: 20px;
	color: #858aa5; 
}

.wrapper .accordion_item .accordion_tab.active + .accordion_content{
	display: block;	
  transition: all 0.3s ease;
}

.swiper-container {
  width: 100%;
  height: 100%;
}
.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
      /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}


@media (max-width: 480px){ 
.slider__contents img {
  max-width: 320px;
}
}
<script src="https://unpkg.com/swiper/js/swiper.min.js"></script>
<link href="https://unpkg.com/swiper/css/swiper.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="css/tstyle2.css">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" />
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"
    integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
  <link rel="stylesheet" href="swiper.min.css">
  <title>...</title>
</head>
<body>
  
  <section id="courses"> 
    <div class="wrapper">
      <div class="title">Name</div>
      <div class="title">Name1</div>
      <div class="accordion_wrapper">
    <div class="accordion_item">
      <div class="accordion_tab">...
        <div class="arrow">
          <img src="https://i.imgur.com/XuM2oTr.png" alt="arrow">
        </div>
      </div>
      <div class="accordion_content"> 

      <div class="swiper-container s1" data-id="s1">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
              <div class="slider__contents"><img src="https://cdn.searchenginejournal.com/wp-content/uploads/2019/11/how-to-do-a-reverse-image-search-on-google-using-desktop-or-mobile-5dc4ceb3eda59-760x400.png">
                <h2 class="slider__caption">Вопрос?</h2>
                <p class="slider__txt">Ответ.</p>
              </div>
          </div>
          <div class="swiper-slide">
            <div class="slider__contents"><img src="https://cdn.searchenginejournal.com/wp-content/uploads/2019/11/how-to-do-a-reverse-image-search-on-google-using-desktop-or-mobile-5dc4ceb3eda59-760x400.png">
              <h2 class="slider__caption">Вопрос?</h2>
              <p class="slider__txt">Ответ</p>
            </div>
          </div>
          <div class="swiper-slide">
            <div class="slider__contents"><img src="https://cdn.searchenginejournal.com/wp-content/uploads/2019/11/how-to-do-a-reverse-image-search-on-google-using-desktop-or-mobile-5dc4ceb3eda59-760x400.png">
              <h2 class="slider__caption">Вопрос?</h2>
              <p class="slider__txt">Ответ</p>
            </div>
          </div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
        <!-- Add Arrows -->
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
      </div>
    </div>
  </div>

    <div class="accordion_item">
      <div class="accordion_tab">...
        <div class="arrow">
          <img src="https://i.imgur.com/XuM2oTr.png" alt="arrow">
        </div>
      </div>
      <div class="accordion_content">
        <div class="swiper-container s2" data-id="s2">
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <div class="slider__contents"><img src="https://cdn.searchenginejournal.com/wp-content/uploads/2019/11/how-to-do-a-reverse-image-search-on-google-using-desktop-or-mobile-5dc4ceb3eda59-760x400.png">
                <h2 class="slider__caption">Вопрос?</h2>
                <p class="slider__txt">Ответ</p>
              </div>
            </div>
            <div class="swiper-slide">
              <div class="slider__contents"><img src="https://cdn.searchenginejournal.com/wp-content/uploads/2019/11/how-to-do-a-reverse-image-search-on-google-using-desktop-or-mobile-5dc4ceb3eda59-760x400.png">
                <h2 class="slider__caption">Вопрос?</h2>
                <p class="slider__txt">Ответ</p>
              </div>
            </div>
            <div class="swiper-slide">
              <div class="slider__contents"><img src="https://cdn.searchenginejournal.com/wp-content/uploads/2019/11/how-to-do-a-reverse-image-search-on-google-using-desktop-or-mobile-5dc4ceb3eda59-760x400.png">
                <h2 class="slider__caption">Вопрос?</h2>
                <p class="slider__txt">Ответ</p>
              </div>
            </div>
          </div>
          <!-- Add Pagination -->
          <div class="swiper-pagination"></div>
          <!-- Add Arrows -->
          <div class="swiper-button-next"></div>
          <div class="swiper-button-prev"></div>
        </div>
      </div>
    </div>
  </div>
</div>
</section>


<script src="swiper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
  integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
  integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="main.js"></script>
</body>
</html>


Источник

Ответы (0 шт):

licensed under cc by-sa 3.0 with attribution.