0

Вопрос заключается в следующем: я убираю индикаторы в слайдер, делаю слайдер статичным. И нужно, чтобы переключение слайдера осуществлялось либо стрелками, либо вверху над слайдером должны быть кнопки и переключать ими. Как реализовать? Заранее спасибо.

2

1 ответ 1

1

Можно индикаторы просто вынести туда куда надо и использовать их вместо кнопок. Пример на boostrap 4.

@import "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css";

#carouselExampleIndicators {
  width: 400px;
}

.carousel-indicators {
  position: relative;
  right: auto;
  bottom: auto;
  left: auto;
  margin-right: 0;
  margin-left: 0;
  list-style: none;
  background: red;
}

.carousel-indicators li {
  width: 30px;
  height: 30px;
  text-indent: 0;
  color: black;
  font-size: 14px;
  text-align: center;
  cursor: pointer;
}
<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.12.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<script>
$('.carousel').carousel({
  interval: null
})
</script>


<!--Индикаторы-->
<ol class="carousel-indicators">
  <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active">1</li>
  <li data-target="#carouselExampleIndicators" data-slide-to="1">2</li>
  <li data-target="#carouselExampleIndicators" data-slide-to="2">3</li>
</ol>

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">

  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="https://avatars.mds.yandex.net/get-pdb/34158/57d750dc-6893-4a08-93c7-bcb2c0aec8b0/s800" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="https://1079638729.rsc.cdn77.org/pic/v2/gallery/preview/belki-zhivotnye-33658.jpg" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="https://avatars.mds.yandex.net/get-pdb/34158/b4138e2d-0ebb-4c7c-9afc-5b20f705bab1/s800" alt="Third slide">
    </div>
  </div>
  <a class="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="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>

1
  • Думал как вариант. Но не лучший. Все-таки нужно попробовать по условию.
    – Ivan
    29 ноя 2017 в 15:57

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.