レスポンシブ対応のスライドショー
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | <!DOCTYPE html><head><title>FlexSlider 2</title><meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"><link rel="stylesheet" href="boot/css/flexslider.css" type="text/css" media="screen" /><script src="boot/js/modernizr.js"></script><style type="text/css">body{background:#000000;}.flexslider{background:#000000;}</style></head><body><section class="slider"><div class="flexslider"><ul class="slides"><li data-thumb="サムネ画像.jpg"><a href="#"><img src="boot/images/画像.jpg" /></a></li><li data-thumb="サムネ画像.jpg"><a href="#"><img src="boot/images/画像.jpg" /></a></li><li data-thumb="サムネ画像.jpg"><a href="#"><img src="boot/images/画像.jpg" /></a></li></ul></div></section><script defer src="boot/js/jquery.flexslider.js"></script><script type="text/javascript">$(window).load(function(){$('.flexslider').flexslider({animation: "fade",controlNav:"thumbnails",start: function(slider){$('body').removeClass('loading');}});});</script><script src="boot/js/jquery.easing.js"></script><script src="boot/js/jquery.mousewheel.js"></script></body></html> |
勉強させてもらったサイト
詳しい設定方法
サムネイルを表示させる方法