, поэтому я пытаюсь использовать Owl Carousel без фиксированной ширины, потому что мне нужен отзывчивый сайт Wordpress без фиксированных изображений или ширины, иначе он разбивает мои мобильные взгляды.Сова Карусель Нет Фиксированная ширина

Я попытался раскомментировать строки в owlcarousel.js где _width и _widths установлены, и что-то работали, кроме предметов были затем не сосредоточены в .owl-stage. Когда я попытался изменить размеры .owl-stage, все сломалось.

Может кто-нибудь дать совет о том, как это сделать? Я просто хочу реагировать на развертывание Сова Карусель, где ширина и т. Д. Являются относительными, а не фиксированными.

2016-12-24 Summer Developer

ли демо на [документации страницу] (https://owlcarousel2.github.io/OwlCarousel2/) делать что вы ожидаете? Он говорит, что он отзывчив. – adriancarriger

@adriancarriger. Он ведет себя так, как я ожидаю, согласно документации, но это не то, что я хочу. Ответственная функциональность не помогает мне, потому что она, как представляется, предваряется количеством предметов, отображаемых за раз, я хочу, чтобы каждый элемент показывался всегда, поэтому изменение отображаемого количества элементов не помогает мне. Я просто хочу, чтобы слайдер работал без создания фиксированной ширины на важных элементах. –

Fiddle

Набор элементов 1

Для того, чтобы Сова Carousel 2 показывают один реагирующий слайд, который нужно установить количество элементов до 1 вместо значения по умолчанию 3, и нет необходимости использовать ответные варианты, предлагаемые в the docs, потому что вы всегда хотите показывать один слайд.

JavaScript

$('.owl-carousel').owlCarousel({ 
    loop:true, 
    margin:10, 
    nav:true, 
    items: 1 
})

Полный код

$('.owl-carousel').owlCarousel({ 
 
    loop:true, 
 
    margin:10, 
 
    nav:true, 
 
    items: 1 
 
})

.item { 
 
    background-color: #4DC7A0; 
 
    color: white; 
 
    font-size: 30px; 
 
    height: 150px; 
 
    padding: 10px; 
 
}

<link href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css" rel="stylesheet"/> 
 
<link href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.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>

источник

2016-12-24 04:58:36 adriancarriger

Я думаю, что вы можете использовать атрибут width с блоком%

$('.owl-carousel').attr("width", "100%")

с блоком шириной карусели% будет реагировать ширин последующего устройства экрана.

Другое, вы можете использовать css3 для реагирования. Соответствуя ширине экранного устройства, вы устанавливаете ширину разной.

Это все, что я знаю. если вы хотите:

Всегда показывать 1 элемент: Вы должны установить ширину owl-item составляет 100%, а ширина owl-carousel составляет: 100% .Или всегда показывают 2,3,4,5, .... Вы должны установленная ширина owl-item is (100/2)%, (100/3)%, (100/4)%, ...
Соответствие с экраном будет отображаться 4 для рабочего стола, 1 для мобильного: вы показываете точку останова использования установленная ширина. В другом, вы можете попробовать атрибут min-width или max-width для owl-item, чтобы сделать его

источник

2016-12-24 04:16:32 nartoan

Я не думаю, что это правильно, мне нужно ориентироваться на исходный код, в частности, на манипуляции с «совой» и с содержательной сценой. –

Итак, вам нужно установить атрибут 'width'' owl-item' с единицей% вместо 'owl-carousel' – nartoan

Нет, потому что контейнер' owl-item' имеет ширину, кратную всем элементам, поэтому установка его относительно этого не будет работать, потому что она больше, чем любой отдельный элемент. Я попытался установить его относительно элемента 'owl-carousel', но тогда элементы были не центрированы должным образом, т. Е. У меня было два элемента, отображаемых в представлении, где должно быть только одно. –

Сова Карусель Нет Фиксированная ширина

ответ

Fiddle

Набор элементов 1

JavaScript

Полный код

Смежные вопросы