[blog]
Hướng dẫn tạo slide chạy hình ảnh sử dụng thư viện Bootstrap đẹp, đơn giản nhất dễ làm sử dụng thư viện có sẵn của Bootstrap, mẫu Bootstrap slide hình ảnh đẹp, nội dung viết bởi giaodienblog.net.

Hướng dẫn tạo slide ảnh sử dụng thư viện Bootstrap


Đầu tiên để chạy được slide ảnh chúng ta cần có 3 thư viện, các bạn copy dán dưới thẻ <head>

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.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://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

Và dưới đây là html các bạn dán trong thẻ <body>

<div class="container">
  <div id="myCarousel" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
      <div class="item active">
        <img src="url-image-1.jpg" alt="image-1" style="width:100%;">
      </div>
      <div class="item">
        <img src="url-image-2.jpg" alt="image-2" style="width:100%;">
      </div>
      <div class="item">
        <img src="url-image-3.jpg" alt="image-3" style="width:100%;">
      </div>
    </div>
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>

Các bạn thay link hình ảnh vô 3 link bên trên.

Hướng dẫn tạo slide ảnh sử dụng thư viện Bootstrap
Ví dụ slide ảnh


[/blog]