В чем проблема карусели bootstrap 4?

Question

[Адель Халитов]

ahmzmd.ru
Слайды должны перелистываться плавно, друг за другом, я понимаю что в официальных документациях приведены примеры с img, а не с div. Но все таки, вот на этом сайте реализовано аналогично моему. https://ledel.ru/

<div id="carouselExampleIndicators" class="carousel slide w-100 h-100" data-ride="carousel">
	<ol class="carousel-indicators">
		<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
		<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
		<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
	</ol>
	<div class="carousel-inner w-100 h-100">

		<!--Carousel item-->
		<div class="carousel-item active w-100 h-100" style="position: relative; background: url('http://ahmzmd.ru/assets/templates/brezent/img/bgtent.jpg') 50% 50% no-repeat; background-size: cover;">
			<div class="wrap w-100 h-100" style="position: absolute; background-color: rgba(0,0,0,0.7);"></div>
			<div class="wrap h-100 w-100 d-flex align-items-center">
				<div class="container">
					<div class="row">
						<div class="col-12 col-md-8 offset-md-2">
							<p class="text-white">Адын</p>
							<button type="button" class="btn btn-outline-primary p-3 text-uppercase font-weight-bold">Primary</button>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!--//Carousel item-->

		<!--Carousel item-->
		<div class="carousel-item w-100 h-100" style="position: relative; background: url('http://ahmzmd.ru/assets/templates/brezent/img/bgtent.jpg') 50% 50% no-repeat; background-size: cover;">
			<div class="wrap w-100 h-100" style="position: absolute; background-color: rgba(0,0,0,0.7);"></div>
			<div class="wrap h-100 w-100 d-flex align-items-center">
				<div class="container">
					<div class="row">
						<div class="col-12 col-md-8 offset-md-2">
							<p class="text-white">Адын</p>
							<button type="button" class="btn btn-outline-primary p-3 text-uppercase font-weight-bold">Primary</button>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!--//Carousel item-->

		<!--Carousel item-->
		<div class="carousel-item w-100 h-100" style="position: relative; background: url('http://ahmzmd.ru/assets/templates/brezent/img/bgtent.jpg') 50% 50% no-repeat; background-size: cover;">
			<div class="wrap w-100 h-100" style="position: absolute; background-color: rgba(0,0,0,0.7);"></div>
			<div class="wrap h-100 w-100 d-flex align-items-center">
				<div class="container">
					<div class="row">
						<div class="col-12 col-md-8 offset-md-2">
							<p class="text-white">Адын</p>
							<button type="button" class="btn btn-outline-primary p-3 text-uppercase font-weight-bold">Primary</button>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!--//Carousel item-->




	</div>
	<a class="cc-but carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
		<span class="carousel-control-prev-icon" aria-hidden="true"></span>
		<span class="sr-only">Previous</span>
	</a>
	<a class="cc-but carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
		<span class="carousel-control-next-icon" aria-hidden="true"></span>
		<span class="sr-only">Next</span>
	</a>
</div>

Как сделать плавный скролинг?

Answer 1

[Ernest Faizullin]

bootstrap это решение не для всего, это просто позвоночник
чтобы поменять эффект надо покрутить css

а вообще я бы посоветовал плагин slick, там это все легче

Comments

[Адель Халитов]

действительно проще, спасибо

Answer 2

[roman_mr]

bootstrap.css - класс .carousel-item поставить после класса "@media (prefers-reduced-motion:reduce) {
.carousel-item {
transition: none
}
}"

Comments

[roman_mr]

PS. для bootstrap 4.4