Как мога да създам въртележка с множество редове?

Търся въртележка, която има няколко реда. Например 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 вижда като един слайд. След това пренасяте дъщерните divs, за да създадете мрежата от изображения. Има много начини да направите това - аз също използвах прекъсвания на редове с CSS настройка "clear: both", за да разделя изображенията в нов ред.

Ето съответния код за решетка 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 init код. Ако обаче създадете мрежа, съдържаща сортирани елементи за определен размер, тя няма да работи правилно за различни ширини на браузъра. - person Kevin Zych; 14.11.2014
comment
Вярно. Можете да използвате точки на прекъсване, за да промените слайдовете за показване/превъртане и да имате вложени div, които се подреждат вертикално, но ще останете на фиксирана височина (така че ако сте имали мрежа, фиксирана на височина от 4 изображения, можете да прекъснете от 4x4 на 3x4 , 2x4 и т.н.). Има ли по-добро решение за адаптивен дизайн? - 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 има параметър, наречен редове, това може да ви помогне, напр.:

$('.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