• 締切済み

画面サイズに合わせて、中心がずれないスライダ

どなたか、助けてください！！！！ http://www.altour.com/ ↑ このような、横幅一杯にメインビジュアルがあり、 且つ、ウィンドウサイズに合わせて、 メインビジュアルの中心がずれないスライダ式の トップページを作りたく、 HTMLとCSSとjQueryでデザインしております。 このページのソースコードを見たり、 ネット検索で横幅いっぱい表示のスライダの作り方を探したり、 いろいろしているのですが、 まったくやり方がわかりません。。。。 jQueryでもそのようなプラグインが探せ出せませんでした。 どのようにしたら作れるか、 どなたか教えていただけませんでしょうか？？

  • CSS
  • 回答数1
  • ありがとう数0

みんなの回答

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.1

li要素のstyle属性中で <li class="slide current_slide"**** height: auto;/*変更*/ background-size: cover; /* 追加 */ "> で画像は収まるはずです。 　リンク（＞と＜）の位置は、それぞれright:leftプロパティで設定する

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. CSS

関連するQ&A

  • jQuery スライダー

    下記のサイトを参考にjQueryでブラウザウィンドウ幅めいっぱいに要素を並べたコンテンツスライダーを設置しました。 参考サイトにあるようにちゃんと動かす事は出来たのですが。 しかし、現在作成中のwebページは、このコンテンツスライダー要素全体を囲うブロック要素が1000px,スライダーを表示する幅を950pxにしたいのですが自分なりに試行錯誤しても、メイン表示エリアがスライダーを表示する、幅950px内の中央に来ません。 参考サイトには、今回のjqueryのソースではコンテンツスライダー要素全体を囲うブロック要素が100%でないといけないとなっています、この場合はHTML,CSS,SCRIPTどこを変えれば、コンテンツスライダー要素全体を囲うブロック要素が1000px,スライダーを表示する幅を950pxに納める事ができるのでしょうか？ 自分のソースを書くスペースが無いので、申し訳ありませんが、私が参考にしたサイトのURLよりソースをご確認頂き、ご指摘お願いいたします。 参考サイト http://black-flag.net/jquery/20121219-4407.html

  • jqueryでスライダーを設置した時に

    jqueryでスライダーを設置した時に設置したページのテキストが画像がスライドするタイミングで点滅してしまうようです。 現象が起こっているのはMacのsafariとchromeです WindowsのIEやモダンブラウザ、MacのFirefoxではオッケーのようです。 ちなみにコンテンツスライダーは、glide.jsやbxslider.jsです。両方とも同じ現象が起きます。 chrome はwebkitではなくなりましたし、、、 該当ページでは、スティッキーヘッダ、トップへ戻るボタン、ロールオーバーや複数のタブパネルなど、jQueryの塊のようなページになっておりまして、、、 ただ、それらをすべて無効にして、スライダだけを実装状態にしても同じようです。 スライダーそれぞれのCSSをみてみましたが、同ページにあるCSSの他のセレクトと同名のセレクタはないようです、、、 どなたか似たような現象を解決された方がいらっしゃいましたらご教示願えますでしょうか？

  • divの中に外部のHTMLを埋め込む

    divの中に外部のHTMLを埋め込む（読み込む）ことはできますか？推奨されていますか？ その際には何というタグで読み込むのでしょうか？ IE8/9を対象にしています。 jqueryで作った独自のコンテンツ（html)を読み込みたいです。 なぜメインのHTMLに直接j独自コンテンツのソースを張ろうと思わなかったのは こちら側で作ったコンテンツを第三者に配布した場合、 jqueryで作ったページが利用しているCSSのidセレクタ名などがメイン（読込み先html）が利用しているCSSのidとかぶってしまう可能性があると思ったからです。 メインページが読み込むCSSはメインページが利用するCSSただ１つとしておきたいのです。 何かいい方法はありますか？

    • ベストアンサー
    • CSS
  • jQueryの基本的なことについて教えてください

    自サイトで 「jQuery Slider²」http://wex.im/javascript/jquery-slider2 を設置しようと試みています。 私はhtmlとcssの知識しかありません。 今までずっと、HTML 4.01 Transitionalで、タグ打ちしながらサイトの作成をしていました。 行き詰ったらその都度ネットで調べて…という感じで 10年以上サイト製作をしていますが素人ほどの知識だと思っています。 それで、初めて上のスライドショーを設置しようと色んなサイトを参考にしたのですがうまく動きません。 （google chrome、IE8で見ています） 何が悪いのか…と上記URLの配布サイトを見たところ、 Examples <head> stuff <script type="text/javascript" src="js/jquery.slider.min.js"></script> <link href="css/jquery.slider.css" rel="stylesheet" type="text/css" /> と、2段目がtype="text/css" />という風に閉じてあって、 あぁ、これってページ全体をもうhtmlじゃなくて xhtmlで書かないと動かないって事なのかなぁ、という疑問が沸いてきました。 実際このスライドショーに限らず、jqueryのプラグインを使用している 色んなサイトがxhtml方式になっているのを確認しましたが jQueryのプラグインは、xhtmlでないと動かないものでしょうか？ それとも、このプラグインに限ってはxhtmlなのでしょうか？ よろしくお願いいたします。

  • Jqueryでコンテンツスライダーを設置する

    下記のサイトを参考にjQueryでブラウザウィンドウ幅めいっぱいに要素を並べたコンテンツスライダーを設置しました。 参考サイトにあるようにちゃんと動かす事は出来たのですが。 参考サイトには「今回のjqueryのソースではコンテンツスライダー要素全体を囲うブロック要素が100%でないといけない」となっており、 参考サイトにあるjqueryのソースを幅1000px（コンテンツスライダー要素全体を囲うブロック要素）のコンテナー内の中央に幅950pxで表示させることは可能でしょうか？ どこを変更すれば、いいのか教えて下さい。 参考サイト http://black-flag.net/jquery/20121219-4407.html

  • jQueryスライダーの止め方

    jQuery Destaque Plugin http://globocom.github.io/destaque/ こちらのサイトのパララックススライダーを使おうと考えていますが、 デフォルトでスライドをストップさせる方法がわかりません。 どなたかご教授下さいますでしょうか。 また、このプラグインを使って ページネーションをつけた例がございますが、 http://www.nxworld.net/sample/jquery-destaque/ 「３」「４」を表示中に「１」「２」を押すと、 スライドが左から右に遷移しますが、 この方向を固定で右から左へ動かすことは可能でしょうか？ こちらもわかる方がいらっしゃいましたら、是非宜しくお願い致します。

  • JQueryで動的生成のスライダが動くようにしたい

    すみません。JQueryで multipleスライダのページ を作っています。 「GO!」ボタンを押すごとに、動的にスライダフレームが生成され、 それぞれのsliderが動くようにしたいです。 しかし、「GO!」ボタンを押して生成されたスライダは動かず、デフォルトで表示されていたスライダだけが動く状態です。 また、「src」ボタンでdivタグのid=eq以下のHTMLを出力できますが、見た限りではデフォルトで表示させている2つのスライダフレームと同じように見えます。 なぜこのままだと動的生成させたほうのスライダが動かないのでしょうか？ お手数おかけしますが、もしわかればご教授願います。

  • Wordpressサムネイル付スライダープラグイン

    Wordpressでサムネイル付のスライダーを簡単・シンプルに設置できる無料プラグインがありましたら教えて下さい。 このたび、知人からの依頼で知人の会社のサイトをリニューアルすることになりました。 以前まで利用していたものはこちらだったのですが Photospace http://isowanted.blogspot.jp/2013/03/wordpressphotospace.html あたらしいテーマではこれは動かないようで、このプラグインにかわるモノを探しています。イメージはこのプラグインのでもそのもので、サムネイルをクリックすると画像がかわるというものです。 Nivo Slider こちらも検討してみたのですが、これは1つのサイトにつき1パターンのスライドショーになりますよね。 知人の会社はコテージを数棟経営していて、各コテージのページにスライダーをつけたいと考えています。 サイトの更新は知人の会社の担当さんがされるので、jQueryを直接触らなければ行けないものだと難しいのかなと思い、プラグインでなにか良い物があればと思っています。 よろしくお願い致します。

    • ベストアンサー
    • CSS
  • jQuery slider2のページアイコン

    小生、ウェブサイト制作経験はアリながらもJavascriptに関しては全くの素人です。 既成のJavascriptプログラムの中でスライドショー向けのｊQuery slider2をダウンロードし、 ウェブサイトに適応してみました。 概ね思った通りに作動するものの、スライダー部分の右下に表示されページアイコン（class="jquery-slider-page"として作成されている部分？）が、現在表示している部分に相当するアイコンをクリックすると、現在表示している画像を進行方向に流してしまい、背景が表示されるようになっています。 なおかつ、背景が表示された状態でもう一度同じアイコンをクリックすると、消えているはずの現在ページが一瞬表示されるものの、すぐに進行方向へ流してしまうというおかしな動作をします。 もともと期待されていた動作ではないと思うのですが、ダウンロードしてきたものをそのまま使ってこのような動作になってしまっていました。 不得手ながら中身を読み取ってみたところ、現在表示しているページのページアイコンをclass="jquery-slider-page"からclass="jquery-slider-page-current"に書き換えることで、アイコンの表示を変更しているようなので、一時的にclass="jquery-slider-page-current"のクリックを不可にすれば解決するのかなとは思うのですが、何かよい方法はないでしょうか。 使用しているjsは下記のとおりです。 https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js jquery.slider.min.js（http://wex.im/javascript/jquery-slider2にて公開されているファイルをダウンロードして使用） また、専用のCSSも特に書き換えなどせずに読み込ませて使用しています。 他にもjs併用はしていますが、紹介サイトでも同様の動作をしていたので、他のjsによる干渉などではない様です。 よろしくお願いします。

  • ホームページの画面をパソコン画面(プラウザ)の中心になるように設定したい

    ホームページの画面をパソコン画面(プラウザ)の中心になるように設定したいです。 ヤフーのtopページのように、ウインドゥを小さくしても大きくしても中心にくるようにしたいのですが、そのプログラム？HTMLとどこに貼ればいいか教えて下さい！

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する