Bootstrap 多项目旋转木马的响应问题

2ul0zpep 于 2022-12-07 发布在 Bootstrap

关注(0)|答案(4)|浏览(147)

按照我上一个关于另一个旋转木马的主题，我改变了旋转木马。
新的一个，我从一个片段可在这里：https://bootsnipp.com/snippets/dl6ez，这一个是非常响应，另一方面，当我把它应用到我的项目（我只能显示“to image，因为我只改变了图像路径）。
但我的问题是，它只显示一个单一的图像（在移动的版是正常的），但在桌面版它不放大。
原始片段PC版本：snippet origine
原始片段响应版本：origine snippet responsive（动画当你去我提到的链接）。
我的智能手机版旋转木马：my carrousel带动画。PC上的显示：
version desktop capture non animate
它保持动画，房子不按屏幕尺寸放大。

twitter-bootstrap

来源：https://stackoverflow.com/questions/64244997/responsiveness-problem-of-a-multi-item-carrousel

4条答案

按热度按时间

xjreopfe1#

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleControls" 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="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

赞(0）回复(0）举报 2022-12-07

txu3uszq2#

<div class="container-fluid">
                <div id="carouselExample" class="carousel slide" data-ride="carousel" data-interval="9000">
                    <div class="carousel-inner row w-100 mx-auto" role="listbox">
                        <div class="carousel-item col-md-3  active">
                           <div class="panel panel-default">
                              <div class="panel-thumbnail">
                                <a href="#" title="image 1" class="thumb">
                                  <img class="img-fluid mx-auto d-block" src="images/housse de couette 20 balles/avengers 1.jpg" alt="slide 1"></a>
                                  <p style="color: gray;text-decoration:line-through;">22.99€</p>
                                    <h4 id="prix" style="color:red; align-content:right;">11.99€</h1>
                              </div>
                            </div>
                        </div>
                        <div class="carousel-item col-md-3 ">
                           <div class="panel panel-default">
                              <div class="panel-thumbnail">
                                <a href="#" title="image 3" class="thumb">
                                 <img class="img-fluid mx-auto d-block" src="images/housse de couette 20 balles/cars 1.jpg" alt="slide 2"></a>
                                  <p style="color: gray;text-decoration:line-through;">22.99€</p>
                                    <h4 id="prix" style="color:red; align-content:right;">11.99€</h1>
                              </div>
                            </div>
                        </div>
                        <div class="carousel-item col-md-3 ">
                           <div class="panel panel-default">
                              <div class="panel-thumbnail">
                                <a href="#" title="image 4" class="thumb">
                                 <img class="img-fluid mx-auto d-block" src="images/housse de couette 20 balles/fee clochette.JPG" alt="slide 3"></a>
                                  <p style="color: gray;text-decoration:line-through;">22.99€</p>
                                    <h4 id="prix" style="color:red; align-content:right;">11.99€</h1>
                              </div>
                            </div>
                        </div>
                        <div class="carousel-item col-md-3 ">
                            <div class="panel panel-default">
                              <div class="panel-thumbnail">
                                <a href="#" title="image 5" class="thumb">
                                 <img class="img-fluid mx-auto d-block" src="images/housse de couette 20 balles/princess.JPG" alt="slide 4"></a>
                                  <p style="color: gray;text-decoration:line-through;">22.99€</p>
                                    <h4 id="prix" style="color:red; align-content:right;">11.99€</h1>
                              </div>
                            </div>
                        </div>
                        <div class="carousel-item col-md-3 ">
                          <div class="panel panel-default">
                              <div class="panel-thumbnail">
                                <a href="#" title="image 6" class="thumb">
                                  <img class="img-fluid mx-auto d-block" src="images/housse de couette 20 balles/sofia 1.JPG" alt="slide 5"></a>
                                  <p style="color: gray;text-decoration:line-through;">22.99€</p>
                                    <h4 id="prix" style="color:red; align-content:right;">11.99€</h1>
                              </div>
                            </div>
                        </div>
                        <div class="carousel-item col-md-3 ">
                           <div class="panel panel-default">
                              <div class="panel-thumbnail">
                                <a href="#" title="image 7" class="thumb">
                                  <img class="img-fluid mx-auto d-block" src="images/housse de couette 20 balles/sofia 2.JPG" alt="slide 6"></a>
                                  <p style="color: gray;text-decoration:line-through;">22.99€</p>
                                    <h4 id="prix" style="color:red; align-content:right;">11.99€</h1>
                              </div>
                            </div>
                        </div>
                        
                            </div>
                        </div>
                    </div>
                </div>
            </div>

CSS：

@media (min-width: 768px) {

/* show 3 items */
.carousel-inner .active,
.carousel-inner .active + .carousel-item,
.carousel-inner .active + .carousel-item + .carousel-item,
.carousel-inner .active + .carousel-item + .carousel-item + .carousel-item  {
    display: block;
}

.carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left),
.carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item,
.carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item,
.carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item + .carousel-item {
    transition: none;
}

.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
  position: relative;
  transform: translate3d(0, 0, 0);
}

.carousel-inner .active.carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
    position: absolute;
    top: 0;
    right: -25%;
    z-index: -1;
    display: block;
    visibility: visible;
}

/* left or forward direction */
.active.carousel-item-left + .carousel-item-next.carousel-item-left,
.carousel-item-next.carousel-item-left + .carousel-item,
.carousel-item-next.carousel-item-left + .carousel-item + .carousel-item,
.carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item,
.carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
    position: relative;
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
}

/* farthest right hidden item must be abso position for animations */
.carousel-inner .carousel-item-prev.carousel-item-right {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    display: block;
    visibility: visible;
}

/* right or prev direction */
.active.carousel-item-right + .carousel-item-prev.carousel-item-right,
.carousel-item-prev.carousel-item-right + .carousel-item,
.carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item,
.carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item,
.carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
    position: relative;
    transform: translate3d(100%, 0, 0);
    visibility: visible;
    display: block;
    visibility: visible;
}

}
对于JS，我从以下位置获取代码：https://bootsnipp.com/snippets/dl6ez而不对其进行修改

赞(0）回复(0）举报 2022-12-07

bwitn5fc3#

补靴缝：
我补充一句：

.carousel-item {margin-right: auto !important;}

而且对我很有效

赞(0）回复(0）举报 2022-12-07

hec6srdp4#

基本上，它是不支持缩放模式的桌面视图，在移动的查看方法，它的活动正常缩放方法是因为苹果设备。

赞(0）回复(0）举报 2022-12-07

我来回答

Bootstrap 多项目旋转木马的响应问题

4条答案

相关问题

热门标签

最新问答