Как отцентрировать изображения Owl Carousel?

#javascript #html #jquery #slider #карусель

Есть карусель с изображениями различного размера. Как их отцентрировать внутри карусели?
У меня не получается... 

UPD. Отцентрировать и по вертикали, и по горизонтали.

http://jsfiddle.net/8bJUc/524/



$(document).ready(function() {
  $("#owl-demo").owlCarousel({
    navigation: true,
    pagination: true,
    lazyLoad: true
  });
});
@import url('//cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.css');
@import url('//cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.css');

#owl-demo .owl-item > div {
  padding: 0px 2px;
  display: table;
}
#owl-demo .owl-item > div img {
  display: block;
  width: 100%;
  display: table-cell;
  vertical-align: middle;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  margin-bottom: 4px;
}

  

    
  
  

    
  
  

    
  
  

    
  
  

    
  
  

    
  
  

    
  







    

Ответы

Ответ 1

Owl Carousel создаёт дополнительные блоки внутри вашей вёрстки. Поэтому, чтобы правильно
добавить CSS
свойства, надо работать вот с такой структурой:


  

    

      

        

          
        
      
      

        

          
        
      
    
  



То есть, таблицей делаем .owl-wrapper, а ячейками — .owl-item.
И на все элементы карусель навешивает атрибут style. Например, у блока с классом
.owl-wrapper там прописывается display: block;. Поэтому в своих стилях приходится добавить
!important.
Чтобы сработало вертикальное центрирование по ячейкам таблицы, нужно перебить им
свойство float.
Ну а для горизонтального центрирования достаточно text-align: center;.


Приятно, что в этом решении высота карусели не скачет, когда самая высокая картинка
уезжает за пределы экрана. Проверьте результат:

http://jsfiddle.net/glebkema/yqfwzkL0/



$(document).ready(function() {
  $("#owl-demo").owlCarousel({
    navigation: true,
    pagination: true,
    lazyLoad: true
  });
});
@import url('//cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.css');
@import url('//cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.css');

#owl-demo .owl-wrapper {
  display: table !important;
  margin-bottom: 4px;
  padding: 0px 2px;
}
#owl-demo .owl-item {
  display: table-cell;
  float: none;
  vertical-align: middle;
}
#owl-demo .owl-item > div {
  text-align: center;
}
#owl-demo .owl-item img {
  -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
          border-radius: 3px;
}

  

    
  
  

    
  
  

    
  
  

    
  
  

    
  
  

    
  
  

    
  






Ответ 2

http://owlgraphic.com/owlcarousel/demos/autoHeight.html
Попробуй так 

свои стили что сейчас можешь убрать а использовать только 

#owl-demo .owl-item img{
   display: block;
   width: auto;
   margin: 0 auto;
}

Изменить высоту карусели Bootstrap

#javascript #html #css #bootstrap #карусель

Скажите пожалуйста, как изменить высоту карусели Bootstrap? Чтобы весь контент сохранялся,
а в идеале и пропорции изображения.
    

Ответы

Ответ 1

Растянуть изображения на всю ширину страницы

.carousel-inner img {
  height: auto;
  width: 100%;
}




@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

.carousel-inner img {
  height: auto;
  width: 100%;
}

  
  

    

    

    

  

  
  

    

      
      

        
Первый слайд
      
    
    

      
      

        
Второй слайд
      
    
    

      
      

        
Третий слайд
      
    
  

  
  
    
    Previous
  
  
    
    Next
  









Задать карусели определённую высоту

Высота .carousel-inner img задаёт высоту изображений, а высота .carousel - высоту
всей карусели. 

Изображение сидят внутри карусели как в матрёшке. Карусель может быть больше своих
изображений, но если увеличить изображения, они растянут и карусель. А если уменьшить
карусель, она сожмёт изображения внутри себя.

От высоты карусели зависит размер боковых панелей, на которые нажимают, чтобы перейти
к соседнему слайду.

И индикаторы по умолчанию стоят у нижней границы карусели. Если карусель выше изображений,
то индикаторы выходят за пределы изображений и встают под ними. Такие индикаторы нужно
перекрасить с учётом фона страницы.

.carousel {
  height: 500px !important;
}
.carousel-inner img {
  height: 400px !important;
  margin: 0 auto;
}
.carousel-indicators li {
  border-color: #000;
}
.carousel-indicators .active {
  background-color: #000;
}




@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

.carousel {
  height: 500px !important;
}
.carousel-inner img {
  height: 400px !important;
  margin: 0 auto;
}
.carousel-indicators li {
  border-color: #000;
}
.carousel-indicators .active {
  background-color: #000;
}

  
  

    

    

    

  

  
  

    

      
      

        
Первый слайд
      
    
    

      
      

        
Второй слайд
      
    
    

      
      

        
Третий слайд
      
    
  

  
  
    
    Previous
  
  
    
    Next
  









То и другое одновременно

Отменяем ограничение на max-width и используем min-width: 100%; вместо width: 100%;,
чтобы слишком широкие изображения выходили за края экрана и сохраняли свои пропорции.

Чтобы отцентрировать изображения, края которых выходят за границы экрана, нуженposition:
absolute; left: 50%; transform: translateХ(-50%); вместо margin: 0 auto;.

Точно так же позволяем изображениям выходить за верхний и нижний края карусели. Задаём
им минимальную высоту и центрируем их по вертикали.

https://jsfiddle.net/glebkema/601g6n69/



@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

.carousel {
  height: 400px !important;
  overflow: hidden;
}
.carousel-inner {
  overflow: visible;
}
.carousel-inner img {
  left: 50%;
  max-width: none !important;
  min-height: 400px;
  min-width: 100%;
  position: absolute;
  top: 200px;
  transform: translate(-50%,-50%);
}

  
  

    

    

    

  

  
  

    

      
      

        
Первый слайд
      
    
    

      
      

        
Второй слайд
      
    
    

      
      

        
Третий слайд
      
    
  

  
  
    
    Previous
  
  
    
    Next
  

Как к карусели прикрутить дополнительные переключатели элементов?

Есть owl carousel, в которой используется свойство stagePadding для видимости кусочков элементов. Как сделать так, чтобы помимо переключателей next|prev, карусель переключалась также при клике на выступы элементов справа и слева соответственно? переходите по фидлу - поймете
$('.owl-carousel').owlCarousel({ stagePadding: 100, loop: true, margin: 10, nav: true, autoplay: true, autoplayTimeout: 2000, autoplayHoverPause: true, responsive: { 0: { items: 1 }, 470: { items: 3 }, 768: { items: 4 }, 1199: { items: 5 } } }); $('.owl-carousel').find('.owl-item.active').prev(':not(.active)').css('background-color', 'red'); $('.owl-carousel').find('.owl-item.active').next(':not(.active)').css('background-color', 'red'); .owl-carousel .item { height: 10rem; background: #4DC7A0; padding: 1rem; }

1

2

3

4

5

6

7

8

9

10

11

12

Ответ

Согласно документации нужно добавить кнопки по такому принципу:
// Go to the next item $('.customNextBtn').click(function() { owl.trigger('next.owl.carousel'); }) // Go to the previous item $('.customPrevBtn').click(function() { // With optional speed parameter // Parameters has to be in square bracket '[]' owl.trigger('prev.owl.carousel', [300]); })
Итоговое решение - здесь

Как отцентрировать изображения Owl Carousel?

Есть карусель с изображениями различного размера. Как их отцентрировать внутри карусели? У меня не получается...
UPD. Отцентрировать и по вертикали, и по горизонтали.
http://jsfiddle.net/8bJUc/524/
$(document).ready(function() { $("#owl-demo").owlCarousel({ navigation: true, pagination: true, lazyLoad: true }); }); @import url('//cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.css'); @import url('//cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.css'); #owl-demo .owl-item > div { padding: 0px 2px; display: table; } #owl-demo .owl-item > div img { display: block; width: 100%; display: table-cell; vertical-align: middle; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; margin-bottom: 4px; }

Ответ

Owl Carousel создаёт дополнительные блоки внутри вашей вёрстки. Поэтому, чтобы правильно добавить CSS свойства, надо работать вот с такой структурой:

То есть, таблицей делаем .owl-wrapper, а ячейками — .owl-item И на все элементы карусель навешивает атрибут style. Например, у блока с классом .owl-wrapper там прописывается display: block;. Поэтому в своих стилях приходится добавить !important Чтобы сработало вертикальное центрирование по ячейкам таблицы, нужно перебить им свойство float Ну а для горизонтального центрирования достаточно text-align: center;
Приятно, что в этом решении высота карусели не скачет, когда самая высокая картинка уезжает за пределы экрана. Проверьте результат:
http://jsfiddle.net/glebkema/yqfwzkL0/
$(document).ready(function() { $("#owl-demo").owlCarousel({ navigation: true, pagination: true, lazyLoad: true }); }); @import url('//cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.css'); @import url('//cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.css'); #owl-demo .owl-wrapper { display: table !important; margin-bottom: 4px; padding: 0px 2px; } #owl-demo .owl-item { display: table-cell; float: none; vertical-align: middle; } #owl-demo .owl-item > div { text-align: center; } #owl-demo .owl-item img { -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }