Question

我目前正在撰写一个单页网站，我想为我的团队部分添加一个轮播/滑块来滑入和滑出员工。工作人员位于响应卡中。我希望滑块看起来像来自此网站的＆＃34;合作伙伴＆＃34; -section中的滑块：https://madeby.google.com/intl/de_de/home/，但我无法弄清楚他们是如何在此网站上做到的，而我＆＃ 39;已经搜索了类似的东西。

有人能为我提供类似的剧本或想法吗？

提前谢谢你，F9lke

Answer 1

尝试http://kenwheeler.github.io/slick/

它有一个自动播放选项...并且使用css，你可以使底部的条形填满。

编辑：查看页面的来源，似乎带滑块的页面实际上使用了光滑。

Answer 2

我更喜欢使用Flickity：https://flickity.metafizzy.co/

它有很多选项和事件。您可能可以调整这些选项达到所需的行为。

Answer 3

尝试Slick Carousel使用其自动播放选项。

＆＃13;

$(document).ready(function(){
  $('.autoplay').slick({
    slidesToShow: 2,
    slidesToScroll: 1,
    autoplay: true,
    autoplaySpeed: 1500,
  });
});

＆＃13;

.doc-content
{
  margin: 0 7px;
  border: 1px solid black;
  background: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT93-yg0fIkCugU3rZubE2kJ2GU01kj5UONreRXD-_cMNa2wyIULg');
  background-size: contain;
}

.doc-content h3, p
{
  text-align: center;
  color: black;
}

.doc-content img
{
  width: auto;
  height: 37px;
  margin: 5px auto;
  background: transparent;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.7.1/slick.min.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.7.1/slick.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.7.1/slick-theme.min.css" rel="stylesheet"/>

<div class="autoplay">
  <div class="doc-content">
    <h3>your content 1</h3>
    <p> some text </p>
  </div>
  <div class="doc-content">
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTVsh94BQQeuJYdImIg_di1yKk9iWEoaMZxSqbnl1pUCcr0ov1Qpw" />
    <p> some text </p>
  </div>
  <div class="doc-content">
    <h3>your content 3</h3>
    <p> some text </p>
  </div>
  <div class="doc-content">
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTVsh94BQQeuJYdImIg_di1yKk9iWEoaMZxSqbnl1pUCcr0ov1Qpw" />
    <p> some text </p>
  </div>
  <div class="doc-content">
    <h3>your content 5</h3>
    <p> some text </p>
  </div>
  <div class="doc-content">
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTVsh94BQQeuJYdImIg_di1yKk9iWEoaMZxSqbnl1pUCcr0ov1Qpw" />
    <p> some text </p>
  </div>
</div>

＆＃13;

搜索特定的滑块/轮播脚本

3 个答案: