Multiple Bootstrap Slider не работает должным образом на странице с перетаскиванием и стрелкой - PullRequest
Новая
       13

Multiple Bootstrap Slider не работает должным образом на странице с перетаскиванием и стрелкой

0 голосов
/ 11 июля 2019

Привет всем! У меня есть слайдер для моего веб-сайта, и я сделал его с некоторой помощью из Интернета, я хочу добавить значки со стрелками на обеих сторонах этого слайдера, а также параметр перетаскивания, как если бы яперетаскивать мышью ползунок можно перетаскивать специально для мобильных телефонов.

можем ли мы сделать это, пожалуйста, помогите мне, я также добавляю коды.

Здесь - это скриптовая ссылка.

Код: 

.carousel-control-prev {
  position: relative;
  left: 0px;
  opacity: .4;
  top: -390px;
  background-color: #F9BC50;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-top: 100px;
}

.carousel-control-next {
  opacity: 1;
  background-color: #F9BC50;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-top: 100px;
}
<div class="container">
  <div class="row">
    <div class="slide">
      <h4 class="thehead_mains">Movies</h4>
      <div id="ProjeCarousel" class="carousel slide" data-ride="carousel">
        <div class="carousel-inner theniocards">

          <div class="carousel-item active">
            <div class="col-md-4 float-left">
              <div class="card">
                <img class="card-img-top" src="https://in.bmscdn.com/iedb/movies/images/mobile/thumbnail/xlarge/avengers-endgame-tribute-extra-footage-et00106917-10-07-2019-05-38-05.jpg" alt="Card image cap" />
                <div class="card-body">
                  <h4>Proje Başlık</h4>
                </div>
              </div>
            </div>
            <div class="col-md-4 float-left">
              <div class="card">
                <img class="card-img-top" src="https://in.bmscdn.com/iedb/movies/images/mobile/thumbnail/xlarge/shoplifters-et00088042-10-11-2018-12-47-24.jpg" alt="Card image cap" />
                <div class="card-body">
                  <h4>Proje Başlık</h4>
                </div>
              </div>
            </div>
            <div class="col-md-4 float-left">
              <div class="card">
                <img class="card-img-top" src="https://in.bmscdn.com/iedb/movies/images/mobile/thumbnail/xlarge/toy-story-4-et00105082-17-06-2019-04-30-29.jpg" alt="Card image cap" />
                <div class="card-body">
                  <h4>Proje Başlık</h4>
                </div>
              </div>
            </div>
          </div>

          <div class="carousel-item">
            <div class="col-md-4 float-left">
              <div class="card">
                <img class="card-img-top" src="https://in.bmscdn.com/iedb/movies/images/mobile/thumbnail/xlarge/arjun-reddy-et00080853-31-07-2018-04-53-00.jpg" alt="Card image cap" />
                <div class="card-body">
                  <h4>Proje Başlık</h4>
                </div>
              </div>
            </div>
            <div class="col-md-4 float-left">
              <div class="card">
                <img class="card-img-top" src="https://in.bmscdn.com/iedb/movies/images/mobile/thumbnail/xlarge/super-30-et00064569-03-11-2017-12-22-53.jpg" alt="Card image cap" />
                <div class="card-body">
                  <h4>Proje Başlık</h4>
                </div>
              </div>
            </div>
            <div class="col-md-4 float-left">
              <div class="card">
                <img class="card-img-top" src="https://in.bmscdn.com/iedb/movies/images/mobile/thumbnail/xlarge/malaal-et00102891-15-05-2019-09-34-57.jpg" alt="Card image cap" />
                <div class="card-body">
                  <h4>Proje Başlık</h4>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <a class="carousel-control-prev" href="#ProjeCarousel" role="button" data-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true" />
      <span class="sr-only">Geri</span>
    </a>
    <a class="carousel-control-next" href="#ProjeCarousel" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true" />
      <span class="sr-only">İleri</span>
    </a>
  </div>
</div>

<div class="container">
  <div class="row">
    <div class="slide">
      <h4 class="thehead_mains">Movies</h4>
      <div id="ProjeCarousel" class="carousel slide" data-ride="carousel">
        <div class="carousel-inner theniocards">

          <div class="carousel-item active">
            <div class="col-md-4 float-left">
              <div class="card">
                <img class="card-img-top" src="https://in.bmscdn.com/iedb/movies/images/mobile/thumbnail/xlarge/avengers-endgame-tribute-extra-footage-et00106917-10-07-2019-05-38-05.jpg" alt="Card image cap" />
                <div class="card-body">
                  <h4>Proje Başlık</h4>
                </div>
              </div>
            </div>
            <div class="col-md-4 float-left">
              <div class="card">
                <img class="card-img-top" src="https://in.bmscdn.com/iedb/movies/images/mobile/thumbnail/xlarge/shoplifters-et00088042-10-11-2018-12-47-24.jpg" alt="Card image cap" />
                <div class="card-body">
                  <h4>Proje Başlık</h4>
                </div>
              </div>
            </div>
            <div class="col-md-4 float-left">
              <div class="card">
                <img class="card-img-top" src="https://in.bmscdn.com/iedb/movies/images/mobile/thumbnail/xlarge/toy-story-4-et00105082-17-06-2019-04-30-29.jpg" alt="Card image cap" />
                <div class="card-body">
                  <h4>Proje Başlık</h4>
                </div>
              </div>
            </div>
          </div>

          <div class="carousel-item">
            <div class="col-md-4 float-left">
              <div class="card">
                <img class="card-img-top" src="https://in.bmscdn.com/iedb/movies/images/mobile/thumbnail/xlarge/arjun-reddy-et00080853-31-07-2018-04-53-00.jpg" alt="Card image cap" />
                <div class="card-body">
                  <h4>Proje Başlık</h4>
                </div>
              </div>
            </div>
            <div class="col-md-4 float-left">
              <div class="card">
                <img class="card-img-top" src="https://in.bmscdn.com/iedb/movies/images/mobile/thumbnail/xlarge/super-30-et00064569-03-11-2017-12-22-53.jpg" alt="Card image cap" />
                <div class="card-body">
                  <h4>Proje Başlık</h4>
                </div>
              </div>
            </div>
            <div class="col-md-4 float-left">
              <div class="card">
                <img class="card-img-top" src="https://in.bmscdn.com/iedb/movies/images/mobile/thumbnail/xlarge/malaal-et00102891-15-05-2019-09-34-57.jpg" alt="Card image cap" />
                <div class="card-body">
                  <h4>Proje Başlık</h4>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <a class="carousel-control-prev" href="#ProjeCarousel" role="button" data-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true" />
      <span class="sr-only">Geri</span>
    </a>

    <a class="carousel-control-next pull-right" href="#ProjeCarousel" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true" />
      <span class="sr-only">İleri</span>
    </a>
  </div>
</div>

Я ищу правильное расположение двух кнопок со стрелками, чтобы при многократном использовании ползунка на странице не возникало проблем, а также перетаскиваниеопция для ноутбука и мобильного телефона.

1 Ответ

0 голосов
/ 18 июля 2019

Я видел вашу скрипку и заметил некоторые важные изменения, которые необходимо сделать. Это:

  1. Вы использовали одинаковое значение идентификатора для обеих каруселей, что не должно быть сделано. Вы не можете иметь одинаковый идентификатор для двух элементов. Так что измените это в первую очередь. в конце концов вы должны изменить HREF кнопки в соответствии с идентификатором.
  2. Все ваши кнопки назад и вперед выглядят одинаково, поэтому держите один класс, чтобы избежать повторяющихся CSS, таких как цвет и ширина.
  3. , чтобы позиционировать контейнер слайдера кнопки как position: relative и поместить контейнер кнопки внутри контейнера слайда и установить position: absolute Это выровняет ваши кнопки в соответствии с шириной слайдера.

Вот и все, я думаю. Если это хорошо работает, дайте мне знать ...

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

Нет похожих вопросов

...