Модуль слайдеров (cybervela.sliders.js)

Обзор

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

Структура модуля

Основные классы

1. Slider - Класс для управления отдельным слайдером
2. sliders - Главный класс для управления всеми слайдерами на странице

Класс `Slider`

Конструктор

constructor(core, props = {})

Параметры:

• core - Основной объект приложения
• props - Объект с настройками слайдера
  • e - DOM элемент слайдера
  • id - Уникальный идентификатор слайдера

Пример использования:

const sliderInstance = new Slider(core, {
  e: document.querySelector('.slider'),
  id: 'my-slider'
});

Свойства

• core - Основной объект приложения
• e - DOM элемент слайдера
• items - Коллекция слайдов (jQuery объект)
• current - Индекс текущего активного слайда
• id - Уникальный идентификатор слайдера
• indicators - Коллекция индикаторов (jQuery объект)

Методы

`createNav()`

Создает элементы навигации (кнопки "вперед" и "назад").

createNav() {
  let prev = jQuery('<div/>', {
    class: 'prev control icon-previous2',
  });

  let next = jQuery('<div/>', {
    class: 'next control icon-next2',
  });

  jQuery(this.e).append(prev, next);
}

Создаваемые элементы:

• .prev.control.icon-previous2 - кнопка "назад"
• .next.control.icon-next2 - кнопка "вперед"

`createIndicators()`

Создает индикаторы для каждого слайда.

createIndicators() {
  let indicators = jQuery('<div/>', {
    class: 'indicators',
  });

  this.items.each(function (i) {
    let indicator = jQuery('<div/>', {
      class: 'indicator',
    });

    indicators.append(indicator);
  });
  jQuery(this.e).append(indicators);
  this.indicators = jQuery(this.e).find('.indicator');
}

`attachEvents()`

Привязывает обработчики событий к элементам управления.

attachEvents() {
  jQuery(this.e).on('click', '.next', () => this.next());
  jQuery(this.e).on('click', '.prev', () => this.prev());
  jQuery(this.e).on('click', '.indicator', (event) => {
    const index = jQuery(event.currentTarget).index();
    this.goTo(index);
  });
}

`next()`

Переключает на следующий слайд.

next() {
  this.current = (this.current + 1) % this.items.length;
  this.update('next');
}

`prev()`

Переключает на предыдущий слайд.

prev() {
  this.current = (this.current - 1 + this.items.length) % this.items.length;
  this.update('prev');
}

`update(direction)`

Обновляет отображение слайдера.

update(direction) {
  this.items.hide().eq(this.current).fadeIn(300);
  this.indicators.removeClass('active').eq(this.current).addClass('active');
}

`goTo(index)`

Переключает на слайд по указанному индексу.

goTo(index) {
  if (index >= 0 && index < this.items.length) {
    this.current = index;
    this.update('goto');
  }
}

Класс `sliders`

Конструктор

constructor(core)

Параметры:

• core - Основной объект приложения

Свойства

• instances - Объект с экземплярами слайдеров (ключ - ID слайдера)

Методы

`init()`

Инициализирует все слайдеры на странице.

init() {
  jQuery.each(jQuery('.slider'), (i, val) => {
    let id = jQuery(val).attr('id');
    if (!id) {
      id = 'slider_' + this.core.uniqid();
      jQuery(val).attr('id', id);
    }
    if (!this.instances[id]) {
      let instance = new Slider(this.core, { id: id, e: val });
      this.instances[id] = instance;
    }
  });
}

`update()`

Обновляет все слайдеры на странице.

update() {
  this.init();
}

HTML структура

Базовый слайдер

<div class="slider" id="my-slider">
  <div class="item">
    <img src="slide1.jpg" alt="Слайд 1">
  </div>
  <div class="item">
    <img src="slide2.jpg" alt="Слайд 2">
  </div>
  <div class="item">
    <img src="slide3.jpg" alt="Слайд 3">
  </div>
</div>

Примеры использования

1. Инициализация слайдеров на странице

// В основном файле приложения
import { sliders } from './cybervela.sliders.js';

const core = {
  uniqid: function() {
    return Math.random().toString(36).substr(2, 9);
  }
};

// Инициализация всех слайдеров на странице
const slidersInstance = new sliders(core);

2. Создание кастомного слайдера

// Создание отдельного экземпляра слайдера
const customSlider = new Slider(core, {
  e: document.querySelector('#my-custom-slider'),
  id: 'custom-slider'
});

// Программное переключение слайдов
customSlider.next(); // Следующий слайд
customSlider.prev(); // Предыдущий слайд
customSlider.goTo(2); // Перейти к слайду с индексом 2

Особенности реализации

1. Автоматическая инициализация

Модуль автоматически находит и инициализирует все элементы с классом .slider на странице.

2. Уникальные идентификаторы

Каждому слайдеру автоматически присваивается уникальный ID, если он не указан.

3. Зацикленная навигация

Слайдер работает по принципу карусели - после последнего слайда идет первый, и наоборот.

4. Плавные переходы

Используется jQuery fadeIn/fadeOut для плавных переходов между слайдами.