How to change the position of Owl-Nav in Owl.Carousel

Asked

Viewed 691 times

1

I’m using Owl.Carousel and I’m breaking my head with the positioning of the NAV arrows, I need that instead of being below the articles it stay above.

inserir a descrição da imagem aqui

javascript html css css3 owl-carousel

  • Or how to make buttons created in some corner of the page move like Nav.

1 answer

1


Cara vc can create a small CSS, two lines only, to fix this.

First vc of flex display on container, and then line up the div in a reverse column with flex-direction: column-reverse !important; So the order of the elements is "inverted" starting from bottom to top, so first they see the balls, then arrows and then the images.

See how it looks in the example. (if you don’t want the balls I left the CSS commented below)

$('.owl-carousel').owlCarousel({
    loop:true,
    margin:10,
    nav:true,
    responsive:{
        0:{
            items:1
        },
        600:{
            items:3
        },
        1000:{
            items:5
        }
    }
})
.owl-carousel {
    display: flex !important;
    flex-direction: column-reverse !important;
}

/* se não quiser as bolinhas descomente o css abaixo */
/* .owl-dots {
display: none;
} */
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" />
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>


<div class="owl-carousel owl-theme">
    <div class="item"><h4>1</h4></div>
    <div class="item"><h4>2</h4></div>
    <div class="item"><h4>3</h4></div>
    <div class="item"><h4>4</h4></div>
    <div class="item"><h4>5</h4></div>
    <div class="item"><h4>6</h4></div>
    <div class="item"><h4>7</h4></div>
    <div class="item"><h4>8</h4></div>
    <div class="item"><h4>9</h4></div>
    <div class="item"><h4>10</h4></div>
    <div class="item"><h4>11</h4></div>
    <div class="item"><h4>12</h4></div>
</div>

  • It is possible to put buttons on a div, and put the NAV command on my buttons?

  • 1

    @Arthur74 is possible yes! I will just ask you to open a New Question, because the explanation is a little complex and I will need to give you some details etc. Editing this question that has already been answered and putting this information would only confuse things. So let’s keep things separate beauty, create the question there and tell me I’ll give you the details you’ll need.

  • https://answall.com/questions/329179/atribuir-comando-do-nav-em-botões-owl-carousel

Browser other questions tagged javascript html css css3 owl-carousel

You are not signed in. Login or sign up in order to post.