Как сверстать данный слайдер, слева текст, а справа картинка?

Question

[olya_097]

Comments

[Александр]

Сверстать или написать на js? js - это не верстка

[Dymok]

Может быть, стоит задать картинку фоном, а текст ограничить по ширине? Если подойдет такой вариант, то слайдер можно брать любой готовый - slick, owl carousel 2 и др

[olya_097]

Dymok, а если к примеру буду брат слик, то как сделать что текст был прижат к левому краю, а картинка к правому? использовать флексы?

[Dymok]

olya_097, дак я же предлагаю картинку задать с помощью background, а текст можно просто ограничить по ширине в процентах

[Ankhena]

olya_097, какая разница слик, owl, чистый CSS или любая другая реализация смены слайдов.
У вас элементы располагаются внутри контейнера-слайда и вы можете располагать элементы в нем как захотите. Куда спозиционируете текст и картинку, там и будут.

А еще там текст заходит на картинку, а не слева/справа ;)

[olya_097]

Ankhena, так а если картинку сделать бэграундомб, а текст просто просто вставить

нормальный вариант?

[Ankhena]

olya_097, вполне

[olya_097]

а беграунду нужно ж дать background-position: right top; ?

Answer 1

[Eugene Chefranov]

Answer 2

[Матвей Феникс]

Используй любую библиотеку слайдеров, к примеру эту https://owlcarousel2.github.io/OwlCarousel2/
В ней можно сделать блоки, какие тебе нужны, в блоке слайдера, к примеру так:

<div class="owl-carousel">
  <div><div>Текст</div><div>Картинка</div></div>
</div>

Comments

[olya_097]

а как выровнять?дисплей флекс?

[Матвей Феникс]

В настройках слайдера можно указать размеры (количество слайдов на странице = 1), а после уже верти этим элементом как хочешь. Самый простой способ выровнять - конечно да, flexbox.

[olya_097]

Матвей Феникс, а он будет адаптивным?

[Eugene Chefranov]

olya_097, как сверстаете так и будет

[olya_097]

Eugene Chefranov, троль

[Eugene Chefranov]

olya_097, в смысле? В хотите чудо-слайдер который за вас сделает адаптив?

[Eugene Chefranov]

И такой слайдер делается за 5 мин

[Матвей Феникс]

Owl-carousel - адаптивный слайдер.

[olya_097]

Eugene Chefranov, спасибо