Wie Diashow Übergang auf Pause Ereignisse

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>

Die Pause-Taste funktioniert gut, aber die Wirkung wird nicht verändert ändern. Es verwendet immer noch den Würfeleffekt. Hier ist der Link zum Swiper mit http://idangero.us/swiper/api/#.WNCd81V97IU. Ihr Forum scheint nicht aktiv, deshalb suche ich Hilfe von hier .. Danke! Update: Hier ist der Jsfiddle https://jsfiddle.net/hdpb7b91/

Answer 1

Was Sie fragen, ist auf Schnipsel unten zu sehen. Wenn Sie den ursprünglichen Effekt cube für das Wiedergabe-Ereignis wiederherstellen müssen, initialisieren Sie den Schieberegler erneut mit den ursprünglichen Einstellungen.

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(); 
 
}

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%; 
 
}

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

Update 1: Ich habe die Antwort geändert, um den Code-Schnipsel zur Aufnahme zurück in die letzten aktiven Folie, nach der Wirkung Änderung zurückzukehren.

Update 2: Das ungeschickte auto Gleitwirkung (wenn sie auf Index 4 oder 5) kann durch Zugabe dieses initialSlide: activeSlide innerhalb des zweiten swiper Einstellungsbereich und Kommentierung out swiper.slideTo(activeSlide); Linie vermeiden.