猫头鹰旋转木马上的重叠幻灯片答案

【问题标题】：Overlap Slides on Owl Carousel猫头鹰旋转木马上的重叠幻灯片
【发布时间】：2020-04-04 21:43:50
【问题描述】：

我正在研究这个滑块，其设计如下：

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

有谁知道我如何使用 owl carousel 获得这种效果？

我的代码如下：

$('.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>

你能帮我解决这个问题吗？非常感谢您的帮助。提前致谢！

【问题讨论】：

标签： javascript jquery html css owl-carousel

【解决方案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>

【讨论】：

非常感谢！有什么办法我仍然可以将所选图像与opacity:1; 保持在页面的中心位置？

【解决方案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
    }
  }
});

【讨论】：