带有 Owl JS 的圆形图像滑块答案

【问题标题】：circle image slider with Owl JS带有 Owl JS 的圆形图像滑块
【发布时间】：2017-09-30 23:34:42
【问题描述】：

我有一个非常基本的布局

<section id="team" class="section">
    <div class="container-fluid">
        <div class="team-carousel owl-carousel owl-theme">
          <div class="item"> <img src="https://pcm.ipreo.com/App_Themes/ILevel/infographic09092015/images-desktop/circle-person-01.png"></div>
          <div class="item higher"> <img src="https://pcm.ipreo.com/App_Themes/ILevel/infographic09092015/images-desktop/circle-person-01.png"></div>
          <div class="item"> <img src="https://pcm.ipreo.com/App_Themes/ILevel/infographic09092015/images-desktop/circle-person-01.png"></div>
          <div class="item higher"> <img src="https://pcm.ipreo.com/App_Themes/ILevel/infographic09092015/images-desktop/circle-person-01.png"></div>
          <div class="item"> <img src="https://pcm.ipreo.com/App_Themes/ILevel/infographic09092015/images-desktop/circle-person-01.png"></div>
        </div>
    </div>
</section>

我正在尝试制作一个使用圆形的全宽图像滑块。替代图像应放置在略高于其他图像的位置。我正在尝试制作类似以下的内容

我决定使用owl JS

我已经设法让一些元素到位，但与其他元素挣扎。这是我制作的JSFiddle。我想知道的第一件事是为什么 owl-item 有一个宽度？理想情况下，我需要在图像周围为 owl-item 建模，也许给它一点填充，使它看起来像 2 个圆圈。

第二个问题是它似乎不喜欢我将替代图像放在更高的位置。我试图以负边距顶部来执行此操作，但它似乎没有做任何事情。

非常感谢任何建议/帮助。我为每个幻灯片项设置了背景颜色，以便查看图片在其中的外观。

非常感谢

【问题讨论】：

标签： css twitter-bootstrap owl-carousel

【解决方案1】：

您可以查看这个基于 OWL JS caraousel 滑块和团队演示的完整示例。

$(function() {
  $('.owl-carousel.testimonial-carousel').owlCarousel({
    nav: true,
    navText: ['<i class="fa fa-chevron-left"></i>', '<i class="fa fa-chevron-right"></i>'],
    dots: false,
    responsive: {
      0: {
        items: 1,
      },
      750: {
        items: 2,
      }
    }
  });
});

https://codepen.io/anon/pen/qPXOVL

【讨论】：