2016-07-22 2 views
1

Ниже мой код для очень простой совы карусели. Он предназначен для отображения только одного изображения/слайда в любой момент времени, но в тот момент, когда я заканчиваю стек всех этих изображений в одном слайде. Я уверен, что я должен делать что-то очень явно неправильное.Сова карусели Слайды всех визуализаций как один уложенный блок

<ul class="showcasecarousel"> 

    <li class="item"><img src="img/trackback.png" alt="Some text here"></li> 
    <li class="item"><img src="img/trackback.png" alt="Some text here"></li> 
    <li class="item"><img src="img/trackback.png" alt="Some text here"></li> 

</ul> 

JavaScript в нижней части моего HTML файла:

$('.showcasecarousel').owlCarousel({ 
    navigation : false, // Show next and prev buttons 
    slideSpeed : 300, 
    paginationSpeed : 400, 
    singleItem: true, 
    loop: true, 
}); 

И, наконец, CSS у меня есть:

.showcasecarousel .item img{ 
    display: inline; 
    width: 100%; 
    height: auto; 
} 

Оба CSS и файлы JS для Совы Карусель и JavaScript тоже были правильно включены - на одной странице есть другие карусели, и они отлично работают. Любая помощь будет принята с благодарностью.

+0

Когда я проверяю его на Chrome, они отображаются как три разных div, но все они являются классом «owl-item active». Я полагаю, что должен быть только один из этих класс? – fierynot

+0

Не могли бы вы создать jsfiddle? –

+0

Я пытался, но я не был уверен, как загрузить OwlCarousel в него – fierynot

ответ

0

Я думаю, вы забыли о собственности items. в вашей вставке javascript items: 1,. Также почему твиттер-бутстрап помечен? Еще раз взгляните на документацию сова-карусели: https://owlcarousel2.github.io/OwlCarousel2/demos/demos.html

+0

'items: 1', к сожалению, может быть включена в строку' singleitem: true'. Извините, я ошибся - теперь исправлено! – fierynot

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