CODEWITHSUNDEEP
javascriptjquery
akhilviswam
akhilviswam

Reputation: 95

Trigger jquery slide automatically

JSFiddle

This is a sample fiddle for horizontal sliding of divs using jquery animate method.Here user need to click on each link to trigger sliding.What i need is to trigger sliding automatically.Please give a code inside button click function to trigger the sliding.

#left, #right {
position: relative;
float: left;
margin: 0 5px 0 0;
border: 1px solid black;
width: 200px;
height: 300px;
overflow: hidden;
}

div.panel {
position: absolute;
height: 100%;
width: 100%;
display: none;
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
  jQuery(function($) {

$('button').click(function(){
alert("sssd")
})
$('a.panel').click(function() {
    var $target = $($(this).attr('href')),
        $other = $target.siblings('.active');
    if (!$target.hasClass('active')) {
        $other.each(function(index, self) {
            var $this = $(this);
            $this.removeClass('active').animate({
                left: 0
            }, 500);
        });

        $target.addClass('active').show().css({
            left: -($(this).width() - ($target.width()))
        }).animate({
            left: 0
        }, 500);
    }
});

});
  </script>
  <body>
  <a href="#target1" class="panel">Target 1</a><br/>
<a href="#target2" class="panel">Target 2</a><br/>
<a href="#target3" class="panel">Target 3</a><br/>

<button>Trigger</button>
<div id="right">
<div class="panel" id="target1" style="background:green">
<p>akhil viswam</p></div>
<div class="panel" id="target2" style="background:red">Target 2</div>
<div class="panel" id="target3" style="background:yellow">Target 3</div>
</div>
</body>
</html>

Upvotes: 2

Views: 910

Answers (1)

vijayP
vijayP

Reputation: 11502

You may check below code:

  var count = $('a.panel').length;
  var index = 0;
  var myInterval = null;

  $('button').click(function() {

    //code to only animate specific slide
    //$('a[href="#target2"]').click();


    myInterval = setInterval(function() {
      //if all the slides animated, then stop the animation
      if (index > count) {
        clearInterval(myInterval);
      } else {
        $($('a.panel').get(index)).trigger("click"); //manually click the element one by one
        index++;
      }
    }, 1000); //animate each slide after 1 second

  });

Updated fiddle link: http://jsfiddle.net/rs2QK/3894/

Upvotes: 1

Related Questions