Armo
Новичок
Подскажите пожалуйста пытаюсь сверстать макет PSD в Bootstrap 3, и там несколько слайдеров. Вот пытаюсь их реализовать на плагине carousel. И как всегда есть одно но. Слайдер должен быть адаптивным для мобильных устройств. И тут начинается самое интересное.
В мануале написана вот такая структура:
У меня пл дизайну несколько блоков .item в которых соответственно располагаются блоки.
И собственно в зависимости от ширины окна количество элементов должно меняться что бы блоки не наезжали друг на друга.
Я написал jQ мини плагинчик для адаптации HTML структуры под ширину экрана:
При событии load или redy плагин успешно выполняет свои задачи. Но стоит мне его привязать на событие ресайза окна:
Как начинаются лаги. На мобильном страница вообще не подгружается а на PC при ресайзе окна браузера появляется не понятный scroll который зависает и браузер уходит в себя. В чём причина помогите пожалуйста ребят. Мозги в клочья с Bootstrap 3 да и вообще с bootstrap столкнулся в первый раз.
В мануале написана вот такая структура:
Код:
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
Содержимое
</div>
</div>
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"></a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next"></a>
</div>И собственно в зависимости от ширины окна количество элементов должно меняться что бы блоки не наезжали друг на друга.
Я написал jQ мини плагинчик для адаптации HTML структуры под ширину экрана:
Код:
$(function () {
$.fn.slideradapt = function (options) {
options = $.extend({
width: 300, // минимальная ширина
}, options);
this.each(function () {
$(this).off('slideradapt');
var $this = $(this);
var $inner = $this.find('.carousel-inner');
var $items = $this.find('.items > div');
var width = options.width, ecount = $items.size(), initemcount = Math.floor($inner.width() / width),
itemscount = Math.ceil(ecount / initemcount), ewidth = $inner.width() / initemcount,
div = '', i = 1, group = 1;
// Группировка объектов для помещения в Item
$items.each(function () {
$(this).addClass('group' + group);
i++;
if (i > initemcount) {
i = 1;
group++;
}
});
for (i = 1; i <= itemscount; i++) {
var active = (i === 1) ? ' active' : '';
div += '<div class="item' + active + '">';
$items.each(function () {
if ($(this).hasClass('group' + i)) {
div += '<div';
div += $(this).attr('id') ? ' id="' + $(this).attr('id') + '"' : '';
div += $(this).attr('class') ? ' class="' + $(this).attr('class') + '"' : '';
div += '>' + $(this).html() + '</div>';
}
});
div += '</div>';
}
$inner.find('.item').remove(); // reset
$inner.html(div).remove('.item:empty');
delete(div);
$inner.find('.item > div').width(ewidth);
$('.carousel-control[href="#' + $this.attr('id') + '"]').removeClass('off').removeClass('_off');
$('.carousel-control.left[href="#' + $this.attr('id') + '"]').addClass('off');
itemscount === 1 && $('.carousel-control[href="#' + $this.attr('id') + '"]').addClass('_off');
$this.off('slid.bs.carousel').on('slid.bs.carousel', function () {
var i = $(this).find('.active').index();
if (!i) {
$('.carousel-control.right[href="#' + $this.attr('id') + '"]').removeClass('off');
$('.carousel-control.left[href="#' + $this.attr('id') + '"]').addClass('off');
}
else if (i == $(this).find('.item').size() - 1) {
$('.carousel-control.left[href="#' + $this.attr('id') + '"]').removeClass('off');
$('.carousel-control.right[href="#' + $this.attr('id') + '"]').addClass('off');
}
else {
$('.carousel-control[href="#' + $this.attr('id') + '"]').removeClass('off');
}
});
delete($this, $inner, $items);
return $(this);
});
};
})
Код:
$(function () {
$(window).bind('load resize', function(){
$('#partners_carousel').slideradapt({width: 200}).carousel();
});
});
