How to center the images in the Owl Carousel

后端 未结 5 1264
隐瞒了意图╮
隐瞒了意图╮ 2021-02-04 00:10

My Owl Carousel contains pictures of different width and height. How do I align them in the middle - both horizontally and vertically?

相关标签:
5条回答
  • 2021-02-04 00:19

    With owl carousel version 2.1.1 and CSS3 Flexbox, just add the style:

    .owl-carousel .owl-stage {
      display: flex;
      align-items: center;
    }
    

    See the snippet:

    $( document ).ready( function() {
      $( '.owl-carousel' ).owlCarousel({
         autoplay: true,
         margin: 2,
         loop: true,
         responsive: {
            0: {
               items:1
            },
            200: {
               items:3
            },
            500: {
               items:4
            }
         }
      });
    });
    .owl-carousel .owl-stage {
      display: flex;
      align-items: center;
    }
    
    .owl-carousel .caption {
      text-align: center;
    }
    <link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css" rel="stylesheet"/>
    
    <div class="owl-carousel">
        <div class="item">
          <img src="http://lorempicsum.com/up/350/200/1">
          <div class="caption">Caption 1</div>
        </div>
        <div class="item">
          <img src="http://lorempicsum.com/up/255/200/2">
          <div class="caption">Caption 2</div>
        </div>
        <div class="item">
          <img src="http://lorempicsum.com/up/627/200/3">
          <div class="caption">Caption 3</div>
        </div>
        <div class="item">
          <img src="http://lorempicsum.com/up/627/300/4">
          <div class="caption">Caption 4</div>
        </div>
        <div class="item">
          <img src="http://lorempicsum.com/up/627/400/5">
          <div class="caption">Caption 5</div>
        </div>
        <div class="item">
          <img src="http://lorempicsum.com/up/255/200/6">
          <div class="caption">Caption 6</div>
        </div>
    </div>
    
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>

    0 讨论(0)
  • 2021-02-04 00:21
    1. The Owl Carousel creates additional blocks within your layout. To add CSS properties correctly, you need to work with this HTML structure:

      <div id="owl-demo" class="owl-carousel owl-theme">
        <div class="owl-wrapper-outer">
          <div class="owl-wrapper">
            <div class="owl-item">
              <div>
                <img src="" alt="">
              </div>
            </div>
            <div class="owl-item">
              <div>
                <img src="" alt="">
              </div>
            </div>
          </div>
        </div>
      </div>
      
    2. Moreover the carousel adds a style attribute to all blocks. For example, a block with the .owl-wrapper class receives the display property with the value of block. So you have to use an !important declaration in your CSS.

    3. To obtain a horizontal alignment, you can simply add text-align: center; property to each .owl-item > div.

    4. To align vertically, you can turn the carousel items in table cells. But do not forget to cancel the float property for them.

    screenshot

    Let us arrange all of the changes as a new .owl-centered class. Please check the result:

    https://codepen.io/glebkema/pen/BzgZxX

    $("#owl-example").owlCarousel({
      navigation: true
    });
    @import url('//cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css');
    @import url('//cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css');
    
    .owl-centered .owl-wrapper {
      display: table !important;
    }
    .owl-centered .owl-item {
      display: table-cell;
      float: none;
      vertical-align: middle;
    }
    .owl-centered .owl-item > div {
      text-align: center;
    }
    <div id="owl-example" class="owl-carousel owl-centered">
      <div><img src="//placehold.it/120x120/69c/fff/" alt=""></div>
      <div><img src="//placehold.it/200x200/c69/fff/" alt=""></div>
      <div><img src="//placehold.it/160x160/9c6/fff/" alt=""></div>
      <div><img src="//placehold.it/240x240/fc6/fff/" alt=""></div>
      <div><img src="//placehold.it/160x160/9c6/fff/" alt=""></div>
      <div><img src="//placehold.it/200x200/c69/fff/" alt=""></div>
      <div><img src="//placehold.it/120x120/69c/fff/" alt=""></div>
    </div>
    
    <script src="//code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>

    0 讨论(0)
  • 2021-02-04 00:23

    Another solution is to use flexbox with margin.

    .owl-stage-outer {
      display: flex;
      flex-wrap: nowrap;
      flex-direction: column;
    }
    .owl-stage-outer > .owl-stage {
      margin:0 auto;
    }
    
    0 讨论(0)
  • 2021-02-04 00:36

    This works for me:

    @media (max-width:500px) {
        .owl-carousel .owl-item {
            text-align:center;
        }
        .owl-carousel .item {
            float: none;
            display: inline-block;
        }
    }
    

    You might adjust it to your HTML though, but the idea is that you text-align a parent, and float:none and display:inline-block the child that holds the content, on mobile:

    0 讨论(0)
  • 2021-02-04 00:43

    The solution with display table is OK, but for me the divs on the right and left side slides out from the container. My code is close the same, I changed the table and table-cell to block and inline-block

    .owl-stage{
      display: block !important;
    }
    
    .owl-item{
      display: inline-block;
      float: none;
      vertical-align: middle;
    }
    
    .item{
      text-align: center;
    }
    

    The result (all images has different sizes):

    0 讨论(0)
提交回复
热议问题