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

Posted

技术标签:

【中文标题】猫头鹰旋转木马上的重叠幻灯片【英文标题】：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"  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"  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"  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"  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"  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"  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>

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

【问题讨论】：

【参考方案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"  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"  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"  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"  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"  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"  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://***.com/a/38821423/8591003

我基本上把选项改了如下图：

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

【讨论】：

以上是关于猫头鹰旋转木马上的重叠幻灯片的主要内容，如果未能解决你的问题，请参考以下文章

猫头鹰轮播：到达最后一张幻灯片时运行功能

javascript 最后一张幻灯片修复了旋转木马

为什么当旋转木马内部的某个元素被调用时，Bootstrap 4旋转木马暂停功能不起作用？

光滑的旋转木马移动导航点

Bootstrap轮播一次多个帧

如何制作中心更大的旋转木马？ （扑）