0

I would want to have the below setinterval() to start afresh once the last slide is reached, am having three div and but the slide stops once it reaches the third div, i would want it to start again from the first.

My Html code 

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="jquery.min.js"></script>
<script src="myjava.js"></script>
</head>
<body>
<div class="container">
<div id="slide1" class="slider1">My first slide goes here</div>
<div id="slide2" class="slider2">My second slide goes here</div>
<div id="slide3" class="slider3">My third slide goes here</div>

And my Java code Below 

jQuery(function($){ 

var currentDIV = $("#slide1");
var nextDIV, count = 1;
var myInterval = setInterval(function(){
    currentDIV.hide();
    currentDIV = currentDIV.next();
    currentDIV.show();


}, 2000);

});
Improve this question

1 Answer 1

Reset to default
0

HTML

<div class="container" id="slider-container">  
    <div id="slide1" class="slider-slide">My first slide goes here</div>
    <div id="slide2" class="slider-slide">My second slide goes here</div>
    <div id="slide3" class="slider-slide">My third slide goes here</div>
</div>

Javascript

( function( $ ){ 

    let firstDIV = currentDIV = $( '#slider-container div' ).first();

    if( firstDIV.length > 0 ){
        setInterval( () => {
            currentDIV = currentDIV.hide().next();

            if( currentDIV.length === 0 )
                currentDIV = firstDIV;

            currentDIV.show();

        }, 2000);
    }

} )(jQuery, undefined);
Improve this answer
1
  • This worked as expected @tousignant.christopher the slide loops without ending and that's exactly what i wanted, even though i have to remove the jquery undefined so that i can understand the code better
    – pandglobal
    Jun 12, 2020 at 2:55

Not the answer you're looking for? Browse other questions tagged or ask your own question.