Hallo teman teman balik lagi dengan saya Ismet Maulana kali ini saya ingin berbagi pengetahuan tentang Bagaimana Cara membuat slider Bergerak pergambar, teman teman pernah melihat website dengan slider bergerak pergambar sebelumnya, pasti pernah yah apalagi dijaman modern seperti sekarang ini pasti banyak banget. Oke saya langsung praktekan saja yah, teman bisa download

jquerynya di http://www.jqueryscript.net/slider/Fully-Responsive-Flexible-jQuery-Carousel-Plugin-slick.html  jika sudah didownload, teman teman buka folder demonya lalu kita akan bedah, tampilannya seperti ini :

<head>
  <title>Slick Playground</title>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="./slick/slick.css">
  <link rel="stylesheet" type="text/css" href="./slick/slick-theme.css">
  <style type="text/css">
    html, body {
      margin: 0;
      padding: 0;
    }

    * {
      box-sizing: border-box;
    }

    .slider {
        width: 50%;
        margin: 100px auto;
    }

    .slick-slide {
      margin: 0px 20px;
    }

    .slick-slide img {
      width: 100%;
    }

    .slick-prev:before,
    .slick-next:before {
        color: black;
    }
  </style>
</head>

lalu kita ketikan lagi yang ini :

<body>
<section class="center slider">
    <div>
      <img src="images/1.png">
    </div>
    <div>
      <img src="images/2.png">
    </div>
    <div>
      <img src="images/3.png">
    </div>
    <div>
      <img src="images/4.png">
    </div>
    <div>
      <img src="images/5.png">
    </div>
  </section>
</body>

<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
  <script src="./slick/slick.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript">
<script>
$(".center").slick({
        dots: true,
        infinite: true,
        centerMode: true,
        slidesToShow: 3,
        slidesToScroll: 3
      });

</script>

Jika sudah teman teman save dan jalankan dibrowser? Cukup mudah yah? Begitulah Cara membuat slider Bergerak pergambar, sekian tutorial tentang Bagaimana Cara membuat slider Bergerak pergambar, Selamat mencoba.

 

#KeepLearn

#IsmetMA