Membuat Slider Responsive & Adaptif Disemua Perangkat Dengan Bootstrap

Admin Juni 20, 2020 Script , Tutorial CSS Comment

Pada artikel sebelumnya saya telah berbagi Script Slider Responsive Sederhana Dengan CSS dan jQuery. Namun pada artikel ini saya akan berbagi lagi sebuah Script Slider Responsive Dengan Bootstrap.

Dari segi fungsi, script ini tidak jauh berbeda dengan script slider sebelummya. Yaitu untuk membuat atau menampilkan slide gambar, text atau html pada blog/website.

Cara penggunaannya-pun sama dengan script sebelumnya. Untuk itu langsung saja saya kasih contoh lengkapnya :

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Slider Responsive & Adaptif</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>.carousel-inner > .item > img,.carousel-inner > .item > a > img { width: 100%; margin: auto;}</style>
</head>
<body>

<div class="container">
  <div id="WJSlider" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#WJSlider" data-slide-to="0" class="active"></li>
      <li data-target="#WJSlider" data-slide-to="1"></li>
      <li data-target="#WJSlider" data-slide-to="2"></li>
      <li data-target="#WJSlider" data-slide-to="3"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">

      <div class="item active">
        <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhf9om2fi3JpO8-sY4c3VtsD9xLTpocSI2nbubpD6oGa7oQ9-W6dyaZuXyUbLfS5CZh9_xvqD-YdKwKHEpw0kie6X3UzoAVNTp2-hfhd5dOLmdQGqF_-uBLRZbWyfoSPJsS7tkVYU3yLxja/d/slide1.jpg" alt="slide1" width="460" height="345">
        <div class="carousel-caption">
          <h3>Judul Gambar 1</h3>
          <p>Ini adalah deskripsi singkat dari judul gambar yang pertama.</p>
        </div>
      </div>

      <div class="item">
        <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjROBQdwlFT2J364h4MCZHOapr_LbK7AtfDPdgKTciaI7WDe4QKQWIWkLi8kzleJmPmeQaDXeRMo7VbeOAKHX75QJBsY-3tsJKVhF88iU_b_TwrMM8rQwxGN_qNxXx4vxycdXR2T3qCWPMS/d/slide2.jpg" alt="slide2" width="460" height="345">
        <div class="carousel-caption">
          <h3>Judul Gambar 2</h3>
          <p>Ini adalah deskripsi singkat dari judul gambar yang ke dua.</p>
        </div>
      </div>
  
      <div class="item">
        <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhI9AakLzxZgZNGxpqbiJdqc0WIRPBPy21cYZR3B3eQH4ELIxViXfsefYsnMHyKBaqhZQadOM9YHz4VnXIYX9RLNXXv4GQESL2Snd-Z4PoUU5sprMQOokN_Na0DtiglOkmxYUsSqqkZmsGh/d/slide3.jpg" alt="slide3" width="460" height="345">
        <div class="carousel-caption">
          <h3>Judul Gambar 3</h3>
          <p>Ini adalah deskripsi singkat dari judul gambar yang ke tiga.</p>
        </div>
      </div>
 
    </div>

    <!-- Left and right controls -->
    <a class="left carousel-control" href="#WJSlider" role="button" data-slide="prev">
  <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
  <span class="sr-only">Kembali</span>
  </a>
  <a class="right carousel-control" href="#WJSlider" role="button" data-slide="next">
  <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
  <span class="sr-only">Lanjut</span>
  </a>
  </div>
</div>
</body>
</html>

Dengan script diatas, maka tampilan slidenya akan terlihat seperti ini:

20 Juni 2020

Membuat Slider Responsive & Adaptif Disemua Perangkat Dengan Bootstrap

Cara Membuat Slider Responsive

Cara Membuat Gambar Slide

Script Slider Bootstrap

0 Post a Comment

Posting Komentar

Featured