codinko/bootstrap-carousel-multiple-items.html

## bootstrap-carousel-multiple-items.html
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Carousel Multiple Columns Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.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.4.1/js/bootstrap.min.js"></script>

<body>

  <div id="demo" style="border:1px solid red; width:430px" class="carousel slide" data-ride="carousel">


    <ul class="carousel-indicators">
      <li data-target="#demo" data-slide-to="0" class="active"></li>
      <li data-target="#demo" data-slide-to="1"></li>
      <li data-target="#demo" data-slide-to="2"></li>
    </ul>


    <div class="carousel-inner">
      <div class="carousel-item active">

        <div class="row">
          <div class="col-xs-4">
            <img src="images/book1.jpg" alt="Malayalam Books">
          </div>
          <div class="col-xs-4">
            <img src="images/book2.jpg" alt="Malayalam Books">
          </div>
          <div class="col-xs-4">
            <img src="images/book3.jpg" alt="Malayalam Books">
          </div>
        </div>

      </div>

      <div class="carousel-item">

        <div class="row">
          <div class="col-xs-4">
            <img src="images/book4.jpg" alt="Malayalam Books">
          </div>
          <div class="col-xs-4">
            <img src="images/book5.jpg" alt="Malayalam Books">
          </div>
          <div class="col-xs-4">
            <img src="images/book6.png" alt="Malayalam Books">
          </div>
        </div>

      </div>

    </div>


    <a class="carousel-control-prev" href="#demo" data-slide="prev">
      <span class="carousel-control-prev-icon"></span>
    </a>
    <a class="carousel-control-next" href="#demo" data-slide="next">
      <span class="carousel-control-next-icon"></span>
    </a>
  </div>

</body>

</html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<title>Bootstrap Carousel Multiple Columns Example</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.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.4.1/js/bootstrap.min.js"></script>

	<body>

	<div id="demo" style="border:1px solid red; width:430px" class="carousel slide" data-ride="carousel">


	<ul class="carousel-indicators">
	<li data-target="#demo" data-slide-to="0" class="active"></li>
	<li data-target="#demo" data-slide-to="1"></li>
	<li data-target="#demo" data-slide-to="2"></li>
	</ul>


	<div class="carousel-inner">
	<div class="carousel-item active">

	<div class="row">
	<div class="col-xs-4">
	<img src="images/book1.jpg" alt="Malayalam Books">
	</div>
	<div class="col-xs-4">
	<img src="images/book2.jpg" alt="Malayalam Books">
	</div>
	<div class="col-xs-4">
	<img src="images/book3.jpg" alt="Malayalam Books">
	</div>
	</div>

	</div>

	<div class="carousel-item">

	<div class="row">
	<div class="col-xs-4">
	<img src="images/book4.jpg" alt="Malayalam Books">
	</div>
	<div class="col-xs-4">
	<img src="images/book5.jpg" alt="Malayalam Books">
	</div>
	<div class="col-xs-4">
	<img src="images/book6.png" alt="Malayalam Books">
	</div>
	</div>

	</div>

	</div>


	<a class="carousel-control-prev" href="#demo" data-slide="prev">
	<span class="carousel-control-prev-icon"></span>
	</a>
	<a class="carousel-control-next" href="#demo" data-slide="next">
	<span class="carousel-control-next-icon"></span>
	</a>
	</div>

	</body>

	</html>