Reputation: 73

Automatic Vertical image slider

I need help to create a vertical image slider which slides the image automatically with interval.

HTML:

<div id="myCarousel" class="carousel slide">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item">
<img src="img/1.jpg" />
</div>
<div class="item">
<img src="img/2.jpg" />
</div>
<div class="item">
<img src="img/3.jpg" />
</div>
<div class="item">
<img src="img/4.jpg" />
</div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div>

Javascript:

<script type="text/javascript">
$(document).ready(function () {
$('.carousel').carousel({ interval: 3000 });
});
</script>

I need the same thing vertically.

Upvotes: 0

Answers (4)

interesting-name-here

Reputation: 1890

Here is a sample of how to use CSS3 and HTML5 to get the effect of a vertical slider.

https://jsfiddle.net/cd3oezzj/

Uses @keyframes rule. @-webkit-keyframes may be required for some browsers.

Upvotes: 1

shakil

Reputation: 1

just put this below:

<script src= "http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src= "js/bootstrap.js"></script>
 <script type="text/javascript">
     var $ = jQuery.noConflict();
     $(document).ready(function() { 
     $('#myCarousel').carousel({ interval: 2000, cycle: true });
     }); 
</script>

plz maimtain the sequence as i maintain...

Upvotes: 0