Как сделать такой же текстовый слайдер или как организовать правильно?

Question

[Lolut]

Чтоб было 6 блоков с текстом и картинкой и кнопкой вроде этого примера, можете пример привести или с чего начать то у меня полный тупик.

Answer 1

[Shadowman69]

Думаю плагин Slick Slider вполне справится с такой задачей, он прост. Смотрите здесь)))
Структура будет примерно следующей:

<div class="container">
            <div class="slider">
                <div class="slider_item">
                    Здесь Ваша разметка
                </div>
                <div class="slider_item">
                    Здесь Ваша разметка
                </div>
                <div class="slider_item">
                    Здесь Ваша разметка
                </div>
            </div>
        </div>

Джава скрипт будет выглядить примерно так:

$(document).ready(function() {
    $('.slider').slick({
        slidesToShow: 3,
        slidesToScroll: 1,
        infinite: true,
        dots: true
    });
});

Учтите, что этот плагин работает на основе jQuery, так что сначала подключите его. кружочки-переключатели можно кастомизировать.

Comments

[Lolut]

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

[y0u]

Lolut, точно так же как и с картинкой, какие проблемы? Вы не умеете верстать такой простой блок?

[Shadowman69]

Lolut, картинка это один div, текст второй, кнопку на картинку добавляете через position: absolute; диву с картинкой задайте position: relative; и центрируйте с помощью left, top, bottom, right. Эти два дива с картинкой и текстом должны быть в одном общем диве, который и будет иметь класс slider_item)