Как сделать слайдер-карусель блоков в данном примере?

Question

[Taron4uk]

Подскажите, пожалуйста, как сделать карусель по дням недели, чтобы можно было нажать на кнопки снизу для перелистывания следующего дня?
Буду очень благодарен. Никак не получается сделать.

Comments

[FeST1VaL]

А в чем проблема? что именно не получается? Первый слайд (понедельник) внутри него блюда привязанные к понедельнику, дальше Вторник итд...

Или вы пытаетесь каждое блюдо сделать элементом карусели?

Answer 1

[Alams Stoyne]

Например есть слайдер Slick а разметку я бы сделал примерно так:

<div class="slider slick">
    <div>
        <h3>Понедельник</h3>
        <div class="d-flex">
            <div><img src="" alt=""><p>Блюдо 1</p></div>
            <div><img src="" alt=""><p>Блюдо 2</p></div>
            <div><img src="" alt=""><p>Блюдо 3</p></div>
            <div><img src="" alt=""><p>Блюдо 4</p></div>
            <div><img src="" alt=""><p>Блюдо 5</p></div>   
        </div>
    </div>
    <div>
        <h3>Вторник</h3>
        <div class="d-flex">
            <div><img src="" alt=""><p>Блюдо 1</p></div>
            <div><img src="" alt=""><p>Блюдо 2</p></div>
            <div><img src="" alt=""><p>Блюдо 3</p></div>
            <div><img src="" alt=""><p>Блюдо 4</p></div>
            <div><img src="" alt=""><p>Блюдо 5</p></div>   
        </div>
    </div>
    ...
    <div>
        <h3>Воскресение</h3>
        <div class="d-flex">
            <div><img src="" alt=""><p>Блюдо 1</p></div>
            <div><img src="" alt=""><p>Блюдо 2</p></div>
            <div><img src="" alt=""><p>Блюдо 3</p></div>
            <div><img src="" alt=""><p>Блюдо 4</p></div>
            <div><img src="" alt=""><p>Блюдо 5</p></div>   
        </div>
    </div>
</div>