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.

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.

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Dec 15, 2012 at 21:25 JSW189 6,3331212 gold badges4646 silver badges7373 bronze badges asked Dec 15, 2012 at 10:55 KowshikKowshik 7311 gold badge22 silver badges99 bronze badges 4

• You can see the other carousals for hint which save a lot of time and queries here. – w3uiguru Commented Dec 15, 2012 at 11:09
• It is a horizontal one. I used the twitter bootstrap carousel. Its for horizontal only. But is it possible to make it vertical here in jquery?.. – Kowshik Commented Dec 15, 2012 at 11:12
• 1 In jquery everything is possible but we have to code for that which is not easy here bro. – w3uiguru Commented Dec 15, 2012 at 11:14
• You can also use CSS3 for this using the @keyframes rule. – interesting-name-here Commented May 4, 2016 at 12:42

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 1

I would suggest you to use jCarousel or bxslider. Take a look at this and this for vertical-scroll example pf jCarousel and this for bxslider example

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

https://jsfiddle/cd3oezzj/

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

You can use

$(window).scrollTop()

just put this below:

<script src= "http://ajax.googleapis./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...