SlavaMaxwell
@SlavaMaxwell
HTML-верстальщик

Как сделать работу таких кнопок на swiper.js?

Вот посмотрите 3-ий пример, появление и исчезновение кнопок, как сделать такой принцип работу на swiper.js?
https://obninsksite.ru/blog/html-and-css/156-slajd...
  • Вопрос задан
  • 60 просмотров
Решения вопроса 2
@KRHD
У swiper выставляется класс когда доходишь до последнего элемента, у этого класса opacity: 0.5; вроде, дак сделай opacity: 0;
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@Air_Sidney
у меня навигации стрелочной нет, но для пагинации я так делал.
у меня на проекте gsap, поэтому я им, но можно и на чистом js

export function swiperInit() {
    let swiper = new Swiper('.swiper-container', {
        slidesPerView: 1,
        speed: 2000,
        loop: true,
        autoplay: {
            // delay: 2500,
            disableOnInteraction: false,
        },
        pagination: {
            el: '#swiper-pagination',
            clickable: true,
            hideOnClick: true
        },
    });

    swiper.on('slideChangeTransitionStart', function () {
        gsap.set("#swiper-pagination", {opacity: 0});
        console.log('slideChangeTransitionStart')
    });

    swiper.on('slideChangeTransitionEnd', function () {
        gsap.to("#swiper-pagination", 0.3, {opacity: 1, ease: "easeOut"});
        console.log('slideChangeTransitionEnd')

    });
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Artezio Нижний Новгород
от 130 000 до 180 000 ₽
Artezio Москва
от 160 000 до 220 000 ₽
XPOWER Одесса
от 3 000 до 5 500 $
04 мар. 2021, в 16:10
10000 руб./за проект
04 мар. 2021, в 15:49
500 руб./в час
04 мар. 2021, в 15:42
8000 руб./за проект