css - 尝试实现与 airbnb.com 相同的轮播

Question

我想学习 bootstrap 并开始研究 airbnb.com html 文件。我按 ctrl-s 获取所有文件并打开 html 文件进行编辑。我得到了 airbnb 文件，因为我喜欢图像随机播放的方式(我们可以称之为轮播吗？)

所以，我做的第一件事就是更改主页上显示的图片。第一张图像发生了变化，但令人惊讶的是，当我这样做时，图像停止洗牌。即使我点击右箭头(您可以在 airbnb.com 上查看)，图像也没有改变。

带有图像的代码如下。我看不到任何与洗牌图像或任何东西相关的东西:

<div id="hero" style="display:block;" data-native-currency="CAD" class="search_intro">
  <ul class="unstyled" id="slideshow">
      <li class="" data-slide-type="search_intro" data-bg-opacity="1" style="display: block;">
      <img alt="Maison pittoresque" src="./prototype_files/25681-86e324d87449b1f07afd358cc62bbbb8.jpg" height="700" width="1600">
        <div class="caption">
            <button class="wish_list_button not_saved heart btn gray large" data-hosting_id="25681" title="Enregistrez cette annonce pour plus tard." data-name="Maison pittoresque" data-address="Munster, France">
              <i class="icon icon-product-wishlist pink"></i>
            </button>
          <a href="https://fr.airbnb.ca/rooms/25681"><img alt="25681-3f7484e66def17ef287de5c686e497a2" height="40" src="./prototype_files/25681-3f7484e66def17ef287de5c686e497a2.jpg" width="40"></a>
          <p><strong><a href="https://fr.airbnb.ca/rooms/25681">Maison pittoresque</a></strong>
            <br><a href="https://fr.airbnb.ca/rooms/25681">Munster, France</a> -
                  <span class="price" data-price="80.0427">$83 CAD</span></p>
        </div>
      </li>
      <li data-slide-type="search_intro" data-bg-opacity="1" class="active">
      <img alt="Superbe villa sur la plage" height="700" width="1600" src="./prototype_files/387153-b6473710c2cb9ec734cb06bf9d90bdd8.jpg">
        <div class="caption" style="display: block;">
            <button class="wish_list_button not_saved heart btn gray large" data-hosting_id="387153" title="Enregistrez cette annonce pour plus tard." data-name="Superbe villa sur la plage" data-address="Bali, Indonésie">
              <i class="icon icon-product-wishlist pink"></i>
            </button>
          <a href="https://fr.airbnb.ca/rooms/387153"><img alt="387153-098c2c9ac018937ef05a8b7079c4149e" height="40" src="./prototype_files/387153-098c2c9ac018937ef05a8b7079c4149e.jpg" width="40"></a>
          <p><strong><a href="https://fr.airbnb.ca/rooms/387153">Superbe villa sur la plage</a></strong>
            <br><a href="https://fr.airbnb.ca/rooms/387153">Bali, Indonésie</a> -
                  <span class="price" data-price="171.0">$177 CAD</span></p>
        </div>
      </li>
      <li data-slide-type="search_intro" data-bg-opacity="1">
      <img alt="Cabane d&#39;intérieur en Allemagne" height="700" width="1600" src="./prototype_files/511605-333786588d7d46abb7949afeb3dbddfb.jpg">
        <div class="caption">
            <button class="wish_list_button not_saved heart btn gray large" data-hosting_id="511605" title="Enregistrez cette annonce pour plus tard." data-name="Cabane d&#39;intérieur en Allemagne" data-address="Constance, Allemagne">
              <i class="icon icon-product-wishlist pink"></i>
            </button>
          <a href="https://fr.airbnb.ca/rooms/511605"><img alt="511605-3b6430731c0469cb219253433f5f975d" height="40" src="./prototype_files/511605-3b6430731c0469cb219253433f5f975d.jpg" width="40"></a>
          <p><strong><a href="https://fr.airbnb.ca/rooms/511605">Cabane d'intérieur en Allemagne</a></strong>
            <br><a href="https://fr.airbnb.ca/rooms/511605">Constance, Allemagne</a> -
                  <span class="price" data-price="85.3789">$88 CAD</span></p>
        </div>
      </li>
  </ul>

我也玩过 bootstrap 网站上的轮播演示，但我不喜欢它。所以，我的问题是:

airbnb.com轮播样式怎么做？

谢谢

Answer 1

如果您正在寻找出色的 slider ，请使用 skitter slider .它还具有出色的自定义功能。