Slide Show angularjs and bootstrap (Carousel)
Wednesday, 9 September 2015
0
komentar
Kali ini saya akan membuat contoh slide show yang sering terlihat di blog saya ini yang memamerkan image di bagian atas seperti gambar di samping ini :Untuk pembutan slide show ini saya menggunakan bootstrap and angularjs
untuk lebih detail nya silahkan lihat situs resmi angularjs and bootstrap disini
Pertama tama kita membuat file index.html dimana file index.html diisi dengan ini
<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.4.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="CarouselDemoCtrl">
<div style="height: 305px">
<carousel interval="myInterval" no-wrap="noWrapSlides">
<slide ng-repeat="slide in slides" active="slide.active">
<img ng-src="{{slide.image}}" style="margin:auto;">
<div class="carousel-caption">
<h4>Slide {{$index}}</h4>
<p>{{slide.text}}</p>
</div>
</slide>
</carousel>
</div>
<div class="row">
<div class="col-md-6">
<button type="button" class="btn btn-info" ng-click="addSlide()">Add Slide</button>
<div class="checkbox">
<label>
<input type="checkbox" ng-model="noWrapSlides">
Disable Slide Looping
</label>
</div>
</div>
<div class="col-md-6">
Interval, in milliseconds: <input type="number" class="form-control" ng-model="myInterval">
<br />Enter a negative number or 0 to stop the interval.
</div>
</div>
</div>
</body>
</html>
keterangan Index.html
*) Script dengan warna merah di file index.html adalah script untuk memanggil module module angularjs,memanggil bootstraps dan memanggil controler untuk menjalankan slide show.
*) Untuk warna nya di hijaukan saya hanya menujukan cara memanggil fungsi fungsi yg nanti kita buat di example.js seperti ng-nglick itu seperti onClick kalau di javascript sedangkan ng-repeat itu loopingan buat ngeluarkan data dalam object seperti while di php. Ada lagi {{}} buka kurawal double dan tutup kurawal double itu untuk ngprint data hasil ng-repeat seperti echo di php terakhir ng-model itu untuk mengambil value misalkan di text atau checkbox dll.
*) untuk tulisan berwarna kuning itu menggambil link gambar seperti SRC = patch kalau di HTML.
Setela itu kita membuat file js dengan example.js. Js ini digunakan sebagai controller dan module angularjs untuk meload module module angularjs biasa di namain dengan nama app.js kalau membuat web berbasis angularjs dan bootstrap
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('CarouselDemoCtrl', function($scope) {
$scope.myInterval = 5000;
$scope.noWrapSlides = false;
var slides = $scope.slides = [];
$scope.addSlide = function() {
var newWidth = 600 + slides.length + 1;
slides.push({
image: '//placekitten.com/' + newWidth + '/300',
text: ['More', 'Extra', 'Lots of', 'Surplus'][slides.length % 4] + ' ' + ['Cats', 'Kittys', 'Felines', 'Cutes'][slides.length % 4]
});
};
for (var i = 0; i < 4; i++) {
$scope.addSlide();
}});
keterangan Example.js
*) Untuk tulisan yang berwarna orange itu beberapa contoh cara memanggil module module yang di sediakan anggular js dan memanggi bootstrap
*) untuk yang berwarna hijau itu nama controller nya yang nanti di panggil di index.htm dengan cara ng-controller="CarouselDemoCtrl"
*) untuk yang $scope.addSlide itu adalah nama fungsi utama untuk memanggil gambar yang setelah di sediakan oleh anggularjs atau bila anda custom sendiri dengan merubah filed yang ini dan patch image nya image: '//placekitten.com/' + newWidth + '/300'
yang nanti $scope.addSlide akan di looping buat menampilkan image image yang ada
untuk lebih jelas nya anda bole melihat DEMO yang telah di sediakan oleh situs resmi UI Bootstrap disini
TERIMA KASIH ATAS KUNJUNGANNYA
Judul artikel :Slide Show angularjs and bootstrap (Carousel)
Ditulis oleh :Catatan-ati
Rating Blog :5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip,baik itu sebagian atau keseluruhan dari isi artikel ini harap menyertakan link dofollow ke:
http://catatan-ati.blogspot.com/2015/09/slide-show-angularjs-and-bootstrap.html.Terima kasih sudah singgah membaca artikel ini.Ditulis oleh :Catatan-ati
Rating Blog :5 dari 5
0 komentar:
Post a Comment