質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

スライダー

GUIのグラフィカルウィジェットのひとつです。インジケーターを動かすことで値を調節可能とします。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

1161閲覧

【jQuery】スライダーに画像を重ねたい

XuZHqLUR

総合スコア7

jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

スライダー

GUIのグラフィカルウィジェットのひとつです。インジケーターを動かすことで値を調節可能とします。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2017/09/17 14:10

編集2017/09/17 14:17

jQuery「multirollslider」
http://www.jqueryscript.net/slider/jQuery-Plugin-For-Simple-Image-Scroller-slider-js.html)
を使用し縦スクロールをしているスライダーの上に別の画像を被せて表示したいのですが、
どうしてもスライダー内の画像がずれてしまいます。

現在のコードでは
・上に重ねている画像(ue.gif)は中央に表示されている
・スライダーは希望通りの動きをしている
のですが、
・スライダー内の画像(sita.gif)の位置が右にずれてしまっている
状態です。

<ul>、<li>を消すとスライダー内の画像の位置もぴったり中央に寄せられるのですが、 スライダーは動かなくなってしまいました。

スライダーも被せている画像も画面中央に表示したいのですが、
どこを直せば良いのかどなたか教えていただけないでしょうか。

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; }

拙い文体で申し訳ありません。
どうかよろしくお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2017/09/17 14:13

質問文のコードはそれぞれコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
guest

回答1

0

ベストアンサー

CSS

1ul.slideGuide { 2 padding: 0; 3}

投稿2017/09/17 14:43

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

XuZHqLUR

2017/09/17 23:30

ありがとうございます。 ご指摘の箇所を修正したら中央表示ができました。 こんな簡単なことだったとは…もっと勉強します。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問