我有一个网站,其中包含滑块
我为此使用了此代码,问题是当我单击箭头/滑动时,滑块会在箭头下方通过。这不是我想要的,我希望幻灯片在箭头下方通过之前通过它。
.enligne-fa,
.carousel-control-prev,
.carousel-control-next {
font-size: 80px;
color: #f3ab2a !important;
}
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css">
<!-- Gallery starts here -->
<section class="clients-slider mb-5">
<div class="container-fluid company-bg-gallery">
<div class="row mb-4">
<div class="col-lg-8">
<h2 class="slider-text text-white pt-5">Gallery</h2>
</div>
</div>
<div class="row my-5">
<div class="col-lg-12 my-5">
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active mx-lg-5">
<div class="container mx-lg-5">
<div class="row mx-lg-5">
<div class="col-4 d-flex justify-content-center"><img class="d-block img-fluid px-2" src="https://dummyimage.com/100%20x%20100/000000/fff.png" alt="First slide"></div>
<div class="col-4 d-flex justify-content-center"><img class="d-block img-fluid px-2" src="https://dummyimage.com/100%20x%20100/000000/fff.png" alt="First slide"></div>
<div class="col-4 d-flex justify-content-center"><img class="d-block img-fluid px-2" src="https://dummyimage.com/100%20x%20100/000000/fff.png" alt="First slide"></div>
</div>
</div>
</div>
<div class="carousel-item mx-lg-5">
<div class="container mx-lg-5">
<div class="row mx-lg-5">
<div class="col-4 d-flex justify-content-center"><img class="d-block img-fluid px-2" src="https://dummyimage.com/100%20x%20100/000000/fff.png" alt="First slide"></div>
<div class="col-4 d-flex justify-content-center"><img class="d-block img-fluid px-2" src="https://dummyimage.com/100%20x%20100/000000/fff.png" alt="First slide"></div>
<div class="col-4 d-flex justify-content-center"><img class="d-block img-fluid px-2" src="https://dummyimage.com/100%20x%20100/000000/fff.png" alt="First slide"></div>
</div>
</div>
</div>
<div class="carousel-item mx-lg-5">
<div class="container mx-lg-5">
<div class="row mx-lg-5">
<div class="col-4 d-flex justify-content-center"><img class="d-block img-fluid px-2" src="https://dummyimage.com/100%20x%20100/000000/fff.png" alt="First slide"></div>
<div class="col-4 d-flex justify-content-center"><img class="d-block img-fluid px-2" src="https://dummyimage.com/100%20x%20100/000000/fff.png" alt="First slide"></div>
<div class="col-4 d-flex justify-content-center"><img class="d-block img-fluid px-2" src="https://dummyimage.com/100%20x%20100/000000/fff.png" alt="First slide"></div>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev text-primary" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="fas fa-caret-left enligne-fa" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next text-primary" href="#carouselExampleControls" role="button" data-slide="next">
<span class="fas fa-caret-right enligne-fa" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
</section>
<!-- Gallery ends here -->
当前,所有三张照片同时通过。我需要类似codepen的东西,但是带有箭头作为我的并且在BS4中。同样,所有幻灯片都应该在箭头之前通过,并且在移动设备上也应该看起来不错。
任何帮助将不胜感激!
答案 0 :(得分:0)
您的滑块位于容器流体中,容器占据了屏幕的整个宽度。因此,您的滑块将占据动画中的整个宽度。我会尝试将滑块放在液体容器中。您的控件应位于流体容器中,而滑块应位于容器中。容器会将with设置为网格本身。
类似
<div class="container-fluid">
[ARROWS HERE]
<div class="container">[SLIDER HERE]</div>
</div>
让我知道是否有帮助!