Как лучше всего реализовать слайдер для разных кнопок?

Question

[Максим]

Здравствуйте.
Имеется n количество блоков с разными категориями (шорты, футболки, джинсы и т.п.).
У каждого блока есть кнопка "Посмотреть", которая выводит по центру экрана div со sliderом категории поверх всего (слева слайдер с одеждой, а справа описание). Как лучше всего реализовать множество слайдеров для разных категорий.
Я сталкивался с проблемой, когда все слайдеры в коде объединялись между собой и, например, вместо одних футболок, сплошняком шло все подряд при пролистывании слайдера (шорты, кепки и т.д.).

Answer 1

[approximate solution]

Если верно вас понял:

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

shorts
    <div class="slider shorts__slider"            ---//независимый компонент + модификатор
        button = class button shorts__button        --//независимый компонент + модификатор

shorts__slider в примере выше позволит манипулировать состоянием слайдера + размера, сам слайдер у вас может быть помещен куда угодно, и изменяться минимальными телодвижениями.

Comments

[Максим]

Можно пример с двумя разными блоками?

[approximate solution]

Максим,

<div class="slider">               -----//независимый slider // свои стили
    button class = button       -----//независимый button
</div>

shorts
    <div class="slider shorts__slider"            ---//независимый компонент 
                                                                    + модификатор(например изменяет размер)
        button = class button shorts__button       ---//независимый компонент 
                                                                    + модификатор(например изменяет размер)

jeans
    <div class="slider jeans__slider"            ---//независимый компонент 
                                                                    + модификатор(например изменяет размер)
        button = class button jeans__button       ---//независимый компонент 
                                                                    + модификатор(например изменяет размер)

Идея: у вас есть слайдер, который уже "готовый компонент", и вы можете изменять слайдер, или кнопку которая тоже отдельный компонент, в зависимости от того внутри какого родителя слайдер или кнопка находятся. Копируете компонент, изменяете внутри контент + стили с помощью модификатора.

[approximate solution]

Максим, + webmasters.teamdev.com
Изучите от начала и до конца.