使显示下一个/上一个部分的旋转木马响应

Making Carousel which displays part of next/prev responsive

本文关键字：旋转木马响应上一个部显示下一个更新时间：2023-09-26

我有一个转盘，可以显示下一个和上一个图像的部分，但目前它对移动大小以上的图像没有响应。这是代码：

<style>
        .item img:first-child,
        .item img:last-child {
            display: none;
        }
        /* Small devices (tablets, 768px and up) */
        @media (min-width: 768px) {
            .item img {
                float: left;
                /*width: 600px;*/
            }
            .item img:first-child,
            .item img:last-child {
                display: block;
            }
            .item.active {
                overflow: hidden;
                margin: 0 -546px;
            }
        }
        /* Medium devices (desktops, 992px and up) */
        @media (min-width: 992px) {
            .item img {
                /*width: 600px;*/
            }
            .item.active {
                margin: 0 -434px;
            }
        }
        /* Large devices (large desktops, 1200px and up) */
        @media (min-width: 1200px) {
            .item img {
                /*width: 600px;*/
            }
            .item.active {
                margin: 0 -427px;
            }
        }
        .carousel-inner .active.left { left: -33%; }
        .carousel-inner .next        { left:  33%; }
        .carousel-inner .prev        { left: -33%; }
    </style>
<div class="container-fluid no-pad">
        <div class="row">
            <div class="col-lg-12 no-pad">
                <div id="myCarousel" class="carousel slide" data-ride="carousel">
                    <!-- Wrapper for slides -->
                    <div align="center" class="carousel-inner" role="listbox">
                        <div class="item active">
                            <img src="http://placehold.it/1148x780" alt="Chania" class="img-responsive">
                            <img src="http://placehold.it/1148x780" alt="Chania" class="img-responsive">
                            <img src="http://placehold.it/1148x780" alt="Chania" class="img-responsive">
                        </div>
                        <div class="item">
                            <img src="http://placehold.it/1148x780" alt="Chania" class="img-responsive">
                            <img src="http://placehold.it/1148x780" alt="Chania" class="img-responsive">
                            <img src="http://placehold.it/1148x780" alt="Chania" class="img-responsive">
                        </div>
                        <div class="item">
                            <img src="http://placehold.it/1148x780" alt="Chania" class="img-responsive">
                            <img src="http://placehold.it/1148x780" alt="Chania" class="img-responsive">
                            <img src="http://placehold.it/1148x780" alt="Chania" class="img-responsive">
                        </div>
                        <div class="item">
                            <img src="http://placehold.it/1148x780" alt="Chania" class="img-responsive">
                            <img src="http://placehold.it/1148x780" alt="Chania" class="img-responsive">
                            <img src="http://placehold.it/1148x780" alt="Chania" class="img-responsive">
                        </div>
                        <div class="item">
                            <img src="http://placehold.it/1148x780" alt="Chania" class="img-responsive">
                            <img src="http://placehold.it/1148x780" alt="Chania" class="img-responsive">
                            <img src="http://placehold.it/1148x780" alt="Chania" class="img-responsive">
                        </div>
                        <div class="item">
                            <img src="http://placehold.it/1148x780" alt="Chania" class="img-responsive">
                            <img src="http://placehold.it/1148x780" alt="Chania" class="img-responsive">
                            <img src="http://placehold.it/1148x780" alt="Chania" class="img-responsive">
                        </div>
                    </div>
                    <!-- Left and right controls -->
                    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"
                        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                        <span class="sr-only">Previous</span>
                    </a>
                    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                        <span class="sr-only">Next</span>
                    </a>
                </div>
            </div>
        </div>
    </div>

我希望旋转木马缩小（这就是我添加img响应BS类的原因）。但目前它保持相同的大小

我希望这就是你想要的，我已经简化了你的CSS:

.item img {
  float:left;
  max-width:33.33% !important;
}
@media (max-width: 768px) {
  .item img {
    max-width:100% !important;  
   }
  .item img:first-child,
  .item img:last-child {
    display: none !important;
  }
}

.carousel-inner .active.left { left: -33%; }
.carousel-inner .next        { left:  33%; }
.carousel-inner .prev        { left: -33%; }

请在此处查看JSFiddle结果。