Ask your Question

PEOPLE YOU MIGHT KNOW

gourav
gourav

Moradabad,  India
Lonnie
Lonnie

Jacobus,  United States
Praveen
Praveen

Software Developer

NOIDA,  India
William
William

Web Developer

Elkhart,  United States
Vivek
Vivek

PHP Developer

Noida,  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