CODEWITHSUNDEEP
javascriptc#jqueryowl-carousel
Mykremin
Mykremin

Reputation: 23

Owl carousel : How to put navigation on image and not under?

I have a owl caroussel in my C# code. How can I place the nav buttons inside my img, like center and not under my image.

Upvotes: 1

Views: 1408

Answers (2)

Radhesh Vayeda
Radhesh Vayeda

Reputation: 901

Initialize the owl carousel in following method

$(document).ready(function(){
        $('.owl-carousel').owlCarousel({
            margin:10,
            responsiveClass:true,
            autoHeight:true,
            items:1,
            autoplay:true,
            autoplayTimeout:10000,
            autoplayHoverPause:true,
            nav : true,
            dots: true, //Make this true
            navText : ["<i class='fa fa-chevron-left'></i>","<i class='fa fa-chevron-right'></i>"]
        })
    });

Add CSS of the owl carousel control as following.(Change it accordingly)

.owl-controls {
position: relative;
top: -40px;
}

P.S. : If this is not your query or I might have not understood the query properly please comment it back.

EDITS

For previous button

.owl-prev {
    position: absolute;
    top: 30%;
    left: -50px;
}

For next button

.owl-next {
    position: absolute;
    right: -50px;
    top: 30%;
}

Upvotes: 2

Mykremin
Mykremin

Reputation: 23

  $(document).ready(function(){
        $('.owl-carousel').owlCarousel({
            margin:10,
            responsiveClass:true,
            autoHeight:true,
            items:1,
            autoplay:true,
            autoplayTimeout:10000,
            autoplayHoverPause:true,
            nav : true,
            dots: false,
            navText : ["<i class='fa fa-chevron-left'></i>","<i class='fa fa-chevron-right'></i>"]
        })
    });

the navigation buttons appear under my slide with images. I want the buttons to be inside my image

Upvotes: 0

Related Questions