Header Ads Widget

Cara Membuat Carousel Slider Responsive Menggunakan Flexlslider

Aguzrybudy October 31, 2016
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

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556<!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

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687<!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

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283<!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

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697<!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

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687<!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

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111<!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

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859<!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

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137<!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.

Tags:

Post a Comment

5 Comments

  1. REZA ANTULA25 May 2017 at 16:55:00 GMT+7

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

    ReplyDelete
    Replies
    1. Anonymous17 April 2022 at 14:44:00 GMT+7

      Cara Membuat Carousel Slider Responsive Menggunakan Flexlslider >>>>> Download Now

      >>>>> Download Full

      Cara Membuat Carousel Slider Responsive Menggunakan Flexlslider >>>>> Download LINK

      >>>>> Download Now

      Cara Membuat Carousel Slider Responsive Menggunakan Flexlslider >>>>> Download Full

      >>>>> Download LINK X3

      Delete
  2. REZA ANTULA25 May 2017 at 17:11:00 GMT+7

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

    ReplyDelete
    Replies
    1. Aguzrybudy11 July 2017 at 06:33:00 GMT+7

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

      Delete
  3. Anonymous17 April 2022 at 14:43:00 GMT+7

    Cara Membuat Carousel Slider Responsive Menggunakan Flexlslider >>>>> Download Now

    >>>>> Download Full

    Cara Membuat Carousel Slider Responsive Menggunakan Flexlslider >>>>> Download LINK

    >>>>> Download Now

    Cara Membuat Carousel Slider Responsive Menggunakan Flexlslider >>>>> Download Full

    >>>>> Download LINK 4q

    ReplyDelete
:) :)) ;(( :-) =)) ;( ;-( :d :-d @-) :p :o :>) (o) [-( :-? (p) :-s (m) 8-) :-t :-b b-( :-# =p~ $-) (b) (f) x-) (k) (h) (c) cheer
Klik gambar emo untuk melihat kodenya
Untuk menyisipkan emoticon, beri satu spasi sebelum memasukkan kode

Berkomentarlah dengan baik dan sopan

MrJazsohanisharma
Rekomendasi Untuk Anda × −