CODEWITHSUNDEEP
javascriptjquery
Bijan Zand
Bijan Zand

Reputation: 417

How make this slider to auto play

I am trying to get this slider to auto play in Javascript but I can't seem to get it to work, Does anyone know how I can achieve this? Every time I tried something it seemed to break the slider.

jsfiddle version: http://jsfiddle.net/BijanZand/7zebthjp/

Here is the current code:

$(function() {
$("#t1").mouseover(function() {
    $("#t2").removeClass("current");
    $(this).addClass("current");
    $("#newTrend").fadeOut(function() {
        $("#newContent").fadeIn();
    });
});
$("#t2").mouseover(function() {
    $("#t1").removeClass("current");
    $(this).addClass("current");
    $("#newContent").fadeOut(function() {
        $("#newTrend").fadeIn();   
      });
  });
  });

Upvotes: 1

Views: 180

Answers (4)

Parth Akbari
Parth Akbari

Reputation: 651

Try my Example.

HTML Code 

 <div id="tt" class="easyui-tabs" style="width:330px;height:270px;">
    <div title="Shirt1" style="padding:20px;">
      <img src="images/shirt1.gif">
      </div>
    <div title="Shirt2" style="padding:20px;">
      <img src="images/shirt2.gif">
     </div>
     <div title="Shirt3" style="padding:20px;">
     <img src="images/shirt3.gif">
    </div>
    <div title="Shirt4" style="padding:20px;">
     <img src="images/shirt4.gif">
    </div>
    <div title="Shirt5" style="padding:20px;">
      <img src="images/shirt5.gif">
    </div>
</div>

Auto Play Code.

     var index = 0;
     var t = $('#tt');
     var tabs = t.tabs('tabs');
     setInterval(function(){
      t.tabs('select', tabs[index].panel('options').title);
       index++;
       if (index >= tabs.length){
       index = 0;
       }
       }, 3000);

Upvotes: 0

Cerlin
Cerlin

Reputation: 6722

You can add the below code with your existing code

var changeit = function(){
    $('#newTrendTap li:not(.current)').trigger('mouseover');
    setTimeout(changeit,3000);
}

changeit();

Check this fiddle

Upvotes: 1

Martin Ernst
Martin Ernst

Reputation: 3289

$(function() {
    var both = $('#t1, #t2'),
        run = function() {return window.setInterval(function() {
            both.not('.current').trigger('mouseover', 1);
        }, 1000);},
        play = run();
    both.mouseout(function() {play = run();});

    both.eq(0).mouseover(function(ev, data) {
        if (!data) window.clearInterval(play);
        both.eq(1).removeClass("current");
        $(this).addClass("current");
        $("#newTrend").fadeOut(function() {
            $("#newContent").fadeIn();
        });
    });
    both.eq(1).mouseover(function(ev, data) {
        if (!data) window.clearInterval(play);
        both.eq(0).removeClass("current");
        $(this).addClass("current");
        $("#newContent").fadeOut(function() {
            $("#newTrend").fadeIn();   
        });
    });
});

A working DEMO HERE. The autoplay stops when you hover over a tab and starts again when the mouse goes out.

Upvotes: 2

Md Ashaduzzaman
Md Ashaduzzaman

Reputation: 4038

Just a quick solution :

Recursively switching between functions will let you have your requirement fulfilled. But of course you have other better options to reach your goal.

jQuery : 

A();

function A(){
        $("#t2").removeClass("current");
        $("#t1").addClass("current");
        $("#newTrend").fadeOut(300, function() {
            $("#newContent").fadeIn();
            B();
        });
}

function B(){
        $("#t1").removeClass("current");
        $("#t2").addClass("current");
        $("#newContent").fadeOut(500, function() {
            $("#newTrend").fadeIn();
            A();
        });
}

jsFiddle

Upvotes: 3

Related Questions