Question

我正在设计以下滑块：

到目前为止，我已经尝试使用负边距以及使用CSS的翻译来获得这种效果。

有人知道我如何使用猫头鹰轮播获得这种效果吗？

我的代码如下：

$('.owl-carousel').owlCarousel({
  center: true,
  loop: true,
  margin: 0,
  responsive: {
    320: {
      items: 1,
      stagePadding: 70
    },
    600: {
      items: 4
    }
  }
});

.carousel-container .owl-item.center .continent-img-container img {
  opacity: 1;
  padding: 0;
}

.carousel-container .owl-item.center .continent-text-container {
  opacity: 1;
}

.carousel-container .owl-item.center .continent-text-container h2 {
  color: #2B8088;
  font-size: 1.625rem;
  font-family: 'Agenda';
}

.carousel-container .owl-item .continent-img-container img {
  opacity: 0.5;
  border-radius: 100px;
}

.carousel-container .owl-item .continent-text-container {
  opacity: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<head>
  <!-- plugin stylesheets -->
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" />
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" />
  <!-- end plugin stylesheets -->
</head>

<body>
  <div class="carousel-container">
    <div class="owl-carousel">

      <div class="carousel-card">
        <div class="continent-img-container">
          <img src="https://via.placeholder.com/150" alt="" class="img-fluid mx-auto" id=".Africa">
        </div>
        <div class="continent-text-container">
          <h2>Africa</h2>
          <p>(Argentina, Brazil, Colombia, Uruguay, etc)</p>
        </div>
      </div>

      <div class="carousel-card">
        <div class="continent-img-container">
          <img src="https://via.placeholder.com/150" alt="" class="img-fluid mx-auto" id=".Asia">
        </div>
        <div class="continent-text-container">
          <h2>Asia/Middle East</h2>
          <p>(Japan, China, Brunei, Korea, etc)</p>
        </div>
      </div>

      <div class="carousel-card">
        <div class="continent-img-container">
          <img src="https://via.placeholder.com/150" alt="" class="img-fluid mx-auto" id=".Europe">
        </div>
        <div class="continent-text-container">
          <h2>Europe</h2>
          <p>(Germany, Russia, Spain, Scotland, etc)</p>
        </div>
      </div>

      <div class="carousel-card">
        <div class="continent-img-container">
          <img src="https://via.placeholder.com/150" alt="" class="img-fluid mx-auto" id=".North America">
        </div>
        <div class="continent-text-container">
          <h2>North America</h2>
          <p>(Canada, The USA, etc)</p>
        </div>
      </div>

      <div class="carousel-card">
        <div class="continent-img-container">
          <img src="https://via.placeholder.com/150" alt="" class="img-fluid mx-auto" id=".Oceania">
        </div>
        <div class="continent-text-container">
          <h2>Australia/Oceania</h2>
          <p>(Australia, Kiribati, Guam, Vanuatu, etc)</p>
        </div>
      </div>

      <div class="carousel-card">
        <div class="continent-img-container">
          <img src="https://via.placeholder.com/150" alt="" class="img-fluid mx-auto" id=".South America">
        </div>
        <div class="continent-text-container">
          <h2>South America</h2>
          <p>(Argentina, Brazil, Colombia, Uruguay, etc)</p>
        </div>
      </div>

    </div>
  </div>

  <!-- plugin scripts -->

  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
  <!-- end plugin scripts -->
</body>

您能帮我吗？非常感谢您的帮助。预先感谢！

Answer 1

您需要将owl-item类指定为相对位置，并且可以使用负边距。

$('.owl-carousel').owlCarousel({
  center: true,
  loop: true,
  margin: 0,
  responsive: {
    320: {
      items: 1,
      stagePadding: 70
    },
    600: {
      items: 4
    }
  }
});

.carousel-container .owl-item.center .continent-img-container img {
  opacity: 1;
  padding: 0;
}

.carousel-container .owl-item.center .continent-text-container {
  opacity: 1;
}

.carousel-container .owl-item.center .continent-text-container h2 {
  color: #2B8088;
  font-size: 1.625rem;
  font-family: 'Agenda';
}

.carousel-container .owl-item .continent-img-container img {
  opacity: 0.5;
  border-radius: 100px;
}

.carousel-container .owl-item .continent-text-container {
  opacity: 0;
}

.owl-stage .owl-item{
    margin-left: -10px;
    margin-right: -10px;
    position: relative;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<head>
  <!-- plugin stylesheets -->
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" />
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" />
  <!-- end plugin stylesheets -->
</head>

<body>
  <div class="carousel-container">
    <div class="owl-carousel">

      <div class="carousel-card">
        <div class="continent-img-container">
          <img src="https://via.placeholder.com/150" alt="" class="img-fluid mx-auto" id=".Africa">
        </div>
        <div class="continent-text-container">
          <h2>Africa</h2>
          <p>(Argentina, Brazil, Colombia, Uruguay, etc)</p>
        </div>
      </div>

      <div class="carousel-card">
        <div class="continent-img-container">
          <img src="https://via.placeholder.com/150" alt="" class="img-fluid mx-auto" id=".Asia">
        </div>
        <div class="continent-text-container">
          <h2>Asia/Middle East</h2>
          <p>(Japan, China, Brunei, Korea, etc)</p>
        </div>
      </div>

      <div class="carousel-card">
        <div class="continent-img-container">
          <img src="https://via.placeholder.com/150" alt="" class="img-fluid mx-auto" id=".Europe">
        </div>
        <div class="continent-text-container">
          <h2>Europe</h2>
          <p>(Germany, Russia, Spain, Scotland, etc)</p>
        </div>
      </div>

      <div class="carousel-card">
        <div class="continent-img-container">
          <img src="https://via.placeholder.com/150" alt="" class="img-fluid mx-auto" id=".North America">
        </div>
        <div class="continent-text-container">
          <h2>North America</h2>
          <p>(Canada, The USA, etc)</p>
        </div>
      </div>

      <div class="carousel-card">
        <div class="continent-img-container">
          <img src="https://via.placeholder.com/150" alt="" class="img-fluid mx-auto" id=".Oceania">
        </div>
        <div class="continent-text-container">
          <h2>Australia/Oceania</h2>
          <p>(Australia, Kiribati, Guam, Vanuatu, etc)</p>
        </div>
      </div>

      <div class="carousel-card">
        <div class="continent-img-container">
          <img src="https://via.placeholder.com/150" alt="" class="img-fluid mx-auto" id=".South America">
        </div>
        <div class="continent-text-container">
          <h2>South America</h2>
          <p>(Argentina, Brazil, Colombia, Uruguay, etc)</p>
        </div>
      </div>

    </div>
  </div>

  <!-- plugin scripts -->

  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
  <!-- end plugin scripts -->
</body>

Answer 2

我在以下帖子中找到了答案：

https://stackoverflow.com/a/38821423/8591003

我基本上更改了选项，如下所示：

$('.owl-carousel').owlCarousel({
  center: true,
  loop: true,
  margin: -50,
  responsive: {
    320: {
      items: 1,
      stagePadding: 70
    },
    600: {
      items: 4
    }
  }
});

猫头鹰轮播上的重叠幻灯片

2 个答案: