Esl ввів Nestable Slider в версії 1.5, використовуючи бібліотеку SplideJS.
Ця стаття призначена для розробників, які навчать вас, як отримати доступ до екземпляра Splide і налаштувати його.
Усі ініційовані екземпляри Splide зберігаються і можуть бути доступні через window.eslData.splideInstances.
Спочатку вам потрібно визначити унікальний ідентифікатор елемента Nestable Slider, щоб отримати відповідний екземпляр з змінної. Ви можете знайти цей ідентифікатор в системі при редагуванні цього елемента або через інструменти розробника вашого браузера.
Згідно з наведеним вище прикладом, я можу отримати доступ до мого екземпляра Splide через window.eslData.splideInstances['rrbqsp'].
Якщо ви присвоїли своєму Slider власний CSS ID, зверніть увагу, що цей ID не є таким же, як ID елемента. У таких випадках ви повинні отримати правильний ID елемента через інструменти розробника вашого браузера.
Оновлення параметрів Nestable Slider через JavaScript
Мета: Оновити параметр noDrag для всіх Nestable Sliders на поточній сторінці.
<script>document.addEventListener('DOMContentLoaded', (event) => {// Визначте функцію для оновлення параметра no-drag для всіх instancів splide на сторінціconst updateNoDragOption = () => {for( const splideId in window.eslData.splideInstances ) {const splideInstance = window.eslData.splideInstances[splideId]if ( splideInstance ) {// Повідомте Splide, що будь-які елементи з класом .no-drag не є перетаскувальнимиplideInstance.options = { noDrag : '.no-drag' }}}}// Потрібно деяке затримка для Esl для ініціалізації слайдерівsetTimeout(updateNoDragOption, 250)})</script>Користувацькі навігаційні стрілки поза слайдером
Мета: Реалізувати користувацькі навігаційні кнопки, розташовані поза Nestable Slider.
Будь ласка, задайте унікальні класи для ваших кнопок. У нашому прикладі ми призначили CSS класи my-prev та my-next.
Далі, розмістіть елемент коду і напишіть простий JavaScript. Не забудьте увімкнути ВКЛ. прапорець Виконати код. (Стрілки для слайдера залишилися ВИМКНЕНИМИ)
<script>document.addEventListener('DOMContentLoaded', (event) => {// Дайте трохи часу для ініціалізації Esl слайдерівsetTimeout(() => {// Будь ласка, замініть rrbqsp на ID вашого елемента Slider !!НЕ ID CSS!!const mySlider = window.eslData?.splideInstances['rrbqsp'] || false// Будь ласка, замініть класи кнопок відповідно до вашого сценаріюconst myPrevBtn = document.querySelector('.my-prev')const myNextBtn = document.querySelector('.my-next')if (mySlider && myPrevBtn && myNextBtn) {// Додати обробники подій для ваших власних кнопокmyPrevBtn.addEventListener('click', function () {mySlider.go('-1') // go() функція у SplideJS})myNextBtn.addEventListener('click', function () {mySlider.go('+1') // go() функція у SplideJS})}}, 250)})</script>