Jackson Jackson - 4 months ago 12
jQuery Question

jQuery Loop: Go back to the first element when reached the last element in a slideshow?

I'm trying to use jQuery to create a very basic slideshow.

The issue that I currently have is that the slideshow won't loop over the elements.

Basically, it will keep going into an empty space even if no items elements left inside it!

This is a working FIDDLE

Click the button a few times and should see what I mean.

Is there any way to loop through the elements as opposed to going in an empty space? basically find the end/last element and then loop back to the first one?

This is my code:

var click = 1;

$( "#SLIDE" ).click(function() {
var widths = $('.some').width() * click;

$(".some").first()
.animate({ "margin-left": "-"+widths }, "slow" )
.next()
.animate({ "margin-left": 0 }, "slow" )
.end();

click+=1;
});


Any help would be greatly appreciated.

Answer

check JsFiddle Demo

use modulo function to wrap.

click = click % 4;

or if you want it to dynamically get the number of elements you can use this instead:

JsFiddle Demo

click = click % $('.some h1').length;

HTML

<div align="center" id="feedTxt">

    <div class="some">
        <h1>title 1</h1>
        <br>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
            It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently
            with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p>
    </div>



    <div class="some">
        <h1>title 2</h1>
        <br>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
            It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently
            with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p>
    </div>


    <div class="some">
        <h1>title 3</h1>
        <br>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
            It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently
            with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p>
    </div>


    <div class="some">
        <h1>title 4</h1>
        <br>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
            It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently
            with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p>
    </div>

</div>

<button id="SLIDE">Peress to slide</button>

JS

var click = 1;

$( "#SLIDE" ).click(function() {
   var widths = $('.some').width() * click;

   $(".some").first()
             .animate({ "margin-left": "-"+widths }, "slow" )
             .next()
             .animate({ "margin-left": 0 }, "slow" )
             .end();

   click+=1;
   click = click % $('.some h1').length;

}); 

CSS

#feedTxt {
    display: flex;
    overflow-x: scroll;
    height:450px;
    width:100%;
}

.some {
    flex: 0 0 100%;
    height: 450px;
}
Comments