Jcarousel Basic, сделайте его отзывчивым

у меня есть слайдер jcarousel на моей веб-странице, базовая версия (та, которая отображает только одно изображение), я не могу изменить размер с помощью медиа-запросов div слайдера jcarousel.

Вот HTML-код

<div id="mycarousel">
<div class="wrapper">


<div class="jcarousel-wrapper">
<div class="jcarousel">
<ul>
<li><img src="img/macu/slide1.png" width="700" height="500" alt=""></li>


<li><img src="img/macu/slide5.png" width="700" height="500" alt=""></li>

</ul>
/div>

<a href="#" class="jcarousel-control-prev"></a> 
<a href="#" class="jcarousel-control-next"></a>

<!--
<a href="#" class="jcarousel-control-prev">&lsaquo;</a> 
<a href="#" class="jcarousel-control-next">&rsaquo;</a>
-->
<!--  <p class="jcarousel-pagination"> -->
</p>
</div>
</div>
</div>

а вот мой css

@media screen and (max-width:545px){
//body {background:orange;}
#content {
width:43%;
height:auto;
}

#media,#vignette {
width:auto;
height:auto;

}
#menu {
width:32%;
font-size:80%;
}

.jcarousel{
width:22%;
//font-size:80%;
}

}

вот js

(function($) {
$(function() {
    $('.jcarousel').jcarousel();







    $('.jcarousel-control-prev')
        .on('jcarouselcontrol:active', function() {
            $(this).removeClass('inactive');
        })
        .on('jcarouselcontrol:inactive', function() {
            $(this).addClass('inactive');
        })
        .jcarouselControl({
            target: '-=1'
        });

    $('.jcarousel-control-next')
        .on('jcarouselcontrol:active', function() {
            $(this).removeClass('inactive');
        })
        .on('jcarouselcontrol:inactive', function() {
            $(this).addClass('inactive');
        })
        .jcarouselControl({
            target: '+=1'
        });

    $('.jcarousel-pagination')
        .on('jcarouselpagination:active', 'a', function() {
            $(this).addClass('active');
        })
        .on('jcarouselpagination:inactive', 'a', function() {
            $(this).removeClass('active');
        })
        .jcarouselPagination();
});





})(jQuery);

Нужно ли что-то менять в js? я обнаружил, что есть отзывчивая jcarousel, но она показывает 3 изображения одновременно... http://sorgalla.com/jcarousel/examples/responsive/

Спасибо вам :)


jcarousel responsive-slides
person nathalizator    schedule 17.01.2014    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вы также можете отображать разное количество элементов в зависимости от размера контейнера.

$('.jcarousel')
.on('jcarousel:create jcarousel:reload', function() {
    var element = $(this),
        width = element.innerWidth();

    if (width > 900) {
        width = width / 3;
    } else if (width > 600) {
        width = width / 2;
    }

    element.jcarousel('items').css('width', width + 'px');
})
.jcarousel({
    // Your configurations options
});

поэтому, если вы хотите показать более 3 изображений, вы просто меняете ширину/4

person mrbangybang    schedule 10.04.2014