Hosting Unlimited Indonesia

Recent Comment

Navigation

Cara Membuat Carousel Slider Responsive Menggunakan Flexlslider

Assalmualaikum Warahmatullahi Wabarakatu
Bismillahirrahmanirrahiim

Slider adalah informasi yang berjalan (sliding) di website sobat tentunya dengan design dan gambar yang menarik.

Responsive adalah sebuah teknik yang digunakan untuk membuat layout website menyesuaikan diri dengan tampilan device pengunjung, baik ukuran maupun orientasinya.

Pada postingan ini saya akan membahas bagaimana caranya membuat caraousel slider responsive menggunakan flexlsider, flexlsider memiliki beberapa jenis slide yang bisa digunakan, Oke langsung saja



Untuk membuat caraosel slider responsive, ikutilah langkah-langkah dibawah ini :

Langkah Pertama
Download plugins atau library flexlsider di situs resminya disini, dan jangan lupa download jquery nya disini

Langkah Kedua
Extract plugins atau library flexlsider yang sudah didownload di folder root aplikasi sobat.

Langkah Ketiga
Ketiklah script dibawah ini, dan simpan dengan nama yang sobat inginkan, dibawah ini ada beberapa macam script yang bisa digunakan untuk membuat caraosel slider responsive.

Scipt untuk basic slider

<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta content="charset=utf-8">
<title>Basic Slider</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<!-- Demo CSS -->
<link rel="stylesheet" href="css/demo.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/flexslider.css" type="text/css" media="screen" />
<!-- Modernizr -->
<script src="js/modernizr.js"></script>
</head>
<body class="loading">

  <div id="container" class="cf">
   
 <div id="main" role="main">
      <section class="slider">
        <div class="flexslider">
          <ul class="slides">
            <li>
            <img src="images/kitchen_adventurer_cheesecake_brownie.jpg" />
         </li>
         <li>
            <img src="images/kitchen_adventurer_lemon.jpg" />
         </li>
         <li>
            <img src="images/kitchen_adventurer_donut.jpg" />
         </li>
         <li>
            <img src="images/kitchen_adventurer_caramel.jpg" />
         </li>
          </ul>
        </div>
      </section>
    </div>

  </div>

  <!-- jQuery -->
  <script src="js/jquery.min.js"></script>
  <!-- FlexSlider -->
  <script defer src="js/jquery.flexslider.js"></script>
  <script type="text/javascript">
    $(window).load(function(){
      $('.flexslider').flexslider({
        animation: "slide",
        start: function(slider){
          $('body').removeClass('loading');
        }
      });
    });
  </script>

</body>
</html>

Scipt Untuk basic carousel slider

<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta content="charset=utf-8">
<title>Basic Carousel</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

<!-- Demo CSS -->
<link rel="stylesheet" href="css/demo.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/flexslider.css" type="text/css" media="screen" />
<!-- Modernizr -->
<script src="js/modernizr.js"></script>

</head>
<body class="loading">

  <div id="container" class="cf">

 <div id="main" role="main">
      <section class="slider">
        <div class="flexslider carousel">
          <ul class="slides">
            <li>
            <img src="images/kitchen_adventurer_cheesecake_brownie.jpg" />
         </li>
         <li>
            <img src="images/kitchen_adventurer_lemon.jpg" />
         </li>
         <li>
            <img src="images/kitchen_adventurer_donut.jpg" />
         </li>
         <li>
            <img src="images/kitchen_adventurer_caramel.jpg" />
         </li>
            <li>
            <img src="images/kitchen_adventurer_cheesecake_brownie.jpg" />
         </li>
         <li>
            <img src="images/kitchen_adventurer_lemon.jpg" />
         </li>
         <li>
            <img src="images/kitchen_adventurer_donut.jpg" />
         </li>
         <li>
            <img src="images/kitchen_adventurer_caramel.jpg" />
         </li>
            <li>
            <img src="images/kitchen_adventurer_cheesecake_brownie.jpg" />
         </li>
         <li>
            <img src="images/kitchen_adventurer_lemon.jpg" />
         </li>
         <li>
            <img src="images/kitchen_adventurer_donut.jpg" />
         </li>
         <li>
            <img src="images/kitchen_adventurer_caramel.jpg" />
         </li>
          </ul>
        </div>
      </section>
 
    </div>

  </div>

  <!-- jQuery -->
  <script src="js/jquery.min.js"></script>
  <!-- FlexSlider -->
  <script defer src="js/jquery.flexslider.js"></script>

  <script type="text/javascript">
    $(window).load(function(){
      $('.flexslider').flexslider({
        animation: "slide",
        animationLoop: false,
        itemWidth: 210,
        itemMargin: 5,
        pausePlay: true,
        start: function(slider){
          $('body').removeClass('loading');
        }
      });
    });
  </script>
</body>
</html>

Scipt untuk basic carousel with caption

<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta content="charset=utf-8">
<title>Basic slider with caption</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

<!-- Demo CSS -->
<link rel="stylesheet" href="css/demo.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/flexslider.css" type="text/css" media="screen" />
<!-- Modernizr -->
<script src="js/modernizr.js"></script>

  <style type="text/css">
    .flex-caption {
      width: 96%;
      padding: 2%;
      left: 0;
      bottom: 0;
      background: rgba(0,0,0,.5);
      color: #fff;
      text-shadow: 0 -1px 0 rgba(0,0,0,.3);
      font-size: 14px;
      line-height: 18px;
    }
    li.css a {
      border-radius: 0;
    }
  </style>

</head>
<body class="loading">

  <div id="container" class="cf">

 <div id="main" role="main">
      <section class="slider">
        <div class="flexslider">
          <ul class="slides">
            <li>
            <img src="images/kitchen_adventurer_cheesecake_brownie.jpg" />
              <p class="flex-caption">Adventurer Cheesecake Brownie</p>
         </li>
         <li>
            <img src="images/kitchen_adventurer_lemon.jpg" />
              <p class="flex-caption">Adventurer Lemon</p>
         </li>
         <li>
            <img src="images/kitchen_adventurer_donut.jpg" />
              <p class="flex-caption">Adventurer Donut</p>
         </li>
         <li>
            <img src="images/kitchen_adventurer_caramel.jpg" />
              <p class="flex-caption">Adventurer Caramel</p>
         </li>
          </ul>
        </div>
      </section>
    </div>

  </div>

  <!-- jQuery -->
  <script src="js/jquery.min.js"></script>
  <!-- FlexSlider -->
  <script defer src="js/jquery.flexslider.js"></script>

  <script type="text/javascript">
    $(function(){
      SyntaxHighlighter.all();
    });
    $(window).load(function(){
      $('.flexslider').flexslider({
        animation: "slide",
        start: function(slider){
          $('body').removeClass('loading');
        }
      });
    });
  </script>

</body>
</html>

Scipt untuk Basic slider with custom direction nav

<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta content="charset=utf-8">
<title>Basic slider with custom direction nav</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

<!-- Demo CSS -->
<link rel="stylesheet" href="css/demo.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/flexslider.css" type="text/css" media="screen" />
<!-- Modernizr -->
<script src="js/modernizr.js"></script>
  <style>
    .flexslider {
      margin-bottom: 10px;
    }

    .flex-control-nav {
      position: relative;
      bottom: auto;
    }

    .custom-navigation {
      display: table;
      width: 100%;
      table-layout: fixed;
    }

    .custom-navigation > * {
      display: table-cell;
    }

    .custom-navigation > a {
      width: 50px;
    }

    .custom-navigation .flex-next {
      text-align: right;
    }
  </style>

</head>
<body class="loading">

 <div id="container" class="cf">
   
  <div id="main" role="main">

      <section class="slider">
        <div class="flexslider">
          <ul class="slides">
            <li>
              <img src="images/kitchen_adventurer_cheesecake_brownie.jpg" />
            </li>
            <li>
              <img src="images/kitchen_adventurer_lemon.jpg" />
            </li>
            <li>
              <img src="images/kitchen_adventurer_donut.jpg" />
            </li>
            <li>
              <img src="images/kitchen_adventurer_caramel.jpg" />
            </li>
          </ul>
        </div>
        <div class="custom-navigation">
          <a href="#" class="flex-prev">Prev</a>
          <div class="custom-controls-container"></div>
          <a href="#" class="flex-next">Next</a>
        </div>
      </section>

    </div>
  </div>

   <!-- jQuery -->
  <script src="js/jquery.min.js"></script>
  <!-- FlexSlider -->
  <script defer src="js/jquery.flexslider.js"></script>
  <script type="text/javascript">
    $(function(){
      SyntaxHighlighter.all();
    });
    $(window).load(function(){
      $('.flexslider').flexslider({
        animation: "slide",
        controlsContainer: $(".custom-controls-container"),
        customDirectionNav: $(".custom-navigation a"),
        start: function(slider){
          $('body').removeClass('loading');
        }
      });
    });
  </script>

</body>
</html>

Scipt Untuk carousel min max

<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta content="charset=utf-8">
<title>Carousel min max</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

<!-- Demo CSS -->
<link rel="stylesheet" href="css/demo.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/flexslider.css" type="text/css" media="screen" />
<!-- Modernizr -->
<script src="js/modernizr.js"></script>

</head>
<body class="loading">

  <div id="container" class="cf">
   
 <div id="main" role="main">
      <section class="slider">
        <div class="flexslider carousel">
          <ul class="slides">
            <li>
            <img src="images/kitchen_adventurer_cheesecake_brownie.jpg" />
         </li>
         <li>
            <img src="images/kitchen_adventurer_lemon.jpg" />
         </li>
         <li>
            <img src="images/kitchen_adventurer_donut.jpg" />
         </li>
         <li>
            <img src="images/kitchen_adventurer_caramel.jpg" />
         </li>
         <li>
            <img src="images/kitchen_adventurer_cheesecake_brownie.jpg" />
         </li>
         <li>
            <img src="images/kitchen_adventurer_lemon.jpg" />
         </li>
         <li>
            <img src="images/kitchen_adventurer_donut.jpg" />
         </li>
         <li>
            <img src="images/kitchen_adventurer_caramel.jpg" />
         </li>
         <li>
            <img src="images/kitchen_adventurer_cheesecake_brownie.jpg" />
         </li>
         <li>
            <img src="images/kitchen_adventurer_lemon.jpg" />
         </li>
         <li>
            <img src="images/kitchen_adventurer_donut.jpg" />
         </li>
         <li>
            <img src="images/kitchen_adventurer_caramel.jpg" />
         </li>
          </ul>
        </div>
      </section>
    </div>

  </div>

   <!-- jQuery -->
  <script src="js/jquery.min.js"></script>
  <!-- FlexSlider -->
  <script defer src="js/jquery.flexslider.js"></script>
  <script type="text/javascript">
    $(window).load(function(){
      $('.flexslider').flexslider({
        animation: "slide",
        animationLoop: false,
        itemWidth: 210,
        itemMargin: 5,
        minItems: 2,
        maxItems: 4,
        start: function(slider){
          $('body').removeClass('loading');
        }
      });
    });
  </script>

</body>
</html>

Scipt untuk dynamic carousel min-max

<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta content="charset=utf-8">
<title>Dynamic carousel min-max</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

<!-- Demo CSS -->
<link rel="stylesheet" href="css/demo.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/flexslider.css" type="text/css" media="screen" />
<!-- Modernizr -->
<script src="js/modernizr.js"></script>

</head>
<body class="loading">

  <div id="container" class="cf">

 <div id="main" role="main">
      <section class="slider">
        <div class="flexslider carousel">
          <ul class="slides">
            <li>
            <img src="images/kitchen_adventurer_cheesecake_brownie.jpg" />
         </li>
         <li>
            <img src="images/kitchen_adventurer_lemon.jpg" />
         </li>
         <li>
            <img src="images/kitchen_adventurer_donut.jpg" />
         </li>
         <li>
            <img src="images/kitchen_adventurer_caramel.jpg" />
         </li>
            <li>
              <img src="images/kitchen_adventurer_cheesecake_brownie.jpg" />
            </li>
            <li>
              <img src="images/kitchen_adventurer_lemon.jpg" />
            </li>
            <li>
              <img src="images/kitchen_adventurer_donut.jpg" />
            </li>
            <li>
              <img src="images/kitchen_adventurer_caramel.jpg" />
            </li>
            <li>
              <img src="images/kitchen_adventurer_cheesecake_brownie.jpg" />
            </li>
            <li>
              <img src="images/kitchen_adventurer_lemon.jpg" />
            </li>
            <li>
              <img src="images/kitchen_adventurer_donut.jpg" />
            </li>
            <li>
              <img src="images/kitchen_adventurer_caramel.jpg" />
            </li>
          </ul>
        </div>
      </section>
    </div>

  </div>

 <!-- jQuery -->
  <script src="js/jquery.min.js"></script>
  <!-- FlexSlider -->
  <script defer src="js/jquery.flexslider.js"></script>
  <script type="text/javascript">

    (function() {

      // store the slider in a local variable
      var $window = $(window),
          flexslider = { vars:{} };

      // tiny helper function to add breakpoints
      function getGridSize() {
        return (window.innerWidth < 600) ? 2 :
               (window.innerWidth < 900) ? 3 : 4;
      }

      $window.load(function() {
        $('.flexslider').flexslider({
          animation: "slide",
          animationSpeed: 400,
          animationLoop: false,
          itemWidth: 210,
          itemMargin: 5,
          minItems: getGridSize(), // use function to pull in initial value
          maxItems: getGridSize(), // use function to pull in initial value
          start: function(slider){
            $('body').removeClass('loading');
            flexslider = slider;
          }
        });
      });

      // check grid size on resize event
      $window.resize(function() {
        var gridSize = getGridSize();

        flexslider.vars.minItems = gridSize;
        flexslider.vars.maxItems = gridSize;
      });
    }());

  </script>
</body>
</html>

Scipt Untuk thumbnail control nav

<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta content="charset=utf-8">
<title>Thumbnail Controlnav</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

<!-- Demo CSS -->
<link rel="stylesheet" href="css/demo.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/flexslider.css" type="text/css" media="screen" />
<!-- Modernizr -->
<script src="js/modernizr.js"></script>
</head>
<body class="loading">

  <div id="container" class="cf">
 <div id="main" role="main">
      <section class="slider">
        <div class="flexslider">
          <ul class="slides">
            <li data-thumb="images/kitchen_adventurer_cheesecake_brownie.jpg">
            <img src="images/kitchen_adventurer_cheesecake_brownie.jpg" />
         </li>
         <li data-thumb="images/kitchen_adventurer_lemon.jpg">
            <img src="images/kitchen_adventurer_lemon.jpg" />
         </li>
         <li data-thumb="images/kitchen_adventurer_donut.jpg">
            <img src="images/kitchen_adventurer_donut.jpg" />
         </li>
         <li data-thumb="images/kitchen_adventurer_caramel.jpg">
            <img src="images/kitchen_adventurer_caramel.jpg" />
         </li>
          </ul>
        </div>
      </section>
    
    </div>

  </div>

  <!-- jQuery -->
  <script src="js/jquery.min.js"></script>
  <!-- FlexSlider -->
  <script defer src="js/jquery.flexslider.js"></script>

  <script type="text/javascript">
    $(window).load(function(){
      $('.flexslider').flexslider({
        animation: "slide",
        controlNav: "thumbnails",
        start: function(slider){
          $('body').removeClass('loading');
        }
      });
    });
  </script>

</body>
</html>

Scipt untuk thumbnail slider

<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta content="charset=utf-8">
<title>Thumbnail Slider</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

<!-- Demo CSS -->
<link rel="stylesheet" href="css/demo.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/flexslider.css" type="text/css" media="screen" />
<!-- Modernizr -->
<script src="js/modernizr.js"></script>
</head>
<body class="loading">

  <div id="container" class="cf">

 <div id="main" role="main">
      <section class="slider">
        <div id="slider" class="flexslider">
          <ul class="slides">
            <li>
            <img src="images/kitchen_adventurer_cheesecake_brownie.jpg" />
         </li>
         <li>
            <img src="images/kitchen_adventurer_lemon.jpg" />
         </li>
         <li>
            <img src="images/kitchen_adventurer_donut.jpg" />
         </li>
         <li>
            <img src="images/kitchen_adventurer_caramel.jpg" />
         </li>
            <li>
            <img src="images/kitchen_adventurer_cheesecake_brownie.jpg" />
         </li>
         <li>
            <img src="images/kitchen_adventurer_lemon.jpg" />
         </li>
         <li>
            <img src="images/kitchen_adventurer_donut.jpg" />
         </li>
         <li>
            <img src="images/kitchen_adventurer_caramel.jpg" />
         </li>
            <li>
            <img src="images/kitchen_adventurer_cheesecake_brownie.jpg" />
         </li>
         <li>
            <img src="images/kitchen_adventurer_lemon.jpg" />
         </li>
         <li>
            <img src="images/kitchen_adventurer_donut.jpg" />
         </li>
         <li>
            <img src="images/kitchen_adventurer_caramel.jpg" />
         </li>
          </ul>
        </div>
        <div id="carousel" class="flexslider">
          <ul class="slides">
            <li>
            <img src="images/kitchen_adventurer_cheesecake_brownie.jpg" />
         </li>
         <li>
            <img src="images/kitchen_adventurer_lemon.jpg" />
         </li>
         <li>
            <img src="images/kitchen_adventurer_donut.jpg" />
         </li>
         <li>
            <img src="images/kitchen_adventurer_caramel.jpg" />
         </li>
            <li>
            <img src="images/kitchen_adventurer_cheesecake_brownie.jpg" />
         </li>
         <li>
            <img src="images/kitchen_adventurer_lemon.jpg" />
         </li>
         <li>
            <img src="images/kitchen_adventurer_donut.jpg" />
         </li>
         <li>
            <img src="images/kitchen_adventurer_caramel.jpg" />
         </li>
            <li>
            <img src="images/kitchen_adventurer_cheesecake_brownie.jpg" />
         </li>
         <li>
            <img src="images/kitchen_adventurer_lemon.jpg" />
         </li>
         <li>
            <img src="images/kitchen_adventurer_donut.jpg" />
         </li>
         <li>
            <img src="images/kitchen_adventurer_caramel.jpg" />
         </li>
          </ul>
        </div>
      </section>
   
    </div>

  </div>

  <!-- jQuery -->
  <script src="js/jquery.min.js"></script>
  <!-- FlexSlider -->
  <script defer src="js/jquery.flexslider.js"></script>

  <script type="text/javascript">
    $(window).load(function(){
      $('#carousel').flexslider({
        animation: "slide",
        controlNav: false,
        animationLoop: false,
        slideshow: false,
        itemWidth: 210,
        itemMargin: 5,
        asNavFor: '#slider'
      });

      $('#slider').flexslider({
        animation: "slide",
        controlNav: false,
        animationLoop: false,
        slideshow: false,
        sync: "#carousel",
        start: function(slider){
          $('body').removeClass('loading');
        }
      });
    });
  </script>

</body>
</html>


Langkah Keempat
Eksekusi script yang telah sobat ketik diatas dan lihat hasilnya, jika sobat telah melakukannya dengan benar maka sobat akan melihat tampilan seperti gambar dibawah ini.

Tampilan untuk basic slider


Tampilan Untuk basic carousel slider



Tampilan untuk basic carousel with caption



Tampilan untuk thumbnail slider




Kalau sobat membutuhkan source tersebut silahkan download melalui lin dibawh ini, jika ada kesalahan atau error bisa disampaikan melalui kolom komentar. Semoga tutorial tips ini bermanfaat bagi sobat, atas segala kekuranganya mohon dimaafkan.

Share
Hosting Unlimited Indonesia

agus ribudi

Programmer, Web Developer, Android Developer and Blogger

Post A Comment:

3 comments:

  1. kalo untuk mengganti backgroundnya selain warna biru di sebelah mana ya?

    ReplyDelete
  2. kalo untuk mengganti backgroundnya selain warna biru di sebelah mana ya?

    ReplyDelete
    Replies
    1. Coba inspect elemen di bagian body mas, terus cari background yang berwarna biru dan ganti pada file cssnya

      Delete

Rekomendasi Untuk Anda × +