主页 / 问题 / 1083520
Accepted
M141
Asked:2020-02-17 05:24:44 +0000 UTC2020-02-17 05:24:44 +0000 UTC

在网站上多次初始化滑动滑块的工作不正确

  • 772

该功能有一个下拉内容，其中包含一个滑动滑块 ( https://stackblitz.com/edit/swiper-demo-6-fraction-pagination?file=index.html )。

问题是通过移动鼠标更改幻灯片时，只有首先打开的下拉菜单有效。我附上截图：

1）第一次打开的正确操作： 在此处输入图像描述

2）这是第二个打开的，在同一个会话中：（滑块停止滚动到最后，分页消失了）。 在此处输入图像描述

有了这一切，如果您使用箭头来更改幻灯片，那么在所有情况下它都可以正常工作。

如果有的话，这里是连接滑动器滑块的元素

<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>

javascript

1 个回答

  1. Best Answer

    Удалось достичь некоторых успехов. В 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

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

    还有一个问题。在移动版本中，只有在您单击内容或任何箭头一次后才能使用鼠标滚动，是否有可能以某种方式修复它？

    如果有人回答谢谢

    • 0

相关问题