Your question should be specific to WordPress. Generic PHP/JS/SQL/HTML/CSS questions might be better asked at Stack Overflow or another appropriate Stack Exchange network site. Third-party plugins and themes are off-topic for this site; they are better asked about at their developers' support routes.
Closed 4 years ago.
Improve this questionI 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);
});
Your question should be specific to WordPress. Generic PHP/JS/SQL/HTML/CSS questions might be better asked at Stack Overflow or another appropriate Stack Exchange network site. Third-party plugins and themes are off-topic for this site; they are better asked about at their developers' support routes.
Closed 4 years ago.
Improve this questionI 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);
});
1 Answer
Reset to default 0HTML
<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);