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>