Уже голову сломал всю, вроде бы кажется элементарно, но я что-то не могу понять как оно правильно будет.
Вот HTML:
<!-- Start Slider One-->
<div class="g__slider">
<div class="g__slide">
<div class="g__slide-bg" style="background-image: url(img/g__slidebg.jpg);"></div>
<div class="g__slide-content">
<div class="container">
<div class="row">
<div class="col-md-12 col-md-offset-1">
<div class="row">
<div class="col-md-6">
<div class="g__slide-right">
<img src="img/g__logoslide.png" alt="">
<ul>
<li><img src="img/g__circle-slider-yellow.png" alt="" class="g__cirle-yellow"> Обшырный спектр услуг по очистке канализаций</li>
<li><img src="img/g__circle-slider-yellow.png" alt="" class="g__cirle-yellow"> Профессиональные специалисты в своей сфере</li>
<li><img src="img/g__circle-slider-yellow.png" alt="" class="g__cirle-yellow"> Современная профессиональная техника</li>
<li><img src="img/g__circle-slider-yellow.png" alt="" class="g__cirle-yellow"> Самые выгодные цены по Одессе и Украине</li>
</ul>
</div>
</div>
<div class="col-md-6">
<div class="g__slide-left">
<img src="img/g__slider-rothen.png" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="g__slide">
<div class="g__slide-bg" style="background-image: url(img/g__slidebg.jpg);"></div>
<div class="g__slide-content">
<div class="container">
<div class="row">
<div class="col-md-12 col-md-offset-1">
<div class="row">
<div class="col-md-6">
<div class="g__slide-right">
<img src="img/g__logoslide.png" alt="">
<ul>
<li><img src="img/g__circle-slider-yellow.png" alt="" class="g__cirle-yellow"> 2 Обшырный спектр услуг по очистке канализаций</li>
<li><img src="img/g__circle-slider-yellow.png" alt="" class="g__cirle-yellow"> 2 Профессиональные специалисты в своей сфере</li>
<li><img src="img/g__circle-slider-yellow.png" alt="" class="g__cirle-yellow"> 2 Современная профессиональная техника</li>
<li><img src="img/g__circle-slider-yellow.png" alt="" class="g__cirle-yellow"> 2 Самые выгодные цены по Одессе и Украине</li>
</ul>
</div>
</div>
<div class="col-md-6">
<div class="g__slide-left">
<img src="img/g__slider-rothen.png" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="g__slide">
<div class="g__slide-bg" style="background-image: url(img/g__slidebg.jpg);"></div>
<div class="g__slide-content">
<div class="container">
<div class="row">
<div class="col-md-12 col-md-offset-1">
<div class="row">
<div class="col-md-6">
<div class="g__slide-right">
<img src="img/g__logoslide.png" alt="">
<ul>
<li><img src="img/g__circle-slider-yellow.png" alt="" class="g__cirle-yellow"> 3 Обшырный спектр услуг по очистке канализаций</li>
<li><img src="img/g__circle-slider-yellow.png" alt="" class="g__cirle-yellow"> 3 Профессиональные специалисты в своей сфере</li>
<li><img src="img/g__circle-slider-yellow.png" alt="" class="g__cirle-yellow"> 3 Современная профессиональная техника</li>
<li><img src="img/g__circle-slider-yellow.png" alt="" class="g__cirle-yellow"> 3 Самые выгодные цены по Одессе и Украине</li>
</ul>
</div>
</div>
<div class="col-md-6">
<div class="g__slide-left">
<img src="img/g__slider-rothen.png" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End Slider One-->
Вот CSS код:
.g__slider
.g__slide
position: relative
color: #fff
width: 100%
&-wrap
float: left
&-bg
position: absolute
background-size: cover
top: 0
left: 0
right: 0
bottom: 0
min-height: 620px
&::before
content: ''
background-color: #292929
top: 0
left: 0
width: 100%
height: 100%
position: absolute
opacity: 0.85
&-content
z-index: 1
position: relative
&-right
padding-top: 225px
&-left
padding-top: 96px
margin-left: -45px
ul, li
list-style-type: none
padding: 0
li
font-size: 18px
font-weight: 700
Вот настройки JS самой owlCarousel:
var owl = $(".g__slider");
owl.owlCarousel({ items : 1, nav : true, navText : "", loop : true, autoplay : true, autoplayHoverPause : true, fluidSpeed : 3000, autoplaySpeed : 3000, navSpeed : 3000, dotsSpeed : 3000, dragEndSpeed : 3000, itemClass: "g__slide-wrap" });
$(".next").click(function(){ owl.trigger('next.owl.carousel') }), $(".prev").click(function(){ owl.trigger('prev.owl.carousel') });
В итоге я получаю вот что: