Owl Carousel with Bootstrap 4 -Image Slider

Swastik Tech 0 Comments



Image sliders (also known as image carousels or slideshows) can be a convenient way to display multiple images, videos, or graphics on your website. The thought of big, beautiful, flashy image shows can be quite alluring. Compelling images can draw new visitors into your site, capturing their attention immediately


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css" integrity="sha256-qvCL5q5O0hEpOm1CgOLQUuHzMusAZqDcAZL9ijqfOdI=" crossorigin="anonymous" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css" integrity="sha256-nXBV7Gr2lU0t+AwKsnS05DYtzZ81oYTXS6kj7LBQHfM=" crossorigin="anonymous" />
    <title>Banner</title>
</head>
<body>
    <div class="container">
        <div class="owl-carousel owl-theme">
            <div class="item"> 
            <img src="./image/BakeryandConfectioneries.png" alt="">    
            </div>
            <div class="item"> 
                <img src="./image/beverages.png" alt="">    
            </div>
            <div class="item"> 
                <img src="./image/Dairy.png" alt="">    
            </div>
            <div class="item"> 
                <img src="./image/FruitsandVeggies.png" alt="">    
            </div>
        </div>   
    </div>
    
       
      
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.js" integrity="sha256-251s88HEsEfGL2RufZmRwGohKTHDYr9T+aJAazDwlGY=" crossorigin="anonymous"></script>
<script>
    $(document).ready(function(){
  $(".owl-carousel").owlCarousel({
      items:1
  });
});
</script>
</body>
</html>




Tags

Post a Comment

Post a Comment

Previous Post Next Post