Как разместить картинку слева, а текст справа?

Question

[Вячеслав]

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

Comments

[Максим Тимофеев]

Ну так покажите как пытались, я не вижу проблем. Мало того, тут он самой owl не зависит это. Она листает блоки, а как Вы их сверстаете ее не колышет.

[Вячеслав]

Максим Тимофеев,

[Сергей delphinpro]

Вячеслав, сверстайте отдельно блок — картинка слева, описание справа. С эти проблем не должно быть, если хоть чуть-чуть верстали. Потом весь этот блок запихивайте в карусель.

[Максим Тимофеев]

Вячеслав,
1. Кто код картинкой делает?
2. Судя по Вашему коду картинка должна быть сверху текст снизу. С чего Вы решили что будет иначе? И при чем тут owl? Вы не знаете как верстать совсем?

[Вячеслав]

Сергей delphinpro, сверстал



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

[Вячеслав]

Да вот учусь на курсах фронт-енд, но практики у нас крайне мало. Приходится почти все самостоятельно осваивать. Я уже к item и флексы применял и флоаты.

Answer 1

[leni_m]

owl-carousel никак не влияет, сделайте блоки как вам надо и запихивайте их в слайдер.

Answer 2

[Вячеслав]

Запихать то я запихал, но вот что получается.

Comments

[leni_m]

хммм я чего-то не понимаю, для установки этого слайдера нужен js и css файлы.
Далее надо обозначить контейнер для слайдера и сами слайды:

<div class="owl-carousel"> // называем так, чтобы применялись стили из css файла
    ... // тут ваши слайды
</div>

Далее должен быть подключен jquery
и написан скрипт:

$(document).ready(function(){
  $(".owl-carousel").owlCarousel({...}); // вместо ... используйте параметры этого слайдера
});

Js сам создаст все блоки-обертки, которые вы вручную верстаете.
На сайте что я скинул есть вся документация и демо с параметрами, изучайте.
Или в чем вопрос? Как сверстать блок, чтобы картинка была слева, а текст справа?

[Вячеслав]

leni_m, все стандартные настройки я сделал. сам слайдер работает отлично, если просто картинки вставить. вся проблема в том, чтобы каждый item состоял из картинки слева и текста справа, которые будут листаться как единое целое. а у меня текст под картинкой получается. я и флексы пробовал к item применять и флоаты. фигня какая-то получается((

[leni_m]

Вячеслав, ну смотрите, у вас слайд состоит из левой и правой части, обозначим:

<div>
     <img class="left-block" />
     <div class=""right-block></div>
</div>

Правильно?
Разместим их в одну линию, например так:

.left-block, .right-block {
    display: inline-block; 
    height: 390px;
    width: 345px;
}

Но между нашими блоками будет небольшой пробел, если он мешает можно его убрать следующим образом:

<div>
     <img class="left-block" /><!--
     --><div class=""right-block></div>
</div>

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

[Вячеслав]

leni_m,



.owl-item {
display: flex;
}

.left-block, .right-block {
display: inline-block;
height: 390px;
width: 345px;
}

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

[leni_m]

мой вам совет, не прикасайтесь к стилям слайдера owl-всякая-хрень.
Вот сверстайте просто блок который хотите видеть в слайдере, без самого слайдера, и когда он будет готов, запихивайте его. А так вы походу свои стили пишете, стили слайдера изменяете и мешаете кашу. И управлять отображением уже через опции слайдера в самом js. Если тогда вас что-то не устраивает, можете прикасаться к .owl-...

[Вячеслав]

leni_m, спасибо, попробую)

[alekseydemyanenko]

омг
инлайн-блок(

.owl-item {
display: flex;
justify-content: space-around;
align-items: center;
}
.right-block {
height: 390px;(зачем? 0_о, паддинги маржины)
width: 100%;
max-width: 345px;
}