1. 首页
  2. 问答
  3. 需要同一页面或同一站点上的多个引导程序传送带，但它们需要具有不同的尺寸

需要同一页面或同一站点上的多个引导程序传送带，但它们需要具有不同的尺寸

2017-08-17 23 views

回答

0

这里有旋转木马不同大小改变高度和你的旋转木马的宽度：CodePen Demo或者运行下面的代码片段。

.row { 
 
    display: flex; 
 
    flex-direction: column; 
 
    align-items: center; 
 
    padding-top: 1rem; 
 
    padding-bottom: 1rem; 
 
} 
 

 
h1, 
 
h3 { 
 
    text-align: center; 
 
    font-family: Verdana, sans-serif; 
 
} 
 

 
.row { 
 
    display: flex; 
 
    flex-direction: column; 
 
    align-items: center; 
 
    padding-top: 1rem; 
 
    padding-bottom: 1rem; 
 
} 
 

 
h1, 
 
h3 { 
 
    text-align: center; 
 
} 
 

 
@media (min-width: 638px) { 
 
    h1 { 
 
    display: none; 
 
    } 
 
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<div class="container"> 
 
    <div class="row" id="row1"> 
 
    <h1>400x400</h1> 
 
    <div class="bd-example"> 
 
     <div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel"> 
 
     <ol class="carousel-indicators"> 
 
      <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li> 
 
      <li data-target="#carouselExampleCaptions" data-slide-to="1" class=""></li> 
 
      <li data-target="#carouselExampleCaptions" data-slide-to="2" class=""></li> 
 
     </ol> 
 
     <div class="carousel-inner" role="listbox"> 
 
      <div class="carousel-item active"> 
 
      <img class="d-block img-fluid" src="https://placebear.com/400/400" alt="400x400" /> 
 
      <div class="carousel-caption d-none d-md-block"> 
 
       <h3>400x400</h3> 
 
      </div> 
 
      </div> 
 
      <div class="carousel-item"> 
 
      <img class="d-block img-fluid" src="http://www.fillmurray.com/g/400/400" alt="400x400" /> 
 
      <div class="carousel-caption d-none d-md-block"> 
 
       <h3>400x400</h3> 
 
      </div> 
 
      </div> 
 
      <div class="carousel-item"> 
 
      <img class="d-block img-fluid" src="https://placekitten.com/g/400/400" alt="400x400" /> 
 
      <div class="carousel-caption d-none d-md-block"> 
 
       <h3>400x400</h3> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev"> 
 
      <span class="carousel-control-prev-icon" aria-hidden="true"></span> 
 
      <span class="sr-only">Previous</span> 
 
     </a> 
 
     <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next"> 
 
      <span class="carousel-control-next-icon" aria-hidden="true"></span> 
 
      <span class="sr-only">Next</span> 
 
     </a> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="row" id="row2"> 
 
    <div class="bd-example"> 
 
     <h1>600x600</h1> 
 
     <div id="carouselExampleCaptions2" class="carousel slide" data-ride="carousel"> 
 
     <ol class="carousel-indicators"> 
 
      <li data-target="#carouselExampleCaptions2" data-slide-to="0" class="active"></li> 
 
      <li data-target="#carouselExampleCaptions2" data-slide-to="1" class=""></li> 
 
      <li data-target="#carouselExampleCaptions2" data-slide-to="2" class=""></li> 
 
     </ol> 
 
     <div class="carousel-inner" role="listbox"> 
 
      <div class="carousel-item active"> 
 
      <img class="d-block img-fluid" src="https://placebear.com/600/600" alt="600x600" /> 
 
      <div class="carousel-caption d-none d-md-block"> 
 
       <h3>600x600</h3> 
 
      </div> 
 
      </div> 
 
      <div class="carousel-item"> 
 
      <img class="d-block img-fluid" src="http://www.fillmurray.com/g/600/600" alt="600x600" /> 
 
      <div class="carousel-caption d-none d-md-block"> 
 
       <h3>600x600</h3> 
 
      </div> 
 
      </div> 
 
      <div class="carousel-item"> 
 
      <img class="d-block img-fluid" src="https://placekitten.com/g/600/600" alt="600x600" /> 
 
      <div class="carousel-caption d-none d-md-block"> 
 
       <h3>600x600</h3> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     <a class="carousel-control-prev" href="#carouselExampleCaptions2" role="button" data-slide="prev"> 
 
      <span class="carousel-control-prev-icon" aria-hidden="true"></span> 
 
      <span class="sr-only">Previous</span> 
 
     </a> 
 
     <a class="carousel-control-next" href="#carouselExampleCaptions2" role="button" data-slide="next"> 
 
      <span class="carousel-control-next-icon" aria-hidden="true"></span> 
 
      <span class="sr-only">Next</span> 
 
     </a> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="row" id="row3"> 
 
    <h1>250x250</h1> 
 
    <div class="bd-example"> 
 
     <div id="carouselExampleCaptions3" class="carousel slide" data-ride="carousel"> 
 
     <ol class="carousel-indicators"> 
 
      <li data-target="#carouselExampleCaptions3" data-slide-to="0" class="active"></li> 
 
      <li data-target="#carouselExampleCaptions3" data-slide-to="1" class=""></li> 
 
      <li data-target="#carouselExampleCaptions3" data-slide-to="2" class=""></li> 
 
     </ol> 
 
     <div class="carousel-inner" role="listbox"> 
 
      <div class="carousel-item active"> 
 
      <img class="d-block img-fluid" src="https://placebear.com/250/250" alt="250x250" /> 
 
      <div class="carousel-caption d-none d-md-block"> 
 
       <h3>250x250</h3> 
 
      </div> 
 
      </div> 
 
      <div class="carousel-item"> 
 
      <img class="d-block img-fluid" src="http://www.fillmurray.com/g/250/250" alt="250x250" /> 
 
      <div class="carousel-caption d-none d-md-block"> 
 
       <h3>250x250</h3> 
 
      </div> 
 
      </div> 
 
      <div class="carousel-item"> 
 
      <img class="d-block img-fluid" src="https://placekitten.com/g/250/250" alt="250x250" /> 
 
      <div class="carousel-caption d-none d-md-block"> 
 
       <h3>250x250</h3> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     <a class="carousel-control-prev" href="#carouselExampleCaptions3" role="button" data-slide="prev"> 
 
      <span class="carousel-control-prev-icon" aria-hidden="true"></span> 
 
      <span class="sr-only">Previous</span> 
 
     </a> 
 
     <a class="carousel-control-next" href="#carouselExampleCaptions3" role="button" data-slide="next"> 
 
      <span class="carousel-control-next-icon" aria-hidden="true"></span> 
 
      <span class="sr-only">Next</span> 
 
     </a> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script src="//rawgit.com/rosskevin/popper.js/feature-allow-text-html-node/src/popper.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>

更新

，使其与引导3自动播放，在HTML的底部更新您的jQuery代码，所以它看起来是这样的。

<script type="text/javascript"> 
$(document).ready(function() { 
    $('#firstCarousel').carousel({interval: 2000}); 
    $('#secondCarousel').carousel({interval: 2000}); 
}); 
</script>

注意：2000代表2000毫秒（2秒）。您可以通过为每个轮播分配一个不同的号码来改变速度。

来源

2017-08-17 00:41:30

+0

感谢您的努力，但是，我需要2个轮播，不同的高度和宽度。如前所述，我是新手，不了解情态。对不起，我的无知！ – Bazaboo

+0

@Bazaboo我明白了 - 对不起，我误解了。 - 我在上面更新了我的答案。希望它有帮助。 –

+0

好的！有2个轮播，大小不同，但不会自动播放。 – Bazaboo

0 
<div class="row carousel"> 
    <div id="firstCarousel" class="carousel slide" data-interval="false" data-ride="carousel"> 
    <div class="carousel-inner" role="listbox"> 
     <div class="carousel-item item active"> 
     <div class="carousel-item-content"> 
     </div> 
     </div> 
     <div class="carousel-item item second-item"> 
     <div class="carousel-item-content"> 
     </div> 
     </div> 
    </div> 

    <a class="carousel-control left" href="#firstCarousel" role="button" data-slide="prev"> 
     <span class="glyphicon glyphicon-chevron-left"></span> 
     <span class="sr-only">Previous</span> 
    </a> 
    <a class="carousel-control right" href="#firstCarousel" role="button" data-slide="next"> 
     <span class="glyphicon glyphicon-chevron-right"></span> 
     <span class="sr-only">Next</span> 
    </a> 
    </div> 
</div> 
<div class="row carousel"> 
    <div id="secondCarousel" class="carousel slide" data-interval="false" data-ride="carousel"> 
    <div class="carousel-inner" role="listbox"> 
     <div class="carousel-item item active"> 
     <div class="carousel-item-content"> 
     </div> 
     </div> 
     <div class="carousel-item item second-item"> 
     <div class="carousel-item-content"> 
     </div> 
     </div> 
    </div> 

    <a class="carousel-control left" href="#secondCarousel" role="button" data-slide="prev"> 
     <span class="glyphicon glyphicon-chevron-left"></span> 
     <span class="sr-only">Previous</span> 
    </a> 
    <a class="carousel-control right" href="#secondCarousel" role="button" data-slide="next"> 
     <span class="glyphicon glyphicon-chevron-right"></span> 
     <span class="sr-only">Next</span> 
    </a> 
    </div> 
</div>
在JS

：

$(document).ready(function() { 
    $('#firstCarousel').carousel(); 
    $('#secondCarousel').carousel(); 
});

在CSS，那么你可以用自己的身份证

#firstCarousel{ 
    width: 600px; 
    height: 380px; 
} 
#secondCarousel{ 
    width: 450px; 
    height: 285px; 
}

来源

2017-08-17 00:29:21

+0

谢谢！我会尝试。我确实想出了一个头脑风暴的解决方法 - 我创建了一个新的CSS文件，只是一个特定的页面，只是传送带的CSS和修改。然后将该css文件包含在页面中。它有效，但是，我相信这不是“正确”的方式来处理这个问题。此外，它不处理同一页上的不同大小的轮播... ...会让你知道你善意的解决方法的结果！ – Bazaboo

+0

这似乎没有工作。两个轮播是相同的大小，他们在页面上下跳动 – Bazaboo

相关问题

 相关问题