用Owl JS圈出图像滑块

Question

我有一个非常基本的布局

<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得到宽度？理想情况下，我需要在图像周围建模猫头鹰项目，或者给它一点填充，使其看起来像2个圆圈。

第二个问题是它似乎不喜欢我将替代图像放得更高。我试图以负余量顶部做到这一点，但它似乎没有做任何事情。

任何建议/帮助非常感谢。我给每个幻灯片项目一个背景颜色，这样我就可以看到图像在这里的样子。

非常感谢

Answer 1

你可以通过团队演示来检查这个基于OWL JS caraousel滑块的完整示例。

mysqladmin -u root password [newpassword]

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