Как создать карусель с несколькими строками?

Я ищу карусель с несколькими строками. Например 3 ряда - 9 шт. Карусель jQuery была бы хороша, но я могу найти карусели только с 1 строкой.

Я хочу эту установку. Это возможно?

введите здесь описание изображения


carousel jquery
person Caspert    schedule 20.03.2014    source источник

Ответы (3)


arrow_upward
5
arrow_downward

Недавно я столкнулся с этой проблемой и хотел использовать Slick.js, потому что у него масса других возможностей. Он устанавливает каждое изображение (установленное внутри div) как «слайд», и вы можете выбрать, сколько слайдов вы хотите отображать одновременно.

Чтобы создать несколько строк с помощью Slick.js, вы вкладываете элементы div, содержащие изображения, в другой элемент div, который slick воспринимает как один слайд. Затем вы перемещаете дочерние элементы div, чтобы создать сетку изображений. Есть много способов сделать это — я также использовал разрывы строк с помощью CSS «очистить: оба», чтобы разбить изображения на новую строку.

Вот соответствующий код для сетки 2x2:

HTML

<div class="slider">

    <!-- This will be considered one slide -->
    <div>    
        <div class="grandchild">
            <img src="" />
        </div>
        <div class="grandchild">
            <img src="" />
        </div>

        <br class="clearboth">

        <div class="grandchild">
            <img src="" />
        </div>
        <div class="grandchild">
            <img src="" />
        </div>
    </div>

    <!-- The second slide -->
    <div>
        <div class="grandchild">
            <img src="" />
        </div>
            ...
    </div>
</div>

CSS

.grandchild {
    float: left;
}
.clearboth {
    clear: both;
}

JS

$(document).ready(function() {
    $('.slider').slick({
        slidesToShow: 1,
        slidesToScroll: 1
    });
});
person kamerynn    schedule 17.09.2014
comment
Отличный ответ, но с этим типом решения возникает фундаментальная проблема при работе с адаптивными веб-сайтами. Одним из замечательных преимуществ Slick.js является то, что он поддерживает адаптивный дизайн с небольшим объемом кода инициализации JS. Однако если вы создадите сетку, содержащую отсортированные элементы определенного размера, она не будет работать должным образом для браузеров разной ширины. - person Kevin Zych; 14.11.2014
comment
Истинный. Вы можете использовать точки останова, чтобы изменить слайды для отображения/прокрутки и иметь вложенные элементы div, которые складываются вертикально, но вы застряли бы на фиксированной высоте (поэтому, если бы у вас была сетка, фиксированная на высоте 4 изображений, вы могли бы перейти от 4x4 к 3x4 , 2х4 и др.). Есть ли лучшее решение для адаптивного дизайна? - person kamerynn; 16.11.2014
comment
Привет, KamHarrah и @Kevin Zych, у кого-нибудь из вас есть решение для центрирования этих миниатюр по бокам гладкого слайда? Я сейчас столкнулся с этой проблемой. - person gwar9; 28.10.2015
comment
Извините, @gwar9, ничего лишнего - person Kevin Zych; 29.10.2015

arrow_upward
4
arrow_downward

У Slick есть параметр rows, это может вам помочь, например:

$('.b-grid-item').slick({
    infinite: true,
    slidesToShow: 5,
    slidesToScroll: 5,
    rows: 3
});

Это создает сетку с 5 столбцами и 3 строками. Единственное препятствие с этим. Элементы идут сверху вниз, поэтому в первом ряду у вас будет порядок: 1, 4, 7,...

person Philip    schedule 22.06.2016

arrow_upward
1
arrow_downward

Для этого каждый из ваших элементов слайдера должен быть отдельной сеткой.

Например:

<div class="slider">
    <div class="item">
        <ul class="grid">
            <li></li>
            <li></li>
            <li></li>
            …
        </ul>
    </div>
    <div class="item">
        <ul class="grid">
            …
</div>
person feeela    schedule 20.03.2014