It is necessary that each content has its own content attached. enter image description here

The screen shows the block, you can see it on the site, uploaded ravtest1.site88.net here. I really hope for your help.

    1 answer 1

    var owl = $('.owl-carousel'); owl.owlCarousel({ items: 1, loop: true, margin: 10, nav: false, dots: true }) 
     * { box-sizing: border-box; } .owl-carousel .item { background: #4DC7A0; font-size: 0; } .b-slider-item { display: inline-block; vertical-align: top; width: 50%; font-size: 20px; text-align: center; padding: 0.5em; } .b-slider-item:nth-of-type(2) { background: #ccc; } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <link href="http://owlcarousel.owlgraphic.com/assets/owlcarousel/assets/owl.theme.default.min.css" rel="stylesheet"/> <link href="http://owlcarousel.owlgraphic.com/assets/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet"/> <script src="http://owlcarousel.owlgraphic.com/assets/owlcarousel/owl.carousel.js"></script> <div class="owl-carousel"> <div class="item"> <div class="b-slider-item">Img</div> <div class="b-slider-item">Content</div> </div> <div class="item"> <div class="b-slider-item">Img 2</div> <div class="b-slider-item">Content 2</div> </div> <div class="item"> <div class="b-slider-item">Img 3</div> <div class="b-slider-item">Content 3</div> </div> </div>

    • Thank you, kind man. - Alexander