Как исправить стрелку и слайдер логотипа в Bootstrap 4?

57
7

У меня есть сайт, который содержит слайдер

Я использовал этот код для этого, проблема в том, что когда я нажимаю стрелку/всякий раз, когда она скользит, ползунок проходит под стрелкой. Это не то, что я хочу, я хочу, чтобы слайд пропускал его перед стрелкой, а не под ним.

.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. Также все слайды должны проходить перед стрелкой и должны хорошо выглядеть на мобильных устройствах.

Любая помощь будет оценена!

спросил(а) 2018-07-03T00:55:00+03:00 2 года, 2 месяца назад
1
Решение
90

Ваш ползунок находится в контейнерной жидкости, которая занимает полную ширину экрана. Поэтому ваш слайдер займет всю ширину анимации. Я попытался бы поместить ваш ползунок в контейнер в контейнер для жидкости. Ваши элементы управления должны находиться в контейнере для жидкости, а ваш ползунок в контейнере. Контейнер установит соединение с самой сеткой.

что-то вроде

<div class="container-fluid">
[ARROWS HERE]
<div class="container">[SLIDER HERE]</div>
</div>

Дайте мне знать, если это поможет!

ответил(а) 2018-07-03T01:28:00+03:00 2 года, 2 месяца назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема