Question

var swiper = new Swiper('.swiper-container', {
  effect: 'cube',
  /*this is the effect when the slideshow is playing*/
  zoom: true,
  pagination: '.swiper-pagination',
  nextButton: '.swiper-button-next',
  prevButton: '.swiper-button-prev',
  paginationClickable: true,
  spaceBetween: 30,
  centeredSlides: true,
  autoplay: 5000,
  preloadImages: true,
  autoplayDisableOnInteraction: false
});

function pauseFunction() {
  swiper.stopAutoplay();
  swiper.effect = 'slide' (); /*Here is the effect when user pause the slideshow*/
}

function playFunction() {
  swiper.startAutoplay();
}

html,
body {
  position: relative;
  height: 100%;
}

body {
  background: #fff;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #000;
  margin: 0;
  padding: 0;
}

.swiper-container {
  width: 300px;
  height: 300px;
}

.swiper-slide {
  background-position: center;
  background-size: cover;
}

<link href="http://idangero.us/swiper/dist/css/swiper.min.css" rel="stylesheet" />
<script src="http://idangero.us/swiper/dist/js/swiper.min.js"></script>
<!-- Swiper -->
<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide" style="background-image:url(http://lorempixel.com/600/600/nature/1)"></div>
    <div class="swiper-slide" style="background-image:url(http://lorempixel.com/600/600/nature/2)"></div>
    <div class="swiper-slide" style="background-image:url(http://lorempixel.com/600/600/nature/3)"></div>
    <div class="swiper-slide" style="background-image:url(http://lorempixel.com/600/600/nature/4)"></div>
    <div class="swiper-slide" style="background-image:url(http://lorempixel.com/600/600/nature/5)"></div>
  </div>
  <!-- Add Arrows -->
  <div class="swiper-button-next swiper-button-white"></div>
  <div class="swiper-button-prev swiper-button-white"></div>
  <!-- Add Pagination -->
  <div class="swiper-pagination"></div>
</div>

暂停按钮工作正常，但效果根本没有改变。它仍然使用立方体效果。以下是使用http://idangero.us/swiper/api/#.WNCd81V97IU的swiper im的链接。他们的论坛似乎不活跃，这就是为什么我从这里寻求帮助..谢谢！更新：这是Jsfiddle https://jsfiddle.net/hdpb7b91/

Answer 1

您可以在下面的代码段中看到您提出的问题。如果您需要恢复播放事件的原始cube效果，请使用原始设置重新初始化滑块。

＆＃13;

var swiper = new Swiper('.swiper-container', {
  effect: 'cube',
  /*this is the effect when the slideshow is playing*/
  zoom: true,
  pagination: '.swiper-pagination',
  nextButton: '.swiper-button-next',
  prevButton: '.swiper-button-prev',
  paginationClickable: true,
  spaceBetween: 30,
  centeredSlides: true,
  autoplay: 5000,
  preloadImages: true,
  autoplayDisableOnInteraction: false
});

var activeSlide = swiper.activeIndex;

function pauseFunction() {
  swiper.stopAutoplay();
  activeSlide = swiper.activeIndex;
  swiper.destroy(true, true);
  swiper = new Swiper('.swiper-container', {
    effect: 'slide',
    /*this is the effect when the slideshow is playing*/
    zoom: true,
    pagination: '.swiper-pagination',
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    paginationClickable: true,
    spaceBetween: 30,
    centeredSlides: true,
    autoplay: 5000,
    preloadImages: true,
    autoplayDisableOnInteraction: false
  });
  swiper.slideTo(activeSlide);
}

function playFunction() {
  swiper.startAutoplay();
}

＆＃13;

html,
body {
  position: relative;
  height: 100%;
}

body {
  background: #fff;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #000;
  margin: 0;
  padding: 0;
}

.swiper-container {
  width: 300px;
  height: 300px;
}

.swiper-slide {
  background-position: center;
  background-size: cover;
}

img {
  max-width: 100%;
}

＆＃13;

<link href="http://idangero.us/swiper/dist/css/swiper.min.css" rel="stylesheet" />
<script src="http://idangero.us/swiper/dist/js/swiper.min.js"></script>
<!-- Swiper -->
<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide"><img src="https://dummyimage.com/600x600/000/fff" /></div>
    <div class="swiper-slide"><img src="https://dummyimage.com/600x600/000/fff" /></div>
    <div class="swiper-slide"><img src="https://dummyimage.com/600x600/000/fff" /></div>
    <div class="swiper-slide"><img src="https://dummyimage.com/600x600/000/fff" /></div>
    <div class="swiper-slide"><img src="https://dummyimage.com/600x600/000/fff" /></div>
  </div>
  <!-- Add Arrows -->
  <div class="swiper-button-next swiper-button-white"></div>
  <div class="swiper-button-prev swiper-button-white"></div>
  <!-- Add Pagination -->
  <div class="swiper-pagination"></div>
  <!-- Add action buttons -->
  <br/><br/>
  <button onclick="playFunction()">Play</button>
  <button onclick="pauseFunction()">Pause</button>
</div>

＆＃13;

更新1：我修改了答案，以便在效果发生变化后将片段恢复为上一张活动幻灯片。

更新2：可以通过在第二个滑块设置区域中添加此initialSlide: activeSlide并注释掉{{1}来避免这种尴尬的自动滑动效果（在索引4或5时）行。

如何更改暂停事件

1 个答案: