横にスライドさせるスクロールについて考えていきます。11月17日記事
イメージ
MITライセンスで公開されているものをとってきて試してみました。
http://www.coolwebwindow.com/jquery-plugin/plugins/slidewide/index.html
今回、試しにsvg画像を使ってみました。結論から話すと、svgは読み込みに時間がかかりあまり使い物にならないことがわかりました。 jpgやpngを使ってやっていくことをお勧めします。
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="utf-8"> <title>横のスライドショー</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="css/style.css" media="all"> <script src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.slidewide.js"></script> <script> $(function(){ $('.slide01').slidewide({ touch : true, touchDistance : '80', autoSlide : true, repeat : true, interval : 4000,/*一つのスライドの表示時間*/ duration : 1000,/*次のスライドいくまでの時間*/ easing : 'swing', imgHoverStop : true, navHoverStop : true, prevPosition : 0, nextPosition : 0, filterNav : true, viewSlide : 1, baseWidth : 1000, navImg : false, navImgCustom : false, navImgSuffix : '' }); }); </script> </head> <body> <div class="slide01"> <ul class="slideInner"> <li><a href="index.html"><img src="images/image1.svg" alt=""></a></li> <li><a href="index.html"><img src="images/image2.svg" alt=""></a></li> <li><a href="index.html"><img src="images/image3.svg" alt=""></a></li> <li><a href="index.html"><img src="images/image4.svg" alt=""></a></li> </ul> <div class="slidePrev"><img src="images/nav_prev.png" alt="前へ"></div> <div class="slideNext"><img src="images/nav_next.png" alt="次へ"></div> <div class="controlNav"></div> </div> </body> </html>
各種の設定の仕方は
http://www.coolwebwindow.com/jquery-plugin/plugins/slidewide/index.html
に載っています。また、これはMITライセンスなので、ページにCopyright © 2015 CoolWebWindowを忘れずに
以上