2015-05-21 4 views
0

Я использую плагин JCarousel jQuery для управления списком изображений, но он не будет работать. Что я могу сделать?JCarousel jQuery plugin

Существует демо в http://jsfiddle.net/mk1z6p3x/

$(function() { 
 
    $('.jcarousel').jcarousel(); 
 
});
.jcarousel { 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 
.jcarousel ul { 
 
    width: 20000em; 
 
    position: relative; 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.jcarousel li { 
 
    float: left; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://raw.githubusercontent.com/jsor/jcarousel/master/dist/jquery.jcarousel.min.js"></script> 
 
<div class="jcarousel"> 
 
    <ul dir="rtl"> 
 
     <li style="background: url('http://sorgalla.com/jcarousel/examples/_shared/img/img1.jpg');"></li> 
 
     <li style="background: url('http://sorgalla.com/jcarousel/examples/_shared/img/img2.jpg');"></li> 
 
     <li style="background: url('http://sorgalla.com/jcarousel/examples/_shared/img/img3.jpg');"></li> 
 
     <li style="background: url('http://sorgalla.com/jcarousel/examples/_shared/img/img4.jpg');"></li> 
 
     <li style="background: url('http://sorgalla.com/jcarousel/examples/_shared/img/img5.jpg');"></li> 
 
     <li style="background: url('http://sorgalla.com/jcarousel/examples/_shared/img/img6.jpg');"></li> 
 
    </ul> 
 
</div>

EDIT: я изменил их, как говорил мне @redelschaap, я добавить новый стиль в CSS .jcarousel li, но еще не работает этот плагин. см. здесь: jsfiddle.net/mk1z6p3x/1

ответ

1

Вы используете изображения в качестве фоновых изображений и оставляйте свои элементы списка пустым. Вы не видите их, потому что у них нет ширины/высоты. Дайте вашим элементам ширину и высоту (мин) или используйте изображения как теги <img> в элементах списка.

Редактировать: Вы также забыли указать файл jcarousel.basic.js, и jquery.jcarousel.min.js не удалось загрузить по какой-либо причине. Я обновил вашу скрипку: http://jsfiddle.net/mk1z6p3x/2/. Проверьте меню внешних ресурсов.

+0

redelschaap - я изменил их, добавляю новый стиль в css '.jcarousel li', но все равно он не работает с этим плагином. см. здесь: http: //jsfiddle.net/mk1z6p3x/1/ –

+0

Я отредактировал свой ответ. – redelschaap

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