How to turn off infinite loop in Swiper

By default Swiper loop the slides in repeat. You can turn off the infinite looping function so when the plugin reach the last slide, it will stop sliding.

1) Click here to open your Weebly Editor

2) Click into “design” then into “edit html/css”

3) Click into “index” to open the plugin page. For people who are using ALL-IN-ONE themes, please click on “splash-swiper” to access the Swiper html codes

4) Here locate this code:

<!-- Swiper Script Code Part 2-->
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="/files/theme/idangerous.swiper-2.1.min.js"></script>
<script>

var mySwiper = new Swiper('.swiper-container',{
pagination: '.pagination',
paginationClickable: true,
speed: 3000,
autoplay: 3500,
loop: true,
autoResize: true
})
$('.arrow-left').on('click', function(e){
e.preventDefault()
mySwiper.swipePrev()
})
$('.arrow-right').on('click', function(e){
e.preventDefault()
mySwiper.swipeNext()
})

jQuery( document ).ready(function( $ ) {
$( ".delay-load" ).delay(300).fadeTo(2200, 1);
});
</script>

5) Here change the highlighted code from TRUE to FALSE, so the code will look like this:

<!-- Swiper Script Code Part 2-->
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="/files/theme/idangerous.swiper-2.1.min.js"></script>
<script>

var mySwiper = new Swiper('.swiper-container',{
pagination: '.pagination',
paginationClickable: true,
speed: 3000,
autoplay: 3500,
loop: false,
autoResize: true
})
$('.arrow-left').on('click', function(e){
e.preventDefault()
mySwiper.swipePrev()
})
$('.arrow-right').on('click', function(e){
e.preventDefault()
mySwiper.swipeNext()
})

jQuery( document ).ready(function( $ ) {
$( ".delay-load" ).delay(300).fadeTo(2200, 1);
});
</script>

6) Save your change than re-publish your site

Tags: