Owl Carousel, making custom navigation

Posted On: November 1, 2018

Hello guys,

As you know we provide solution scripts to make your development and career easy. We just want a support from you side, please share our website as you can share. If you find any knowledgeable topic which you are looking at here and really help those topics to you.

Also subscribe us to get in touch with us to get more topics/question & answers/articles. Now today here we are going to let you how can you change the owl Carousel slider structure. Here we will mainly go through the “making custom navigation” topic. If you are looking to add some custom html into owl navigation and made custom navigation than you can use below codes.

First you need to define the owl Carousel and use $ or jquery which allows your web structure:

$(function(){
var owlS = $('.silider');
owlS.owlCarousel({
	loop:false,
    margin:0,
    nav:true,
	dots: false,	
    responsive:{
        0:{
            items:1
        }
    }
 });

Now if you want to shift the navigation on left hand side of slider with the name “offers 1 of 3” use the below code for prev link (previous anchor tag):

$(".owl-prev").click(function(e){
	
	var totalcars=1;
	$('.prosilider .owl-item').each(function(e){
		 totalcars = totalcars + e;
	}); 
	 //alert($totalcars);
	
    var active = owlS.find(".owl-item.active");
	var acrivechid = active.children(".item").attr("class");
	var valNew=acrivechid.split('-');
    var requesteddesb = valNew[1];
	var newwithhtml = '<div class="offernumber">Offer '+requesteddesb+' of '+totalcars+'</div>';
	$(".offernumber").remove();
	$(".owl-prev").after(newwithhtml);

  });

And below for next link (forward anchor tag):

  $(".owl-next").click(function(e){
	
	var totalcars=1;
	$('.prosilider .owl-item').each(function(e){
		 totalcars = totalcars + e;
	}); 
	 //alert($totalcars);
	
    var active = owlS.find(".owl-item.active");
	var acrivechid = active.children(".item").attr("class");
	var valNew=acrivechid.split('-');
    var requesteddesb = valNew[1];
	var newwithhtml = '<div class="offernumber">Offer '+requesteddesb+' of '+totalcars+'</div>';
	$(".offernumber").remove();
	$(".owl-prev").after(newwithhtml);
	
	
  });

Hope this tutorial will help you, so guys please share and like our tutorial. To get more notification, subscribe us.

Also Read :   Web Development

Related Post

Subscribe to our newsletter
Subscribe to our newsletter today to receive updates on the latest news, and offers!
webe tutorial
Menu