Question 43047 in Html Question posted in
Some basic documentation can be found here.

How to show previews of previous and next images in carousel in Bootstrap 5 – Html

I want the previous and next images in the carousel to appear partially for every central image like
this

Here is the code.

    <div class="carousel-container">
      <div id="carouselExampleRide" class="carousel slide" data-bs-ride="true">
        <div>
          <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleRide" data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Previous</span>
          </button>
        </div>
          <div class="carousel-item active">
            <img src="https://static.wixstatic.com/media/84b06e_4ae660d38c134d9f8c291148c8e378a4~mv2.png/v1/fit/w_1000%2Ch_608%2Cal_c%2Cq_80,enc_auto/file.jpg" class="d-block w-100 carousel-img-one" alt="fitness">
          </div>
          <div class="carousel-item">
            <img src="https://images-wixmp-530a50041672c69d335ba4cf.wixmp.com/templates/image/447dee40e57ab139592d58c4a61cf9b28297bb9c0b945568da9f7122e1e6fe861623238414909.jpg" class="d-block w-100" alt="fashion">
          </div>
          <div class="carousel-item">
            <img src="https://images-wixmp-530a50041672c69d335ba4cf.wixmp.com/templates/image/0ef3b30526d23fee95381bf1b179d129f82c5b30220823b9855b2776e095de701623242117925.jpg" class="d-block w-100 img-fluid" alt="art">
          </div>
        <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleRide" data-bs-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Next</span>
        </button>
      </div>
    </div>

.carousel-container {
  margin: auto;
  width: 50%;
}

.carousel-control-prev, .carousel-control-next {
  margin: -150px !important;
}

Thanks

Tags:

2

Answers


  1. 0

    you can see live on https://jsfiddle.net/q9ewyd1L/9/

    <div class="carousel-container">
  <div id="carouselExample" class="carousel slide" data-bs-ride="carousel">
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img src="https://static.wixstatic.com/media/84b06e_4ae660d38c134d9f8c291148c8e378a4~mv2.png/v1/fit/w_1000%2Ch_608%2Cal_c%2Cq_80,enc_auto/file.jpg" class="d-block w-100" alt="fitness">
      </div>
      <div class="carousel-item">
        <img src="https://images-wixmp-530a50041672c69d335ba4cf.wixmp.com/templates/image/447dee40e57ab139592d58c4a61cf9b28297bb9c0b945568da9f7122e1e6fe861623238414909.jpg" class="d-block w-100" alt="fashion">
      </div>
      <div class="carousel-item">
        <img src="https://images-wixmp-530a50041672c69d335ba4cf.wixmp.com/templates/image/0ef3b30526d23fee95381bf1b179d129f82c5b30220823b9855b2776e095de701623242117925.jpg" class="d-block w-100" alt="art">
      </div>
    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Previous</span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Next</span>
    </button>
  </div>
</div>

.carousel-container {
  margin: auto;
  width: 80%;
}

.carousel-item {
  position: relative;
}

.carousel-item.active img {
  width: 100%;
}

.carousel-item:not(.active) img {
  width: 80%;
  position: absolute;
  top: 0;
  left: 10%;
  opacity: 0.5;
  transition: all 0.3s ease;
}

.carousel-item:not(.active) img:hover {
  width: 90%;
  left: 5%;
  opacity: 0.8;
  cursor: pointer;
}
    Login or Signup to reply.
  2. 0

    Here is a code snippet for Bootstrap 5:

    codepen example

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search