Avatar of Robert Granlund
Robert GranlundFlag for United States of America asked on

Bootstrap Scrollbar to display multiple images and controls.

Is there a bootstrap scrollbar that will show multiple images and have controls?  I can only find a bootstrap scrollbar that shows one image at a time with controls.  I need to display five images and scroll one image at a time.

BootstrapCSSJavaScriptWordPress

Avatar of undefined
Last Comment
lenamtl

8/22/2022 - Mon
Scott Fell

Hi Robert, are you talking about the carousel?  https://getbootstrap.com/docs/5.1/components/carousel/ but show 5 images at one time instead of 1?
Scott Fell

You can add multiple items to one slide. Below would stack. Adjust the CSS if you need the images to align horizontal. 

<div id="carouselExampleDark" class="carousel carousel-dark slide" data-bs-ride="carousel">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item active" data-bs-interval="10000">
     1.1 <img src="..." class="d-block w-100" alt="...">
      1.2 <img src="..." class="d-block w-100" alt="...">
      1.3 <img src="..." class="d-block w-100" alt="...">
      1.4 <img src="..." class="d-block w-100" alt="...">
      1.5 <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>First slide label</h5>
        <p>Some representative placeholder content for the first slide.</p>
      </div>
    </div>
    <div class="carousel-item" data-bs-interval="2000">
     2 <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>Second slide label</h5>
        <p>Some representative placeholder content for the second slide.</p>
      </div>
    </div>
    <div class="carousel-item">
    3  <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>Third slide label</h5>
        <p>Some representative placeholder content for the third slide.</p>
      </div>
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleDark" 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="#carouselExampleDark" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

Open in new window

ASKER
Robert Granlund

@scott  Thank you in advance.  I will try this out, I think it is exactly what I am looking for.
All of life is about relationships, and EE has made a viirtual community a real community. It lifts everyone's boat
William Peck
ASKER CERTIFIED SOLUTION
lenamtl

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
See how we're fighting big data
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question