Ask your Question

Discover our new Professionals

Pawan Singh
Pawan Singh

Software Engineer

new delhi,  India
Sangita
Sangita

SAP Application support

Pune,  India
Hashir
Hashir

Rawalpindi,  Pakistan
Bhuwan
Bhuwan

Intern PHP Developer

Dehradun,  India
Mintu
Mintu

Faridabad,  India

Write to us

Ask Question

Set Interval Of Multiple Divs in HTML Along With Common Loop For All Set

Ajeet Kumar Yadav

Hello Guys It's a long time back ago to share my knowledge source and real time challenge that i have faced in my company, Now I am Back With Another Interesting Topic to share with you. This is basically about the set interval function of JavaScript wrapped in a loop of three div set. The Most Simple way of scrolling images is using slider is to use multiple plugins from any site. But What happen when someone asks you to scroll all images simultaneously in a common div set and repeat next div after some interval. Here Is my experience with following demo example that i have created For You and is Successfully Launched Somewhere .

See the Demo Here For Slider With Seven Set Of Images.

http://digitaltask.in/projects/storyline-nuluv/slidemagic.html.

NOTE :- For Sliding Effects I Have Used Css Keyframes From W3c Schools

https://www.w3schools.com/cssref/css3_pr_animation-keyframes.asp

// javascript Code here //

var myIndex = 0;
carousel();

function carousel() {
    var i;
    var x = document.getElementsByClassName("storytabs");
    for (i = 0; i < x.length; i++) {
        x[i].style.display = "none";
        jQuery("div.innerright").removeClass("slideright");
        jQuery("div.halftopdv").removeClass("slidhalfrgt");
        jQuery("div.innerleft").removeClass("slideright");
        jQuery("div.tofive").removeClass("slideleft");
    }
    myIndex++;
    if (myIndex > x.length) {
        myIndex = 1
    }
    x[myIndex - 1].style.display = "block";
    setTimeout(carousel, 5000); // Change image every 2 seconds 
   jQuery("div.innerright").addClass("slideright"); 
   jQuery("div.halftopdv").addClass("slidhalfrgt"); 
   jQuery("div.innerleft").addClass("slideright"); 
   jQuery("div.tofive").addClass("slideleft");
 }
// This is just a sample script. Paste your real code (javascript or HTML) here.

    if ('this_is' == /an_example/) {
        of_beautifier();
    } else {
        var a = b ? (c % d) : e[f];
    }

Ajeet Kumar Yadav

Please rotate your device

We don't support landscape mode on your device. Please rotate to portrait mode for the best view of our site