jQuery「multirollslider」
(http://www.jqueryscript.net/slider/jQuery-Plugin-For-Simple-Image-Scroller-slider-js.html)
を使用し縦スクロールをしているスライダーの上に別の画像を被せて表示したいのですが、
どうしてもスライダー内の画像がずれてしまいます。
現在のコードでは
・上に重ねている画像(ue.gif)は中央に表示されている
・スライダーは希望通りの動きをしている
のですが、
・スライダー内の画像(sita.gif)の位置が右にずれてしまっている
状態です。
スライダーも被せている画像も画面中央に表示したいのですが、
どこを直せば良いのかどなたか教えていただけないでしょうか。
jQueryプラグインは何でもよく、
multirollsloderにこだわりがあるわけではありません。
ただ他の縦スクロール可のjQueryプラグインも試してみましたが、
一番理想の形に近づけられたのがこれだったので使っています。
以下コードです。
【HTML】
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="slider.css"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="slider.js"></script> <title>TEST</title> </head> <body> <div class="slideFrame" id="slide" > <ul class="slideGuide up"> <li class="slideCell"> <img src="sita.gif" width="640" height="960" /> </li> </ul> <div style="position: absolute; top : 0; left : 0; width: 640"> <img src="ue.gif" width="640" height="480" /> </div> </div> </body> <script> $(function(){ $("#slide").slider({ loop: false, // 自動でループ time: 30, speed: 0, direction: "up", // 「up」「down」「left」「right」を選択可能 reverse: false, // 逆再生 auto: true, // 自動再生 easing: "linear", // jQuery easing plugin に依存 guideSelector: ".slideGuide", cellSelector: ".slideCell", ctrlSelector: ".slideCtrl", dragCursorOpen: "open.cur", dragCursorClose: "close.cur", shuttle: false, ctrlClick: false, // クリックでスクロール ctrlHover: false, // マウスオーバーでスクロール draggable: false, // ドラッグ対応 once: true, pause: true, build: true, sp: 1 // 初期設定スピード }); }); </script> </html>
【CSS】
.slideFrame { overflow: hidden; width: 640px; height: 480px; margin: 50px auto; position:relative; } .slideCell { display: block; } .slideGuide .slideCell { float: left; margin-right: 5px; } .slideGuide.up .slideCell, .slideGuide.down .slideCell { float: none; margin-right: 0; margin-bottom: 10px; }
拙い文体で申し訳ありません。
どうかよろしくお願いします。
回答1件
あなたの回答
tips
プレビュー