Cara Membuat Slider Gambar Sederhana Dengan AngularJs

Slider gambar adalah suatu animasi gambar yang berganti dengan gambar lainnya. Dan kali ini saya akan membahas tentang Cara Membuat Slider Gambar Sederhana Dengan AngularJs. Tapi slider disini saya akan gunakan dengan cara melakukan klik terlebih dahulu maka gambar satu akan berganti dengan gambar lain.

Langkah pertama untuk Cara Membuat Slider Gambar Sederhana Dengan AngularJs kita akan membuat struktur htmlnya seperti berikut ini.

<!DOCTYPE html>
<html>
<head>
  <title>Cara Membuat Slider Gambar Sederhana Dengan AngularJs</title>
  <style>
    ul{margin:0;}
    .container{display: flex;width: 900px; margin:auto;}
    .gallery , .slider{padding: 10px;}
    .gallery img{width: 200px;}
    .gallery li{list-style: none}
    .slider img{width: 800px;}
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
  <div class="container">
    <div class="gallery">
      <ul>
        <li ng-click="getIndex(image)" ng-repeat="image in images">
            <img class="img-fluid" ng-src="{{image.src}}">
        </li>
      </ul>
    </div>
    <div class="slider">
      <img class="img-fluid" ng-src="{{images[current].src}}">
    </div>
  </div>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Cara Membuat Slider Gambar Sederhana Dengan AngularJs</title>

<style>

ul{margin:0;}

.container{display: flex;width: 900px; margin:auto;}

.gallery , .slider{padding: 10px;}

.gallery img{width: 200px;}

.gallery li{list-style: none}

.slider img{width: 800px;}

</style>

</head>

<ul>

</li>

</ul>

</div>

</div>

</body>

</html>

Nah struktur html di atas saya membuat div untuk gallery gambar yang berukuran kecil dengan tag ul di dalamnya dan melooping gambarnya di tag li dengan memberikan ng-repeat kemudian tag img saya gunakan ng-src untuk mencetak gambarnya. Kemudian untukÂ menampilkan gambar besarnya saya buat div slider yang diberikan ng-src berdasarkan current atau index yang di klik. Untuk mendapatkan indexnya saya akan membuat sebuah fungsi getIndex() yang ketika li di klik maka fungsi akan di jalankan.

Sebelum membuat fungsi saya gunakan list gambar berikut ini untuk membuat slider gambarnya.

var images = [
    {
       "src": "https://polka.id/wp-content/uploads/2017/08/pexels-photo-77797.jpeg",
        "caption":"Anjing Malas"
    },
     {
       "src": "https://www.dictio.id/uploads/db3342/original/3X/a/4/a4a56ecc02d521d7aa3418667aabc3856ccbcebd.jpg",
       "caption":"Ayam Kampung"
     }, 
     {
       "src": "https://ae01.alicdn.com/kf/HTB1XDr_KXXXXXanaXXXq6xXFXXX3/Kustom-kucing-kupu-kupu-anak-kucing-melompat-hewan-rumput-gaya-70-x-140-cm-mandi-handuk.jpg",
       "caption":"Kucing Lucu"
     },
     {
        "src": "https://www.ukmonline.co.id/wp-content/uploads/cache/images/2018/10/5a83b41805aebca0efc1352bfadba9d7_cara-budidaya-hamster2/5a83b41805aebca0efc1352bfadba9d7_cara-budidaya-hamster2-186372551.jpg",
       "caption":"Hamster Lucu"
     }
  ];

var images = [

{

"src": "https://polka.id/wp-content/uploads/2017/08/pexels-photo-77797.jpeg",

"caption":"Anjing Malas"

{

"src": "https://www.dictio.id/uploads/db3342/original/3X/a/4/a4a56ecc02d521d7aa3418667aabc3856ccbcebd.jpg",

"caption":"Ayam Kampung"

{

"src": "https://ae01.alicdn.com/kf/HTB1XDr_KXXXXXanaXXXq6xXFXXX3/Kustom-kucing-kupu-kupu-anak-kucing-melompat-hewan-rumput-gaya-70-x-140-cm-mandi-handuk.jpg",

"caption":"Kucing Lucu"

{

"src": "https://www.ukmonline.co.id/wp-content/uploads/cache/images/2018/10/5a83b41805aebca0efc1352bfadba9d7_cara-budidaya-hamster2/5a83b41805aebca0efc1352bfadba9d7_cara-budidaya-hamster2-186372551.jpg",

"caption":"Hamster Lucu"

}

];

Langkah terakhir kita akan membuat fungsi getIndex() dan beberapa variable $scope yang di butuhkan.

var app = angular.module("myApp",[]);
  app.controller("myCtrl", function($scope){
    $scope.showCaption = true;
    $scope.images = images;
    $scope.current = 0;
  
    $scope.getIndex = function(img) {
      $scope.current = $scope.images.indexOf(img);
      
    }
    })

var app = angular.module("myApp",[]);

app.controller("myCtrl", function($scope){

$scope.showCaption = true;

$scope.images = images;

$scope.current = 0;

$scope.getIndex = function(img) {

$scope.current = $scope.images.indexOf(img);

}

})

Script di atas untuk index atau current defaultnya saya tampilkan index ke 0 dan jika li kita klik maka index di dapat dari $scope.images.indexOf(img); dimana img di dapat dari parameter yang kita klik. Jika teman-teman buka di browser masing-masing maka akan seperti pada gambar di bawah ini.

Demikian artikel tentang Cara Membuat Slider Gambar Sederhana Dengan AngularJs. Semoga dapat bermanfaat dan selamat mencoba.

Cara Membuat Slider Gambar Sederhana Dengan AngularJs

Facebook DUMET School

Categories