Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Customised Navigation in Owl Carousel

    • 0
    • 1
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 1.88k
    Comment on it

    Hey there!

    Carousels are one thing that attract a user's attention. On the same hand, they make the web page visually richer. Owl carousels are most widely and easy to use. Moreover, they are responsive. They do not need a customised CSS for that.

    Owl carousel have a 'bulleted' navigation by default. We may want to customise this. Some might want an icon in its place, or simply 'Previous' and 'Next'.

    The default navigation is shown below :

    The no. of bullets increases as the screen size decreases.

    Here, I will disable the default navigation.

    A new class is added customNavigation. I am replacing the bullets with left and right icons. Style them with just standard CSS and place them accordingly.

     

    HTML :

    <div class="customNavigation">
        <a class="btn prev"><i class="fa fa-angle-left" aria-hidden="true"></i></a>
        <a class="btn next"><i class="fa fa-angle-right" aria-hidden="true"></i></a>
    </div>
    
    <div class="row">
        <div id="owl" class="owl-carousel">
            <div class="owl-item"><img src="images/092.png" class="img-responsive"></div>
            <div class="owl-item"><img src="images/082.png" class="img-responsive"></div>
            <div class="owl-item"><img src="images/072.png" class="img-responsive"></div>
            <div class="owl-item"><img src="images/062.png" class="img-responsive"></div>
            <div class="owl-item"><img src="images/052.png" class="img-responsive"></div>
            <div class="owl-item"><img src="images/042.png" class="img-responsive"></div>
            <div class="owl-item"><img src="images/032.png" class="img-responsive"></div>
            <div class="owl-item"><img src="images/022.png" class="img-responsive"></div>
            <div class="owl-item"><img src="images/012.png" class="img-responsive"></div>
        </div>
    </div>

     

    CSS :

    .owl-pagination{
            display: none;
    }
    
    .customNavigation a{
    	color: #fff;
    }
    
    .customNavigation .btn{
    	border-radius: 0;
    	background-color: #7B797A;
    	font-size: 13px;
    	padding: 0 6px;
    }
    
    .owl-carousel .owl-item img{
    	margin: 0 auto;
    }
    

     

    Javascript :

    $(document).ready(function() {
         
          $("#owl").owlCarousel({
         
              autoPlay: 3000, //Set AutoPlay to 3 seconds
         
              items : 5,
              itemsDesktop : [1199,3],
              itemsDesktopSmall : [979,1]
         
          });
    
            var owl = $("#owl");
            owl.owlCarousel();
    
          //Custom Navigation Events
              $(".next").click(function(){
                owl.trigger('owl.next');
              })
              $(".prev").click(function(){
                owl.trigger('owl.prev');
              })
         
        });

     

    OUTPUT :

     

    Keep Coding!

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: