Не нравятся результаты поиска? Попробуйте другой поиск!
DLE FAQ » Все вопросы » jQuery » Как в jCarousel спрятать стрелки навигации ?

Как в jCarousel спрятать стрелки навигации ?


     20.01.2015    Все вопросы » jQuery    4298

вопрос
Установил jquery плагин Carousel, настроил, все работает.

1. Скажите пожалуйста, можно ли НЕ показывать стрелки навигации (влево и вправо) если картинок (елементов) 3 и меньше ?

2. По-умолчанию, у меня ширина блока "jcarousel-wrapper" 450px, можно ли её изменить если есть всего 1 картинка (элемент) с 450px на 150px, если 2 картинки с 450px на 300px, а если 3 и больше чтобы так и осталось 450px ?

Пожалуйста, помогите, вот как я понял изменения нужно ввести в данном файле:

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

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

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

                jcarousel.jcarousel('items').css('width', width + 'px');
            })
            .jcarousel({
                wrap: 'circular'
            });


        $('.jcarousel-control-prev')
            .jcarouselControl({
                target: '-=1'
            });

        $('.jcarousel-control-next')
            .jcarouselControl({
                target: '+=1'
            });


        $('.jcarousel-pagination')
            .on('jcarouselpagination:active', 'a', function() {
                $(this).addClass('active');
            })
            .on('jcarouselpagination:inactive', 'a', function() {
                $(this).removeClass('active');
            })
            .on('click', function(e) {
                e.preventDefault();
            })
            .jcarouselPagination({
                perPage: 1,
                item: function(page) {
                    return '<a href="#' + page + '">' + page + '</a>';
                }
            });
    });
})(jQuery);

Ответа пока нет


9 комментариев

thebeknazar
Юзер

thebeknazar - 20 января 2015 20:43 -

Посмотрите на это решение http://owlgraphic.com/owlcarousel/ думаю лучше подойдет.

Morse
Юзер

Morse - 20 января 2015 20:58 -

Спасибо, но мне именно нужно в ту карусель что я дал выше. Она легче немного. Да и стили я уже видоизменил :(

RadarWeb
Юзер

RadarWeb - 20 января 2015 21:02 -

css
.jcarousel-prev, .jcarousel-next { visibility:hidden; }

Morse
Юзер

Morse - 20 января 2015 21:09 -

Вы не поняли, мне нужно их не вообще убрать, а убирать только тогда, когда элементов (картинок меньше 4х) !

FastFud
Юзер

FastFud - 20 января 2015 21:33 -

if (jcarousel.jcarousel('items').length < 4) {
    $('.jcarousel-control-prev, .jcarousel-control-next').hide();
} else {
    $('.jcarousel-control-prev, .jcarousel-control-next').show();
}

Morse
Юзер

Morse - 20 января 2015 22:04 -

СУПЕР !!! СПАСИБО ! Вы как всегда мне помогаете. Все работает.А скажите, возможно по аналогии сделать:
По-умолчанию, у меня ширина блока "jcarousel-wrapper" 450px, можно ли её изменить если есть всего 1 картинка (элемент) с 450px на 150px, если 2 картинки с 450px на 300px, а если 3 и больше чтобы так и осталось 450px ?

Morse
Юзер

Morse - 20 января 2015 22:43 -

Как не делал, приписывает и блоку 300px и элементу, пытаюсь так:


if (jcarousel.jcarousel('items').length = 2) {
$('.jcarousel-wrapper').width(300);
} else {
$('.jcarousel-wrapper').width(450);
}

Что я неправильно делаю ???

FastFud
Юзер

FastFud - 20 января 2015 22:56 -

if (jcarousel.jcarousel('items').length == 1) {
    $('.jcarousel-wrapper').width(150);
} else if (jcarousel.jcarousel('items').length == 2) {
    $('.jcarousel-wrapper').width(300);
} else {
    $('.jcarousel-wrapper').width(450);
}

Morse
Юзер

Morse - 20 января 2015 23:04 -

Огромное спасибо в сотый раз ! То что нужно !))) Все работает отлично !

Чтобы комментировать - войдите или зарегистрируйтесь на сайте

Похожие вопросы

 30.06.2014 cracken  jQuery
наверх