Splide JS - определить, когда активен последний слайд

У меня есть слайдер SplideJS с несколькими слайдами. Мне нужно выполнить действие, когда активен последний ползунок.

Я проверяю документацию, но не нашел никаких упоминаний о такого рода событиях, поэтому пишу сценарий для достижения этой цели, но мне нужна помощь.

Мой код:

// Class for each slide
const splideSlide = document.querySelector('.splide__slide')

// Check if a next element sibling is available
if (splideSlide.nextElementSibling === undefined) {
        console.info("On last, I call aother action")
} else {
        console.info("Not last")
}

Доступно множество мероприятий, splidejs.com/guides/events/#event-list - active, вероятно, то, на которое вам стоит обратить внимание.

— 07.03.2024 11:51

javascript splidejs

07.03.2024 11:30

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

458

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Учитывая то, что @CBroe упомянул в комментариях, active может вам подойти.

const maxSlideIndex = document.querySelectorAll("li.splide__slide").length - 1;
secondarySlider = new Splide( '#example', {
    perPage    : 1,
    perMove    : 1,
    focus      : 'center',
    trimSpace  : false,
    autoWidth: true,
} ).mount();

secondarySlider.on("active",function(e){
  if (e.index === maxSlideIndex) {
    console.info("I'm the last one!");
  }
});

#example {
  max-width: 650px;
}

<link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/@splidejs/[email protected]/dist/css/splide.min.css">
<script src = "https://cdn.jsdelivr.net/npm/@splidejs/[email protected]/dist/js/splide.min.js"></script>
<div id = "example" class = "splide">
  <div class = "splide__track">
    <ul class = "splide__list">
      <li class = "splide__slide"><img src = "https://placehold.co/600x400/EEE/FF343C" alt = "Sample Image 01"></li>
      <li class = "splide__slide"><img src = "https://placehold.co/600x400/EEE/3FF43C" alt = "Sample Image 02"></li>
      <li class = "splide__slide"><img src = "https://placehold.co/600x400/AAA/31FF3C" alt = "Sample Image 03"></li>
      <li class = "splide__slide"><img src = "https://placehold.co/600x400/EEE/313FFC" alt = "Sample Image 04"></li>
      <li class = "splide__slide"><img src = "https://placehold.co/600x400/AAA/3134FF" alt = "Sample Image 05"></li>
      <li class = "splide__slide"><img src = "https://placehold.co/600x400/EEE/F1343F" alt = "Sample Image 06"></li>
    </ul>
  </div>
</div>

Первое, что я делаю, это получаю максимальное значение индекса, чтобы знать, какой слайд последний. Это можно было сделать другими способами (например, li.splide__slide:nth-child и затем получить его индекс).

Затем, после инициализации слайдера Splide, я подключаю активный прослушиватель событий и проверяю, совпадает ли индекс текущего активного слайда с индексом последнего li.splide__slide.

07.03.2024 18:58

Другие вопросы по теме

Карусель несовместима с лайтбоксом: лайтбокс неправильно подсчитывает количество изображений

JQuery Splide, адаптивная высота на основе изображения

React Splide Carousel показывает следующее изображение, пока вы не дойдете до последнего слайда

Splide.js получает идентификатор слайда при перемещении события

Как исправить: [splide] Отсутствует элемент дорожки/списка

Текст нельзя выбрать, и это вызывает проблемы с SEO

Опция splide js pauseOn Hover не действует

JS Клонирование элемента html приводит к потере исходного элемента

Точки останова в слайдере js не работают

Отображать частичные ползунки/боковые отступы с помощью слайда

Splide JS - определить, когда активен последний слайд

Ответы 1

Другие вопросы по теме

Похожие вопросы