Sign in to follow this  
Followers 0
GifStat

Карусель owlCarousel видимые элементы вертикально

1 post in this topic

Уважаемые знаток, подскажите как сделать перенос видимых элементов owlCarousel карусель? Пробовал колдовать с css стилями, но всё как-то безрезультатно.

9c0za.jpg.7aec228e3b9b2d38a79bb4da14f09555.jpg

 

Код

<link rel="stylesheet" href="/bootstrap-grid.min.css">
<link rel="stylesheet" href="/owl.carousel.min.css">
<script src="/owl.carousel.js"></script>
<script src="/owl.autoplay.js"></script>


    <ul id="simple" class="owl-carousel" >

            <li class="item col-md-12">
                  <div class="image">
                <a href="#"><img src="/upload/img.jpg" title="Потолок ледяной, дверь скрипучая" alt="Потолок ледяной, дверь скрипучая"  /></a>
                  </div>
               <div class="info"><a href="#">Название</a></div>
            </li>

            <li class="item col-md-12">
                  <div class="image">
                <a href="#"><img src="/upload/img.jpg" title="Потолок ледяной, дверь скрипучая" alt="Потолок ледяной, дверь скрипучая"  /></a>
                  </div>
               <div class="info"><a href="#">Название</a></div>
            </li>

            <li class="item col-md-12">
                  <div class="image">
                <a href="#"><img src="/upload/img.jpg" title="Потолок ледяной, дверь скрипучая" alt="Потолок ледяной, дверь скрипучая"  /></a>
                  </div>
               <div class="info"><a href="#">Название</a></div>
            </li>

            <li class="item col-md-12">
                  <div class="image">
                <a href="#"><img src="/upload/img.jpg" title="Потолок ледяной, дверь скрипучая" alt="Потолок ледяной, дверь скрипучая"  /></a>
                  </div>
               <div class="info"><a href="#">Название</a></div>
            </li>


            </ul>


<script>
var owl = $('.owl-carousel');
owl.owlCarousel({
    items:2,
    loop:true,
    margin:0,
    autoplay:true,
    autoplayTimeout:2800,
    autoplayHoverPause:true
});
$('.play').on('click',function(){
    owl.trigger('play.owl.autoplay',[2800])
})
$('.stop').on('click',function(){
    owl.trigger('stop.owl.autoplay')
})

</script>

<style type="text/css">
    aside  #simple {
        margin: 0;
    }

    section #simple {
        margin-left: -5px;
    }

    #simple li {
        list-style: none;
    }

    #simple .image img {
        height: 120px;
    }

   aside #simple .col-md-12 {
        padding-left: 0;
        padding-right: 0;
    }

    section #simple .col-md-12 {
        padding-right: 0;
    }

</style>

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0

  • Recently Browsing   0 members

    No registered users viewing this page.