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

时间:2013-08-18 23:47:25

标签: css twitter-bootstrap

我想学习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轮播风格?

谢谢

1 个答案:

答案 0 :(得分:0)

如果您正在寻找一个很棒的滑块,请使用skitter slider。 它也有很好的定制。