Ad

Multiple Bootstrap Slider Not Working As Expected In A Page With Drag, And Arrow

- 1 answer

Hello all I have a slider for my website and I have made it with some help from the internet, what I want is to add the arrow icons on both the sides of this slider and also the drag-gable option like if I drag the mouse the slider can be dragged especially for mobiles.

can we do that please help me I am also adding the codes.

Here is the fiddle link.

Code:

.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" target="_blank" rel="nofollow noreferrer" 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" target="_blank" rel="nofollow noreferrer" 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" target="_blank" rel="nofollow noreferrer" 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" target="_blank" rel="nofollow noreferrer" 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>

I am looking for the two arrow buttons to be placed properly so that if I use the slider multiple times in a page it has no issue and also the drag-gable option for laptop and mobile.

Ad

Answer

I have seen your Fiddle and I noticed some important changes that needs to be done. Those are:

  1. You have used same id value for both the carousels which should not be done. You cannot have same id for two elements. So change it first. eventually you have to change href of button according to the id.
  2. All your prev and next buttons have same look so keep a single class to avoid repeated css like color and width.
  3. to position the button set slider container as a position: relative and place button container inside of slide container and set position: absolute This will align your buttons according to the width of slider.

That is it for now I guess. If This works well let me know...

Ad
source: stackoverflow.com
Ad