How do you make a slider OWL Carousel with a content?



  • I need every slade to be tied to its content. введите сюда описание изображения

    The squeak shows the block, see it on the website, put it here. http://ravtest1.site88.net ♪ I really hope for your help.



  • 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>




Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2