CODEWITHSUNDEEP
javascriptjqueryswiper.js
Cheizer
Cheizer

Reputation: 151

As in swiper slide, make an active link only for the active slide?

Friends, please tell me how to make the link active, only in the active slide? And in about everyone else, hide her.

https://codepen.io/Cheizer/pen/OJLWREZ

var s6 = new Swiper('.swiper-container', {
       spaceBetween: 10,
        slidesPerView: 'auto',
        slideToClickedSlide: true,
        navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
      pagination: {
    el: '.swiper-pagination',
    type: 'bullets',
         clickable: true,
  }, 
});

var el = $('.swiper-container .swiper-slide');

 $(el).each(function(i,el) {

if($(this).activeIndex){

$('a').show();

}else{

$('a').hide();

}

 });

Doing so doesn't work :(

Upvotes: 0

Views: 5446

Answers (2)

mike
mike

Reputation: 67

I had adapted the answer so instead of hiding and showing the anchor tag it changes the tabIndex value of the current slide to 1.

My problem was that as soon as I made the carousel loop it stopped working.

The solution was to change realIndex to activeIndex.

const swiperSlides = document.getElementsByClassName('swiper-slide')

s6.on('slideChange', function() {
  const otherSlides = swiperSlides
  for (let index = 0; index < swiperSlides.length; index++) {
    const element = swiperSlides[index];
    element.getElementsByTagName('a')[0].setAttribute("tabIndex", -1);
  }

  const linkElemCurrentSlide = swiperSlides[s6.activeIndex].getElementsByTagName('a')
  linkElemCurrentSlide[0].setAttribute("tabIndex", 1);
});

$('.swiper-slide a').on('click touchstart', function(e) {
 e.preventDefault();
});

    </script>

Upvotes: 0

Tom
Tom

Reputation: 369

You can do two things here:

  1. CSS way

    <style>
    .swiper-slide a {
        display:none
    }
    .swiper-slide.swiper-slide-active a {
      display:block
    }

</style>

  2. JS way

To find which slide has changed you can use following

mySwiper.on('slideChange', function () {
  console.log(mySwiper.realIndex, 'slide changed');
});

All you have to do at this point is update a element inside that slide & update other slides to hide link. e.g. https://codepen.io/tsvecak/pen/abowYJW

Upvotes: 2

Related Questions