0

В функционале есть выпадающий контент, который содержит swiper slider (https://stackblitz.com/edit/swiper-demo-6-fraction-pagination?file=index.html).

Проблема заключается в том, что при смене слайда с помощью перемещения мышкой, работает только то выпадающее меню, которое было открыто первым. Прикладываю скрины:

1)Корректная работа первого открытого: введите сюда описание изображения

2) А это второе открытое, в той же сессии: (слайдер перестал прокручиваться до конца и исчезла нумерация страниц). введите сюда описание изображения

При всем этом, если пользоваться стрелочками для смены слайдов, то во всех случаях, работает правильно.

Если что, вот элементы для подключения swiper slider

<link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">
<script src="https://unpkg.com/swiper/js/swiper.min.js"></script>

Буду очень благодарен, если сможете помочь решить эту проблему, спасибо.

$(".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 swiper = new Swiper('.swiper-container', {
      pagination: {
        el: '.swiper-pagination',
        type: 'fraction',
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    });
});
@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;
}
}
<!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">
        <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">
          <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>

1 ответ 1

0

Удалось достичь некоторых успехов. В html разметке были добавлены data-id, чтобы можно было использовать их в качестве отдельных переменных для каждого слайдера:

<div class="swiper-container s1" data-id="s1">
    <div class="swiper-container s2" data-id="s2">

Полностью отредактирован js:

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',
        },
        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);
    });
  })

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

Вот такой вид оно имеет: https://youtu.be/d-pzJMKqbqE

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

И еще вопрос. В мобильной версии, скролл мышкой работает только после того, как 1 раз нажмешь на контент или на любую из стрелочек, это возможно как-то пофиксить?

Спасибо, если кто-то откликнется)

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.