Nivo-Slider-jQuer

	var w = $(window).width();

	if(w < 768){
		$('#slider').nivoSlider({
			effect:'slideInLeft', // 切り替えアニメーションの種類 random sliceDown sliceDownLeft sliceUp sliceUpLeft sliceUpDown sliceUpDownLeft fold fade random slideInRight slideInLeft boxRandom boxRain boxRainReverse boxRainGrow boxRainGrowReverse
			pauseTime:3000, // 切り替えまでの時間(ミリ秒)
			directionNavHide:true // マウスが重なった時のみナビを表示
		});
	} else {
		$('#slider').nivoSlider({
			effect:'random', // 切り替えアニメーションの種類 random sliceDown sliceDownLeft sliceUp sliceUpLeft sliceUpDown sliceUpDownLeft fold fade random slideInRight slideInLeft boxRandom boxRain boxRainReverse boxRainGrow boxRainGrowReverse
			pauseTime:3000, // 切り替えまでの時間(ミリ秒)
			controlNavThumbs:true,
			directionNavHide:true // マウスが重なった時のみナビを表示
		});
	}
        	
	<div class="theme-default">
		<div id="slider">
			<img class="img-responsive" src="images/slide1.jpg" data-thumb="images/slide1.jpg" />
			<img class="img-responsive" src="images/slide2.jpg" data-thumb="images/slide2.jpg" />
			<img class="img-responsive" src="images/slide3.jpg" data-thumb="images/slide3.jpg" />
			<img class="img-responsive" src="images/slide4.jpg" data-thumb="images/slide4.jpg" />
			<img class="img-responsive" src="images/slide5.jpg" data-thumb="images/slide5.jpg" />
			<img class="img-responsive" src="images/slide6.jpg" data-thumb="images/slide6.jpg" />
			<img class="img-responsive" src="images/slide7.jpg" data-thumb="images/slide7.jpg" />
			<img class="img-responsive" src="images/slide8.jpg" data-thumb="images/slide8.jpg" />
			<img class="img-responsive" src="images/slide9.jpg" data-thumb="images/slide9.jpg" />
			<img class="img-responsive" src="images/slide10.jpg" data-thumb="images/slide10.jpg" />
		</div>
	</div>
			
ページトップへ戻る