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

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 虚拟机打包apk出现错误
  • ¥30 最小化遗憾贪心算法上界
  • ¥15 用visual studi code完成html页面
  • ¥15 聚类分析或者python进行数据分析
  • ¥15 逻辑谓词和消解原理的运用
  • ¥15 三菱伺服电机按启动按钮有使能但不动作
  • ¥15 js，页面2返回页面1时定位进入的设备
  • ¥50 导入文件到网吧的电脑并且在重启之后不会被恢复
  • ¥15 （希望可以解决问题）ma和mb文件无法正常打开，打开后是空白，但是有正常内存占用，但可以在打开Maya应用程序后打开场景ma和mb格式。
  • ¥20 ML307A在使用AT命令连接EMQX平台的MQTT时被拒绝