Javascript

【Javascript】シンプルでレスポンシブ。フェイディングスライドショーNGFADER

November 4, 2017
NGFADER

NGFADERはjQueryを必要としない、シンプルでレスポンシブ、AngularJSフェイディングスライドショー

Setup Instructions

ngFader CSSをリンク

link type="text/css" rel="stylesheet" href="css/ngFader.css"link type="text/css" rel="stylesheet" href="css/ngFader.css"

スクリプトタグを追加

<script src="js/directives/ngFader.js"></script>
angular.module('yourAppModule', ['ngAnimate', 'ngTouch', 'ngFader']);

イメージの場所をリストアップ

//Set your interval time. 4000 = 4 seconds
scope.setTime = 4000;

//List your images here. 
scope.images = [{
		src: 'img/slideshow/slideshow_Image_1_low.jpg',
		alt: 'Add your image description here'
		}, {
		src: 'img/slideshow/slideshow_Image_2_low.jpg',
		alt: 'Add your image description here'
		}, {
		src: 'img/slideshow/slideshow_Image_3_low.jpg',
		alt: 'Add your image description here'
		}, {
		src: 'img/slideshow/slideshow_Image_4_low.jpg',
		alt: 'Add your image description here'
}]

フェーダーに表示する位置を追加

MIT