Как положить стрелки в Сова Карусель? - PullRequest
Новая
       18

Как положить стрелки в Сова Карусель?

0 голосов
/ 24 августа 2018

Есть ли способ поместить навигационные стрелки в совую карусель с помощью js или html + css? Это работает правильно, но я думаю, что это не так хорошо, вы должны перетаскивать изображение для навигации, поэтому стрелка решит эту проблему для меня. Я нашел некоторые ответы через Интернет, но ни один из них не работает для меня, когда я что-то изменяю на js, карусель перестает работать. 

 <div class="owl-carousel owl-theme" >
<div class="item itemmb">

    <img class="img-fluid img-card" src="Imagens/dent.jpg">
    <h4 class="h4 text-center my-3"> Test </h4>
     <h4 class="p text-center my-3 sb-m saiba-mais"> Test </h4>

 </div>



  <div class="item">

    <img class="img-fluid img-card" src="Imagens/ped.jpg">
     <h4 class="h4 text-center my-3"> Test </h4>
     <h4 class="h4 text-center my-3 sb-m saiba-mais"> Test </h4>
 </div>
                 <div class="item">

    <img class="img-fluid img-card" src="Imagens/ped.jpg">
     <h4 class="h4 text-center my-3"> Test </h4>
     <h4 class="h4 text-center my-3 sb-m saiba-mais"> Test </h4>
 </div>


     <script type="text/javascript">
   $('.owl-carousel').owlCarousel({
loop:true,
navigation: true,
margin:20,
nav:true,
responsive:

       {
    0:{
        items:1
    },
    600:{
        items:3
    },
    1000:{
        items:5
    }
}

}) 

   </script>

enter image description here

1 Ответ

0 голосов
/ 24 августа 2018

Это из-за отзывчивой инициализации. Если вам не хватает items, стрелка или точки не будут отображаться 

$('.owl-carousel').owlCarousel({
  loop: true,
  margin: 20,
  nav: true,
  responsive:

  {
    0: {
      items: 1
    },
    600: {
      items: 1
    },
    1000: {
      items: 1
    }
  }
})
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.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=" itemmb">

    <img class="img-fluid img-card" src="http://www.windmillsonline.co.uk/wp-content/uploads/2013/03/img-banner-thefoundation.jpg">
    <h4 class="h4 text-center my-3"> Test </h4>
    <h4 class="p text-center my-3 sb-m saiba-mais"> Test </h4>

  </div>



  <div class="">

    <img class="img-fluid img-card" src="http://www.windmillsonline.co.uk/wp-content/uploads/2013/03/img-banner-thefoundation.jpg">
    <h4 class="h4 text-center my-3"> Test </h4>
    <h4 class="h4 text-center my-3 sb-m saiba-mais"> Test </h4>
  </div>
  <div class="">

    <img class="img-fluid img-card" src="http://www.windmillsonline.co.uk/wp-content/uploads/2013/03/img-banner-thefoundation.jpg">
    <h4 class="h4 text-center my-3"> Test </h4>
    <h4 class="h4 text-center my-3 sb-m saiba-mais"> Test </h4>
  </div>

</div>
...