0

I am using swiperJs and am able to create an image carousel with custom arrow keys.

In my case, I am using only the right arrow and upon clicking it the arrow turns 180deg to point left and it is supposed to now swipe left (instead of right) when the user clicks on it.

While everything seems to be working fine, I am stuck at a point where I want to toggle this swipe behaviour. Currently, when we click on the arrow, it swipes in right direction only. Obviously, this is because I have hidden the prevArrow and only made use of the nextArrow.

How can I achieve this behaviour of alternate swipe direction without including the prevArrow.

My custom JS looks like this:

$(document).ready(function () {
    $('.slider').slick({
        nextArrow: '<svg id="right-swipe-arrow" onclick="isInViewport()" class="nextArrowBtn rotate180" width="62" height="62" viewBox="0 0 62 62" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="31" cy="31" r="31" fill="white"/><path d="M35.1102 21L45 31.0171L35.1102 41.0273" stroke="#EB6502" stroke-width="3" stroke-miterlimit="10"/><path d="M45 31.0176L16.949 31.0176" stroke="#EB6502" stroke-width="3" stroke-miterlimit="10"/></svg>',
        prevArrow: ' ',
        arrows: true,
        dots: false,
        infinite: true,
        slidesToShow: 3,
        slidesToScroll: 3
    });
});

function isInViewport() {
    const element = document.getElementById("last-slide");
    const rect = element.getBoundingClientRect();

    const isInViewport = rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
        rect.right <= (window.innerWidth || document.documentElement.clientWidth);

    let rSwipe = document.getElementById('right-swipe-arrow');
    rSwipe.classList.toggle('active');
};

Rotating the arrow button using following CSS -

.rotate180 {
    transition: transform .2s;
}

.rotate180.active {
    transform: rotateZ(180deg);
}
Amit Pathak
  • 1,145
  • 11
  • 26
  • 1
    You may not use built in arrows, do it another way. Create div with arrow and add click event listener to it. Make some variable clicked = false. Inside click make clicked = !clicked and use swiper.slidePrev() or swiper.slideNext() depending on that. – Taras Aug 27 '22 at 15:53
  • I am using `slick` and now `swiperJS`, sorry about that .. I assume something similar is possible in `slick` as well? – Amit Pathak Aug 27 '22 at 17:21

0 Answers0