jQuery Slider with Vertical Carousel

Create a file name as index.html. Copy and paste the code in created html file. then preview the file.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Vertical Slider By Avi</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  
  <style>
  	body{
  }
.img1 { 
  width: 100%;
  height: auto;
  opacity: 0.3;
}
  .center123 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 18px;
}
.btn-vertical-slider{ margin-left:35px; cursor:pointer;}
a {  cursor:pointer;}
.carousel.vertical .carousel-inner .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: 100%;
}

.carousel.vertical .prev {
  top: -100%;
}

.carousel.vertical .next.left,
.carousel.vertical .prev.right {
  top: 0;
}

.carousel.vertical .active.left {
  top: -100%;
}

.carousel.vertical .active.right {
  top: 100%;
}

.carousel.vertical .item {
    left: 0;
}
.avinash{    background: #0e0e0e;
    padding: 20px;
    text-align: center;
    width: 100%;
    color: #fff;
    font-family: monospace;}
  </style>

</head>
<body>

<img class="img-responsive" src="https://cdn.pixabay.com/photo/2020/05/07/09/33/flaming-5140842_960_720.jpg" alt="Chania">
                           
                        </div>
                        <div class="col-xs-12 col-sm-12 col-md-12">
                            <div class="avinash">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when</div>
                        </div>
                    </div>
                    
                </div>
                
                <div class="item ">
                    <div class="row">
                        <div class="col-xs-12 col-sm-12 col-md-12">
                        	<img class="img-responsive" src="https://cdn.pixabay.com/photo/2020/05/11/20/24/girl-5160131_960_720.jpg" alt="Chania">

</div>
                        <div class="col-xs-12 col-sm-12 col-md-12">
                            <div class="avinash">an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries,</div>
                        </div>
                    </div>
                    
                </div>
                
                <div class="item ">
                    <div class="row">
                      <div class="col-xs-12 col-sm-12 col-md-12">

<img class="img-responsive" src="https://cdn.pixabay.com/photo/2020/05/07/20/03/church-5143005_960_720.jpg" alt="Chania">
                        
                        </div>
                        <div class="col-xs-12 col-sm-12 col-md-12">
                            <div class="avinash">It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
                        </div>
                    </div>
                    
                </div>
                
            </div>
            <div class="row" style="text-align: center;">
                <div class="col-md-12">
                    <span data-slide="prev" class="btn-vertical-slider glyphicon glyphicon-circle-arrow-down"
                        style="color: #333; font-size: 30px"></span>
                </div>
                
            </div>
        </div>
</div>
</div>
</div>

$('.btn-vertical-slider').on('click', function () {
        
        if ($(this).attr('data-slide') == 'next') {
            $('#myCarousel').carousel('next');
        }
        if ($(this).attr('data-slide') == 'prev') {
            $('#myCarousel').carousel('prev')
        }

});
});
</script>

</body>

</html>

OUTPUT

Vertical Slider By Avi

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when

an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries,

It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Search This Blog

Web Development Hub

jQuery Slider with Vertical Carousel

OUTPUT

Comments

Post a Comment

Popular posts from this blog

Image gallery filter using JavaScript

Swipe To Slide / Draggable slider using Jquery