Как сделать слайдер с текстом сбоку?

Question

[spacekk]

Использую owl carousel для создания слайдера, в документации используются примеры с текстами, помещенными внутри картинки. Можно ли располагать текст слайда слева или справа от картинки? При переключении слайдера текст должен тоже изменяться.

Примерно так:

Answer 1

[spacekk]

Использовал slick slider

https://codepen.io/mahmoudzohdi/pen/WrOJPv

Answer 2

[Andrew]

Ну так поставьте текст и картинку внутри слайда, а дальше ,средствами css, стилизуйте, как хотите.

<div class='slider'>
<div class='slide'><p>Текст1</p><img src="1.jpg"></div>
<div class='slide'><p>Текст2</p><img src="2.jpg"></div>
<div class='slide'><p>Текст3</p><img src="3.jpg"></div>
</div>

Answer 3

[Александр]

Просто верстаете эту картинку( которую вы прикрепили) и делаете её слайдом. Тут изображение идёт как background-image, а текст с кнопкой это отдельный блок внутри слайда.

Answer 4

[Хороший UI]

c owl carousel не работал, юзаю бутстраповскую карусель, но принцип думаю похож
Просто внутри блока карусели верстаете что хотите
типо:

<div id="carousel">
img
h1
input
</div>

Вот примеры, где в карусели целые секции:
https://sohouser.github.io/animal/#pets
https://sohouser.github.io/halcyon/ (в этой вообще 3 карусели с разным содержимым)
https://sohouser.github.io/finance/ (а вот тут меняется только бэкграунд)