09
Сен
2021

Придумать решение для индикаторов в карусели (центрировать активную и 2 по бокам, лишние убрать)

Есть карусель слайдов с точками-индикаторами, заказчик просит убрать огромное количество этих точек, оставить одну активную и две соседних по бокам (с возможностью переключаться). Чтобы они перескакивали также, как карусель, но лишние скрыть. Активная по центру. Ума пока не приложу как это реализовать, нигде не встречала подобных фич. Карусель на materialize. Код, скрин и ссылка на страницу с каруселью ниже.

скрин

$(document).ready(function(){
    $('.carousel').carousel({
        numVisible: 3,
        dist: -150,
        indicators: true,
        shift: 100
    });
});

// move next carousel
$('.moveNextCarousel').click(function(e){
    e.preventDefault();
    e.stopPropagation();
    $('.carousel').carousel('next');
});

// move prev carousel
$('.movePrevCarousel').click(function(e){
    e.preventDefault();
    e.stopPropagation();
    $('.carousel').carousel('prev');
});
        <div class="carousel carousel-catalog">
            <a class="carousel-item" href="#">
                <p>WAVE</p>
                <img src="img/icons/wave.png" alt="">
            </a>
            <a class="carousel-item" href="#">
                <p>COSMOPOLITAN</p>
                <img src="img/icons/cosmo.png" alt="">
            </a>
            <a class="carousel-item" href="#">
                <p>SMOOV</p><img src="img/icons/smoov.png" alt="">
            </a>
        </div>

ссылка на страницу карусели

Источник: https://ru.stackoverflow.com/questions/1326849/%D0%9F%D1%80%D0%B8%D0%B4%D1%83%D0%BC%D0%B0%D1%82%D1%8C-%D1%80%D0%B5%D1%88%D0%B5%D0%BD%D0%B8%D0%B5-%D0%B4%D0%BB%D1%8F-%D0%B8%D0%BD%D0%B4%D0%B8%D0%BA%D0%B0%D1%82%D0%BE%D1%80%D0%BE%D0%B2-%D0%B2-%D0%BA%D0%B0%D1%80%D1%83%D1%81%D0%B5%D0%BB%D0%B8-%D1%86%D0%B5%D0%BD%D1%82%D1%80%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D1%82%D1%8C-%D0%B0%D0%BA%D1%82%D0%B8%D0%B2%D0%BD%D1%83%D1%8E-%D0%B8-2-%D0%BF%D0%BE-%D0%B1%D0%BE%D0%BA%D0%B0%D0%BC

Тебе может это понравится...

Добавить комментарий