Блог

Главная - Вопросы по программированию - Добавление пространства между элементами в карусели совы

Добавление пространства между элементами в карусели совы

#javascript #html #jquery #css #owl-carousel

Вопрос:

Как добавить пространство между элементами в карусели совы? Я пробовал использовать stagePadding , но это добавляет пространство слева от первого элемента. Маржа тоже не работает. Вы не могли бы мне помочь?

HTML

 $(document).ready(function() {
  $("#owl-demo").owlCarousel({
  navigation : true
  });
}); 
 #owl-demo .item{
  padding: 30px 0px;
  margin: 10px;
  border-radius: 3px;
} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

<div id="owl-demo" class="owl-carousel owl-theme">
  <div class = "item"><iframe width="560" height="315" src="https://www.youtube.com/embed/WZwr2a_lFWY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
  <div class = "item"><iframe width="560" height="315" src="https://www.youtube.com/embed/dLymsYC7Kmo" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
  <div class = "item"><iframe width="560" height="315" src="https://www.youtube.com/embed/M46FRJsB0Qw" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
  <div class = "item"><iframe width="560" height="315" src="https://www.youtube.com/embed/6eEZ7DJMzuk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
  <div class = "item"><iframe width="560" height="315" src="https://www.youtube.com/embed/nRYCLOTRAK4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
  <div class = "item"><iframe width="560" height="315" src="https://www.youtube.com/embed/eDEFolvLn0A" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
  <div class = "item"><iframe width="560" height="315" src="https://www.youtube.com/embed/nnVjsos40qk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
  <div class = "item"><iframe width="560" height="315" src="https://www.youtube.com/embed/QqsvrV1_XEA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
  <div class = "item"><iframe width="560" height="315" src="https://www.youtube.com/embed/G8GaQdW2wHc" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
  <div class = "item"><iframe width="560" height="315" src="https://www.youtube.com/embed/0nPlIi685DU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
                    
</div>

Ответ №1:

Просто добавьте в код: autoWidth:true

     $(document).ready(function() {
     
      $("#owl-demo").owlCarousel({
        navigation : true,
        autoWidth:true,
      });
     
    });

https://jsfiddle.net/pohnvm01/

Комментарии:

1. Спасибо!! Это сработало, однако справа от последнего элемента в карусели совы есть дополнительное место. Как мне это исправить?

2. Может быть, добавить цикл:true

Ответ №2:

Это должно сработать. Смотрите мой jsfiddle: https://jsfiddle.net/bogatyr77/1v9x0g63/3/

 <script type = "text/javascript">
        $(document).ready(function() {
         
          $("#owl-demo").owlCarousel({
            navigation : true,
            margin: 10 // for example

          });
         
        });
    </script>

Комментарии:

1. Я попробовал это с запасом, но это не сработало 🙁

Метки: