html Bootstrap推荐旋转木马

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了html Bootstrap推荐旋转木马相关的知识,希望对你有一定的参考价值。

<div class="bs-example">
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
      <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
        <li data-target="#myCarousel" data-slide-to="3"></li>
        <li data-target="#myCarousel" data-slide-to="4"></li>
      </ol>
      <div class="container">
        <div class="carousel-inner">
          <blockquote class="item active">
            <p>“What an amazing display last night!!!! Sensational.. So professional and the perfect addition to a wonderful wedding reception!!! Well done it was truly awesome!!!”</p>
            <cite>Trina Guillot</cite> </blockquote>
          <blockquote class="item">
            <p>“Absolutely sensational wedding fireworks. The timing to the music could not have been more in sync. Absolute mesmerising end to a perfect day”</p>
            <cite>Samantha Kelly Salthouse</cite> </blockquote>
          <blockquote class="item">
            <p>“Brilliant fireworks display last night. The timing with the music was perfect and had everyone in absolute awe from start to finish”</p>
            <cite>Andrew Davis </cite> </blockquote>
          <blockquote class="item">
            <p>“What a fantastic display. Every second was breathtaking. Probably the best display I have seen. Great work guys”</p>
            <cite>Tom Lord</cite> </blockquote>
          <blockquote class="item">
            <p>“Incredible fireworks display, the music was perfectly timed, and fireworks were spectacular ! XX”</p>
            <cite>Kathryn Cullinane</cite> </blockquote>
        </div>
      </div>
      <!-- Carousel controls --> 
      <a class="carousel-control left" href="#myCarousel" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="carousel-control right" href="#myCarousel" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div>
  </div>

以上是关于html Bootstrap推荐旋转木马的主要内容,如果未能解决你的问题,请参考以下文章

css Bootstrap - 褪色旋转木马

css Bootstrap褪色旋转木马

悬停的Bootstrap旋转木马标题

为什么当旋转木马内部的某个元素被调用时,Bootstrap 4旋转木马暂停功能不起作用?

css Bootstrap淡化旋转木马触摸滑块与文本动画

Bootstrap轮播一次多个帧