Кнопки "Карусель" вперед / назад и прокрутка не работают - PullRequest
Новая
       12

Кнопки "Карусель" вперед / назад и прокрутка не работают

0 голосов
/ 06 января 2020

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

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

Заранее спасибо за любую помощь! 

<!doctype html>
<html lang="en">
<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

</head>
<body>


<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="../assets/dict.jpg" class="d-block w-100" alt="0">
    </div>
    <div class="carousel-item">
      <img src="../assets/JuveLogo.png" class="d-block w-100" alt="1">
    </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>


<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>


</body>

</html>

Ответы [ 2 ]

0 голосов
/ 06 января 2020

Это рабочий пример с изменением только того же существующего кода изображение на текст и определение стрелки в черном цвете цвет . 

.carousel-control-prev, .carousel-control-next{
  background: #000;
  width: 40px!important;
  height: 40px!important;
  border-radius: 50px;
  top: 50%!important;
  margin-top: -20px;
}
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>Carousel Test</title>
</head>
<body>

<div class="container p-3">
	<div class="row">
		<div class="col-sm-12">
			<!--Start Carousel  -->
			<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
			  <div class="carousel-inner">
			    <div class="carousel-item active">
			      <h3>Slide #1</h3>
			      <p>
			      	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			      	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
			      	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
			      	consequat.
			      </p>
			    </div>
			    <div class="carousel-item">
			      <h3>Slide #2</h3>
			      <p>
			      	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			      	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
			      	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
			      	consequat.
			      </p>
			    </div>
			    <div class="carousel-item">
			      <h3>Slide #3</h3>
			      <p>
			      	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			      	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
			      	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
			      	consequat.
			      </p>
			    </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>
			<!-- /End Carousel -->
		</div>
	</div>
</div>

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

</body>
</html>
0 голосов
/ 06 января 2020

Вы пробовали пример кода Worning от w3schools? Вот ссылка на их страницу: https://www.w3schools.com/bootstrap/bootstrap_carousel.asp

У них есть хорошее объяснение того, как работает карусель из Bootstrap:)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...