Slick. js карусель слишком много места и проблема скольжения - PullRequest
Новая
       10

Slick. js карусель слишком много места и проблема скольжения

1 голос
/ 09 января 2020

Я использую пятно. js https://kenwheeler.github.io/slick/. Проблема в том, что я пытаюсь скользить по скользящим рядам скользящих карточек (".carosalItemHa sh"). Каждый ряд содержит карточки, и он должен быть рядом с предыдущими карточками, избегая слишком много пустых мест. Одним касанием стрелки слайд должен быть таким, чтобы каждая карта была видимой.

Я пробую два элемента показа в 2 ряда, используя скользящее движение. js так, чтобы он скользил горизонтально.

1) Там не должно быть места. Пробелы должны быть заполнены другой картой рядом с ним. 2) Каждая карточка в строке должна скользить по одной так, чтобы текст каждой карточки был полностью виден при скольжении одна за другой.

ick

. html

    <div class="skillsCntr uttPanel">\
                <div class="carosalItemHash" style="border-bottom: 0px;">\
                    <span title="">cqqcc</span>
                </div>
                <div class="carosalItemHash" style="border-bottom: 0px;">\
                    <span title="">cqqcc</span>
                </div>
     <div class="carosalItemHash" style="border-bottom: 0px;">\
                    <span title="">cqqcc</span>
                </div>
     <div class="carosalItemHash" style="border-bottom: 0px;">\
                    <span title="">cqqcc</span>
                </div>
     <div class="carosalItemHash" style="border-bottom: 0px;">\
                    <span title="">cqqcc</span>
                </div>
            </div>\


js
=========


const slider = $(".skillsCntr.utterancePanel");
                    slider
                        .slick({
                            arrows: true,
                            infinite: true,
                            slidesPerRow: 1,
                            rows: 2,
                            slidesToShow: 4,
                            slidesToScroll: 1,
                            dots: false,
                            autoplay: false,
                            // speed: 300,
                            variableWidth: true,
                            centerMode: true,
                            adaptiveHeight: false,
                            centerPadding: '0%'
                        });
                    //Implementing navigation of slides using mouse scroll
                    slider.on('wheel', (function (e) {
                        e.preventDefault();



             if (e.originalEvent.deltaY < 0) {
                                $(this).slick('slickNext');
                            } else {
                                $(this).slick('slickPrev');
                            }
                        }));
                    }

<head>
        <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.6.0/slick/slick.css" />
        <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.6.0/slick/slick-theme.css" />
</head>
<body>
  <div class="skillsCntr uttPanel">\
                <div class="carosalItemHash" style="border-bottom: 0px;">\
                    <span title="">cqqcc</span>
                </div>
                <div class="carosalItemHash" style="border-bottom: 0px;">\
                    <span title="">cqqcc</span>
                </div>
     <div class="carosalItemHash" style="border-bottom: 0px;">\
                    <span title="">cqqcc</span>
                </div>
     <div class="carosalItemHash" style="border-bottom: 0px;">\
                    <span title="">cqqcc</span>
                </div>
     <div class="carosalItemHash" style="border-bottom: 0px;">\
                    <span title="">cqqcc</span>
                </div>
            </div>\
 <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.6.0/slick/slick.min.js"></script>
</body>

1 Ответ

0 голосов
/ 10 января 2020

Я не уверен, что получил все запрошенные изменения, но я создал простую версию с двумя строками на слайде, без промежутков между строками. Один слайд из двух строк отображается одновременно.

Настройки: 

$(".uttPanel").slick({
    arrows: true,
    infinite: true,
    slidesPerRow: 1,
    rows: 2,
    dots: false,
    autoplay: false,
);

Кодовое поле с минимальными JS и CSS находится здесь: https://codepen.io/edlucas/pen/PowRyRe

Надеюсь, это поможет.

...