How to change owl-nav's position on the Owl.Carousel

Navigation
1

I'm using the Owl.Carousel and I'm breaking my head with the positioning of the NAV arrows, I need instead of being below the articles it stays up.

    
asked by anonymous 11.09.2018 / 08:15

1 answer

1

You can create a small CSS, two lines only, to correct this.

You first display the flex in the container , and then you line the div in a reverse column with flex-direction: column-reverse !important; So the order of the elements is "inverted" starting from bottom up, in this way first you see the balls, then the arrows and then the images.

See how it looks in the example. (if you do not want the balls I left the commented CSS 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><scriptsrc="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>
    
11.09.2018 / 12:38
Move Scroll with Buttons How to use auto-reload (browserSync) on the ionic server when in a Docker container?