Already broke my head all, it seems to be elementary, but something I can not understand how it will be right.

Here is the 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-->

Here is the CSS code:

 .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

Here are the JS settings for owlCarousel itself:

 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 ')});

In the end, I get this:

enter image description here

  • one
    Such a bike for the slider - Mr. Black
  • Can you give a link? I want to see it. - Gleb Kemarsky

1 answer 1

I think you have just the elephant, which is necessary in pieces. Here is the first piece:

By default, bootstrap uses a 12-column layout. Therefore, the class col-md-12 stretches the block to the full width of the parent. And the class col-md-offset-1 pushes it one column to the right. Because of this, on screens from 992px, the right edge of the block is behind the screen.

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> <div class="container"> <div class="row"> <div class="col-md-12 col-md-offset-1"> <img src="//placehold.it/1600x400/c69/f9c/?text=Problem%20at%20992px" alt="" width="100%"> </div> </div> </div>