How to find the last visible slide in Swiper JS

I got approached by one of my colleagues with the following requirement:

Find the last visible slide in a swiper instance and attach a class ‘last-slide’ to it so it can be styled differently.

My First Attempt

My first option was ChatGPT since I hear a lot of good things about it, plus I tried it earlier with a couple of requirements and it pretty much helped me. See the prompt I gave to ChatGPT and its answer.

Long story short, ChatGPT’s response returned undefined and it seems it didn’t understand my requirements very well.

The Solution

I found the following fiddle basic setup from Google. (Big thanks to os10)

The above fiddle doesn’t do much so I decided to improve it and achieve my goal.

First, I had to add the option watchSlidesVisibility: true to the swiper instance. That option basically adds the class .swiper-slide-visible to all slides (well, you guessed it right :), to all slides that are visible once the swiper is initialized.

Then, I created the following function (see the comments within the code):

function attachClasstoLastSlide(swiperElem, swiperInstance) { 
	var swiperElem = $(swiperElem),  //id or class of the the target swiper block
  		slides_visible = swiperElem.find('.swiper-slide-visible'),  //find all the slides with .swiper-slide-visible inside the swiperElem
      length_visible_slide = slides_visible.length; //get the number of visible slides
  
  slides_visible.each(function(index, item) { //loop through all the visible slides
  	slides_visible.removeClass('last-slide'); //remove the .last-slide class to any slide with that class, this basically resets it
    if (index == (length_visible_slide-1)) { //if the index of slide is equal to the length_visible_slide-1, then we found that slide that we're looking for
    	swiperElem.find('.swiper-slide-visible:eq('+index+')').addClass('last-slide'); //add the class .last-slide to it by using :eq()
    } 
  }); 
}

Then, using the event ‘transitionEnd‘, run the function we created. The first parameter should be the class or id of the swiper element block. The second one is the swiper instance.

swiper.on('transitionEnd', function() { 
	attachClasstoLastSlide('.swiper-1', swiper); 
}); 

At last, the above code worked, but there is one problem. It only works when you click the next and previous buttons. On init event, it doesn’t work.

The following code does the job. It’s basically running the function we created right after we created the swiper instance without depending on any swiper events.

attachClasstoLastSlide('.swiper-1', swiper); 

The Final Code

That’s all folks. Let me know in the comments below if you find any difficulty in using it to your projects.

If you have any Javascript requirements, do let me know by commenting down below.