Search code examples
htmlbootstrap-4responsive-slides

Bootstrap 4, want four item in slider

i want four item in one slide but in my case it shows only one

here is my code and screenshot

but in mobile view its work perfectly

my Bootstrap and JavaScript link given in code

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

css

div.pic{
  background-color: #353535;
  height: 300px;
  width: 400px;
  color: white;
}

Code

<div class="container-fluid" style="margin-top: 3%;">
  <div id="carouselExample" style="background-color: lightgray" class="carousel slide pointer-event" data-ride="carousel" data-interval="9000">
    <div class="carousel-inner row w-100" role="listbox">
      <div class="carousel-item col-lg-3 col-md-4 col-sm-6 col-12 active" align="center">
        <div class="pic">1</div>
      </div>
      <div class="carousel-item col-lg-3 col-md-4 col-sm-6 col-12" align="center">
        <div class="pic">2</div>
      </div>
      <div class="carousel-item col-lg-3 col-md-4 col-sm-6 col-12" align="center">
        <div class="pic">3</div>
      </div>
      <div class="carousel-item col-lg-3 col-md-4 col-sm-6 col-12" align="center">
        <div class="pic">4</div>
      </div>
    </div>
    <a class="carousel-control-prev text-faded" href="#carouselExample" 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 text-faded" href="#carouselExample" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>

screenshot enter image description here

Solution

  • You can solve this by putting 4 items in a single div like this:

    <div class="carousel-item col-lg-3 col-md-4 col-sm-6 col-12 active" align="center">
    <table>
        <tr>
            <td><div class="pic">1</div></td>
            <td><div class="pic">2</div></td>
            <td><div class="pic">3</div></td>
            <td><div class="pic">4</div></td>
        </tr>
    </table>
</div>

    More information:

    What you basically did was to create 4 slides as usual. By adding all 4 items into the main slide it will show them all at once. Of course, it needs more refining to look good though.

    Final Edit

    By putting the div's in a table it forces the items into a horizontal position.