Как сделать адаптивную карусель слайдов с полосой прокруткой scrollbar

Question

Второй день, пытаюсь найти АДАПТИВНУЮ карусель с горизонтальной полосой прокрутки. Необходимо что бы карусель выводила определенное кол-во item'ов в показе Пробовал OWL Carousel, Slick - не подходит. Сейчас остановился на SLY Carousel, что имеет в себе уже полосу прокрутки, но не имеет возможность установить определенное колко блоков(item) для показа на разное разрешение экрана

Пример по ссылке: https://codepen.io/synapse/pen/bGeNoKY

jQuery(function($){
    'use strict';

    // -------------------------------------------------------------
    //   Basic Navigation
    // -------------------------------------------------------------
    (function () {
        var $frame  = $('#basic');
        var $wrap  = $frame.parent();

        // Call Sly on frame
        $frame.sly({
            horizontal: 1,
            itemNav: 'basic',
            // smart: 1,
            // activateOn: 'click',
            mouseDragging: 1,
            touchDragging: 1,
            releaseSwing: 1,
            startAt: 0,
            scrollBar: $wrap.find('.scrollbar'),
            // scrollBy: 1,
            pagesBar: $wrap.find('.pages'),
            // activatePageOn: 'click',
            speed: 800,
            // elasticBounds: 1,
            // easing: 'easeOutExpo',
            dragHandle: 1,
            // dynamicHandle: 1,
            clickBar: 1,
        });

    }());

    // -------------------------------------------------------------
    //   Centered Navigation
    // -------------------------------------------------------------
    (function () {
        var $frame = $('#centered');
        var $wrap  = $frame.parent();

        // Call Sly on frame
        $frame.sly({
            horizontal: 1,
            itemNav: 'centered',
            smart: 1,
            activateOn: 'click',
            mouseDragging: 1,
            touchDragging: 1,
            releaseSwing: 1,
            startAt: 4,
            scrollBar: $wrap.find('.scrollbar'),
            scrollBy: 1,
            speed: 300,
            elasticBounds: 1,
            easing: 'easeOutExpo',
            dragHandle: 1,
            dynamicHandle: 1,
            clickBar: 1,

            // Buttons
            prev: $wrap.find('.prev'),
            next: $wrap.find('.next')
        });
    }());

    // -------------------------------------------------------------
    //   Force Centered Navigation
    // -------------------------------------------------------------
    (function () {
        var $frame = $('#forcecentered');
        var $wrap  = $frame.parent();

        // Call Sly on frame
        $frame.sly({
            horizontal: 1,
            itemNav: 'forceCentered',
            smart: 1,
            activateMiddle: 1,
            activateOn: 'click',
            mouseDragging: 1,
            touchDragging: 1,
            releaseSwing: 1,
            startAt: 0,
            scrollBar: $wrap.find('.scrollbar'),
            scrollBy: 1,
            speed: 300,
            elasticBounds: 1,
            easing: 'easeOutExpo',
            dragHandle: 1,
            dynamicHandle: 1,
            clickBar: 1,

            // Buttons
            prev: $wrap.find('.prev'),
            next: $wrap.find('.next')
        });
    }());

    // -------------------------------------------------------------
    //   Cycle By Items
    // -------------------------------------------------------------
    (function () {
        var $frame = $('#cycleitems');
        var $wrap  = $frame.parent();

        // Call Sly on frame
        $frame.sly({
            horizontal: 1,
            itemNav: 'basic',
            smart: 1,
            activateOn: 'click',
            mouseDragging: 1,
            touchDragging: 1,
            releaseSwing: 1,
            startAt: 0,
            scrollBar: $wrap.find('.scrollbar'),
            scrollBy: 1,
            speed: 300,
            elasticBounds: 1,
            easing: 'easeOutExpo',
            dragHandle: 1,
            dynamicHandle: 1,
            clickBar: 1,

            // Cycling
            cycleBy: 'items',
            cycleInterval: 1000,
            pauseOnHover: 1,

            // Buttons
            prev: $wrap.find('.prev'),
            next: $wrap.find('.next')
        });

        // Pause button
        $wrap.find('.pause').on('click', function () {
            $frame.sly('pause');
        });

        // Resume button
        $wrap.find('.resume').on('click', function () {
            $frame.sly('resume');
        });

        // Toggle button
        $wrap.find('.toggle').on('click', function () {
            $frame.sly('toggle');
        });
    }());

    // -------------------------------------------------------------
    //   Cycle By Pages
    // -------------------------------------------------------------
    (function () {
        var $frame = $('#cyclepages');
        var $wrap  = $frame.parent();

        // Call Sly on frame
        $frame.sly({
            horizontal: 1,
            itemNav: 'basic',
            smart: 1,
            activateOn: 'click',
            mouseDragging: 1,
            touchDragging: 1,
            releaseSwing: 1,
            startAt: 0,
            scrollBar: $wrap.find('.scrollbar'),
            scrollBy: 1,
            pagesBar: $wrap.find('.pages'),
            activatePageOn: 'click',
            speed: 300,
            elasticBounds: 1,
            easing: 'easeOutExpo',
            dragHandle: 1,
            dynamicHandle: 1,
            clickBar: 1,

            // Cycling
            cycleBy: 'pages',
            cycleInterval: 1000,
            pauseOnHover: 1,
            startPaused: 1,

            // Buttons
            prevPage: $wrap.find('.prevPage'),
            nextPage: $wrap.find('.nextPage')
        });

        // Pause button
        $wrap.find('.pause').on('click', function () {
            $frame.sly('pause');
        });

        // Resume button
        $wrap.find('.resume').on('click', function () {
            $frame.sly('resume');
        });

        // Toggle button
        $wrap.find('.toggle').on('click', function () {
            $frame.sly('toggle');
        });
    }());

    // -------------------------------------------------------------
    //   One Item Per Frame
    // -------------------------------------------------------------
    (function () {
        var $frame = $('#oneperframe');
        var $wrap  = $frame.parent();

        // Call Sly on frame
        $frame.sly({
            horizontal: 1,
            itemNav: 'forceCentered',
            smart: 1,
            activateMiddle: 1,
            mouseDragging: 1,
            touchDragging: 1,
            releaseSwing: 1,
            startAt: 0,
            scrollBar: $wrap.find('.scrollbar'),
            scrollBy: 1,
            speed: 300,
            elasticBounds: 1,
            easing: 'easeOutExpo',
            dragHandle: 1,
            dynamicHandle: 1,
            clickBar: 1,

            // Buttons
            prev: $wrap.find('.prev'),
            next: $wrap.find('.next')
        });
    }());

    // -------------------------------------------------------------
    //   Crazy
    // -------------------------------------------------------------
    (function () {
        var $frame  = $('#crazy');
        var $slidee = $frame.children('ul').eq(0);
        var $wrap   = $frame.parent();

        // Call Sly on frame
        $frame.sly({
            horizontal: 1,
            itemNav: 'basic',
            smart: 1,
            activateOn: 'click',
            mouseDragging: 1,
            touchDragging: 1,
            releaseSwing: 1,
            startAt: 3,
            scrollBar: $wrap.find('.scrollbar'),
            scrollBy: 1,
            pagesBar: $wrap.find('.pages'),
            activatePageOn: 'click',
            speed: 300,
            elasticBounds: 1,
            easing: 'easeOutExpo',
            dragHandle: 1,
            dynamicHandle: 1,
            clickBar: 1,

            // Buttons
            forward: $wrap.find('.forward'),
            backward: $wrap.find('.backward'),
            prev: $wrap.find('.prev'),
            next: $wrap.find('.next'),
            prevPage: $wrap.find('.prevPage'),
            nextPage: $wrap.find('.nextPage')
        });

        // To Start button
        $wrap.find('.toStart').on('click', function () {
            var item = $(this).data('item');
            // Animate a particular item to the start of the frame.
            // If no item is provided, the whole content will be animated.
            $frame.sly('toStart', item);
        });

        // To Center button
        $wrap.find('.toCenter').on('click', function () {
            var item = $(this).data('item');
            // Animate a particular item to the center of the frame.
            // If no item is provided, the whole content will be animated.
            $frame.sly('toCenter', item);
        });

        // To End button
        $wrap.find('.toEnd').on('click', function () {
            var item = $(this).data('item');
            // Animate a particular item to the end of the frame.
            // If no item is provided, the whole content will be animated.
            $frame.sly('toEnd', item);
        });

        // Add item
        $wrap.find('.add').on('click', function () {
            $frame.sly('add', '<li>' + $slidee.children().length + '</li>');
        });

        // Remove item
        $wrap.find('.remove').on('click', function () {
            $frame.sly('remove', -1);
        });
    }());
});

.container{
    max-width: 1230px !important;
  margin: 0 auto;
  padding-left:15px;
  padding-right:15px;
}

/* Example wrapper */
.wrap {
    position: relative;
    margin: 3em 0;
}

/* Frame */
.frame {
    height: 250px;
    line-height: 250px;
    overflow: hidden;
}
.frame ul {
    list-style: none;
    margin: 0;
    padding: 0;
    height: 100%;
    font-size: 50px;
}
.frame ul li {
    float: left;
    width: 400px;
    height: 100%;
    margin: 0 1px 0 0;
    padding: 0;
    background: #333;
    color: #ddd;
    text-align: center;
    cursor: pointer;
}
.frame ul li.active {
    color: #fff;
    background: #a03232;
}

/* Scrollbar */
.scrollbar {
    margin: 0 0 1em 0;
    height: 2px;
    background: #ccc;
    line-height: 0;
}
.scrollbar .handle {
    width: 100px;
    height: 100%;
    background: #292a33;
    cursor: pointer;
}
.scrollbar .handle .mousearea {
    position: absolute;
    top: -9px;
    left: 0;
    width: 100%;
    height: 20px;
}

<link rel="stylesheet" type="text/css" href="https://car.synapsepro.site/css/horizontal.css">


    <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

<script type="text/javascript" src="https://car.synapsepro.site/js/plugins.js"></script>
<script type="text/javascript" src="https://car.synapsepro.site/js/sly.min.js"></script>
<script type="text/javascript" src="https://car.synapsepro.site/js/sly-carousel.js"></script>


<div class="container py-5">

    <h2>Basic <small>- with all the navigation options enabled</small></h2>

    <div class="scrollbar">
        <div class="handle">
            <div class="mousearea"></div>
        </div>
    </div>

    <div class="frame" id="basic" style="overflow: hidden;">
        <ul>
            <li>0</li>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
        </ul>
    </div>

</div>

А так же мой на половину рабочий пример: http://car.synapsepro.site/

Но как видно, блоки не одного размера а заданного в 400 px, как сделать так что бы 3 блока, были одного размера по ширине экрана?

Спасибо

Answer 1

Спасибо, всем кто просмотрел. Нашел решение от какого-то французского источника.

Вот ссылка на сам источник: https://www.mctaylis.fr/ajouter-une-scrollbar-a-owl-carousel/

Вот ссылка на пример: http://demo.mctaylis.fr/owl-carousel-scrollbar/

БЛОГ НА HUSL

Как сделать адаптивную карусель слайдов с полосой прокруткой scrollbar

Ответы (1 шт):