bootstrap tutorial: Responsive Vertical Image Slider Bootstrap

create index.html

<!DOCTYPE html>
<html lang="en">
<head>
<title>Responsive Vertical Image Slider Bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript">
$('.carousel').carousel({
  interval: 3000
})
</script>
<style>
body {
 background:#333;
}
.main-wrapper {
 background:#000;
 padding:20px;
 margin:auto;
}
/*for slider css*/
.vertical .carousel-inner {
 height: 100%;
}
.carousel.vertical .item {
 -webkit-transition: 0.6s ease-in-out top;
 -moz-transition: 0.6s ease-in-out top;
 -ms-transition: 0.6s ease-in-out top;
 -o-transition: 0.6s ease-in-out top;
 transition: 0.6s ease-in-out top;
}
.carousel.vertical .active {
 top: 0;
}
.carousel.vertical .next {
 top: 400px;
}
.carousel.vertical .prev {
 top: -400px;
}
.carousel.vertical .next.left, .carousel.vertical .prev.right {
 top: 0;
}
.carousel.vertical .active.left {
 top: -400px;
}
.carousel.vertical .active.right {
 top: 400px;
}
.carousel.vertical .item {
 left: 0;
}
.carousel-inner > .item > img, .carousel-inner > .item > a > img {
 width: 70%;
 margin: auto;
}
.carousel-control.right {
 background-image:none!important;
 background-repeat: repeat-x;
 left: auto;
 right: 0;
}
.carousel-control {
 bottom: 0;
 color: #fff;
 font-size: 143px!important;
 left: 0;
 opacity: 0.5;
 position: absolute;
 text-align: center;
 text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
 top: 339px!important;
 width: 78%;
}
.carousel-control.left {
 background-image: none;
 background-repeat: repeat-x;
}
/*Responsive code here*/

@media screen and (min-device-width: 320px) and (max-device-width: 768px) {
.carousel-control {
 bottom: 0;
 color: #00CC00;
 font-size: 44px !important;
 left: 0;
 opacity: 0.5;
 position: absolute;
 text-align: center;
 text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
 top: 65px !important;
 width: 78%;
}
}
</style>
</head>
<body>
<h2 style="color:#0099FF;text-align:center">Responsive Vertical Image Slider Bootstrap</h2>
<div class="main-wrapper">
  <div class="container"> </div>
  <div class="container">
    <div class="row-fluid">
      <div class="span6 offset3">
        <div id="myCarousel" class="carousel slide vertical">
          
          <div class="carousel-inner">
            <div class="active item"> <img src="http://www.curdweb.com/wp-content/uploads/2014/08/templatemo_header_2-1024x512.jpg"> </div>
            <div class="item"> <img src="http://www.curdweb.com/wp-content/uploads/2014/08/templatemo_header_1-1024x512.jpg"> </div>
            <div class="item"> <img src="http://www.curdweb.com/wp-content/uploads/2014/12/jquery-plugins-1024x512.jpg"> </div>
          </div>
          
          <a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a> <a class="carousel-control right" href="#myCarousel" data-slide="next">›</a> </div>
      </div>
    </div>
  </div>
</div>

</body>
</html>

Monday, 13 July 2015

Responsive Vertical Image Slider Bootstrap

create index.html

No comments:

Post a Comment