龙猫12138 2017-12-25 02:09 采纳率: 0%
浏览 3023
已采纳

bootstrap中请问以下这个横向一次可播放多张图的carousel怎么做?

图片说明
效果如上,虽然这个文件里面已经有了这个做法,但是实在太过复杂(有两个自己写的jq代码且没有注释),所以我想问问大家还有没有关于这个效果的教程。如果大家太忙,只给一些小小的tip给我就好了,希望大家不吝赐教!

  • 写回答

2条回答 默认 最新

  • threenewbee 2017-12-25 03:15
    关注

    div嵌套下

     <body>
        <div id="myCarousel" class="carousel slide pad_010 b_k" data-ride="carousel">
          <!-- 轮播(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>
          </ol>   
          <!-- 轮播(Carousel)项目 -->
          <div class="carousel-inner bor_btm">
              <div class="item active" >
                  <div class="pic">
                      <img src="img/01.jpg" >
                      <img src="img/02.jpg" >
                      <img src="img/03.jpg" >
                      <img src="img/04.jpg" >
                  </div>
              </div>
              <div class="item">
                  <div class="pic">
                      <img src="img/01.jpg" >
                      <img src="img/02.jpg" >
                      <img src="img/03.jpg" >
                      <img src="img/04.jpg" >
                  </div>
              </div>
              <div class="item">
                  <div class="pic">
                      <img src="img/01.jpg" >
                      <img src="img/02.jpg" >
                      <img src="img/03.jpg" >
                      <img src="img/04.jpg" >
                  </div>
              </div>
           </div>
           <!-- 轮播(Carousel)导航 -->
           <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
           <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>      
        </div>
    </body>
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

悬赏问题

  • ¥15 滑块验证码拖动问题悬赏
  • ¥15 Wanted but not invoked:Actually, there were zero interactions with this moc
  • ¥20 怎么驱动tb6612
  • ¥15 Arcgis 3D效果点要素
  • ¥15 在执行yolo训练脚本的时候,没有报错,在扫描val这一步后就推出执行了
  • ¥15 delphi开发的WEBSERVER改用HTTPS协议
  • ¥15 pic16f877A单片机的计数器proteus仿真失效
  • ¥100 调查 Vitis AI 中验证 .xmodel 量化后的正确性
  • ¥30 codelite全屏时file、setting那一行消失了
  • ¥15 gazebo-rviz教程