По центру совы карусели - PullRequest
Новая
       12

По центру совы карусели

0 голосов
/ 20 апреля 2020

Как я могу выровнять элементы совы по центру экрана?

Попробовал: center: true

Пожалуйста, см. На странице в полном объеме: 

var owl = $('.video-thumb').owlCarousel({
  items: 7,
  autoplay: false,
  loop: false,
  nav: true,
  dots: false,
  margin: 30,
  center: true,
  responsive: {
    0: {
      items: 1
    },
    640: {
      items: 2
    },
    768: {
      items: 3
    },
    992: {
      items: 4
    },
    1200: {
      items: 5
    },
    1600: {
      items: 7
    }
  }
});
<link href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet"/>
<link href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css" rel="stylesheet"/>
<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/vendors/jquery.min.js"></script>
<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script>
<div class="video-thumb owl-carousel owl-theme">
  <div class="thumb-item">
    <a href="#"><img src="https://via.placeholder.com/150" alt="eMAM Cloud" /></a>
  </div>
  <div class="thumb-item">
    <a href="#"><img src="https://via.placeholder.com/150" alt="eMAM Cloud" /></a>
  </div>
</div>

Может содержать любое количество элементов.

JSFiddle

Ответы [ 2 ]

1 голос
/ 20 апреля 2020

добавить это к вашему css: 

.owl-carousel{
    display: flex !important;  // to override display:bloc i added !important
    flex-direction: row;   
    justify-content: center;  // to center you carousel
}

JSFiddle: https://jsfiddle.net/2z1qadv3/

1 голос
/ 20 апреля 2020

Карусель - это полная ширина страницы, поэтому она уже отцентрирована. Если вы хотите, чтобы он был меньше полной ширины, вы можете добавить стиль width к .owl-carousel и поместить все это во flexbox с помощью justify-content:center.

https://jsfiddle.net/o0yk9rbh/6/

...