Vijay S Vijay S - 2 months ago 19
CSS Question

Slide the Owl Carousel Controls

I am using owl carousel slider in my site.

In the slider have more controls (see the image selected in black color).

enter image description here


CODE :


$("#owl-demo-2").owlCarousel({
navigation : false,
slideSpeed : 300,
paginationSpeed : 400,
singleItem : true,
pagination : true,
items : 1,
afterMove:function(){
var length = this.owl.owlItems.length;
var current_item = this.owl.currentItem;
/*- need to work here -*/
},
afterInit:function(){
var length = this.owl.owlItems.length;
var current_item = this.owl.currentItem;
for(var i = 5; i < length; i++ ) {
$("#owl-demo-2 .owl-controls .owl-pagination .owl-page:eq("+ i +")").css('display', 'none');
}
}
});


<div id="owl-demo-2" class="owl-carousel">
<div class="item"><img src="img/product-img-1.jpg"></div>
<div class="item"><img src="img/product-img-1.jpg"></div>
<div class="item"><img src="img/product-img-1.jpg"></div>
<div class="item"><img src="img/product-img-1.jpg"></div>
<div class="item"><img src="img/product-img-1.jpg"></div>
<div class="item"><img src="img/product-img-1.jpg"></div>
<div class="item"><img src="img/product-img-1.jpg"></div>
<div class="item"><img src="img/product-img-1.jpg"></div>
<div class="item"><img src="img/product-img-1.jpg"></div>
<div class="item"><img src="img/product-img-1.jpg"></div>
</div>


I need to show only 5 controls in the slider (include active slider) and the another controls need to show the slider format.

How I achieve this, help me.

Thanks

Answer

Try Below Code :-

        afterMove:function(elem){
            var length = len = this.owl.owlItems.length;
            var current_owl_id = "owl-demo";
            if(length > 5) {
                var current_item_position = this.owl.currentItem;
                var current_item = 1 + current_item_position;
                var slide_row = Math.ceil(current_item/4);
                var slide_row_start = ((slide_row * 4) - 4);
                if( slide_row_start == current_item_position) {
                    var before_position = current_item_position - 1;
                    var val = check_before_postion_css(current_owl_id, before_position);
                    if( val == "none") {
                        slide_row = slide_row - 1;
                    }
                }
                var slide_row_start = ((slide_row * 4) - 4);
                if( current_item != length) {
                    slide_row_start = (slide_row_start <= 0) ? 0 :slide_row_start;
                    scroll_slide(current_owl_id, slide_row_start, 5, length);
                }
            }

        }

Also add these functions in top and change the id name:

function scroll_slide(id, start, end, length) {
    $("#"+id +" .owl-controls .owl-pagination .owl-page").css('display', 'none');
    for(var i = 0; i < end; i++ ) {
        $("#"+id +" .owl-controls .owl-pagination .owl-page:eq("+ start +")").css('display', 'inline-block');
        start++;
    }
}
function check_before_postion_css(id, position) {
    return $("#"+id +" .owl-controls .owl-pagination .owl-page:eq("+ position +")").css('display');
}
Comments