Помогите с javascript

MJ
На сайте с 29.12.2009
Offline
44
902

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

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

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

MJ
На сайте с 29.12.2009
Offline
44
#1

Насколько я понял, изменения нужно править этот файл js:

(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);

Стрелки выводятся ссылками:

<a href="#" class="jcarousel-control-prev">&lsaquo;</a>

<a href="#" class="jcarousel-control-next">&rsaquo;</a>

Я не пойму, что нужно заключать в условие if чтобы спрятать ссылки если елементов меньше 4х ?

MJ
На сайте с 29.12.2009
Offline
44
#2

Пункт №1 решён следующим образом:

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

Не могу решить вот это:

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

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

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

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

UPD: Решена и 2 проблема:

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);
}
Jor
На сайте с 23.06.2012
Offline
42
Jor
#3

Можно так, на все случаи:

var jcWidth = jcarousel.jcarousel('items').length * 150;


if(jcWidth <= 450) {
$('.jcarousel-wrapper').width(jcWidth).children('a').remove();
}
MJ
На сайте с 29.12.2009
Offline
44
#4
Jor:
Можно так, на все случаи:
var jcWidth = jcarousel.jcarousel('items').length * 150;


if(jcWidth <= 450) {
$('.jcarousel-wrapper').width(jcWidth).children('a').remove();
}

Спасибо :)

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий