• 締切済み

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

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

みんなの回答

回答No.1

cssで wideslider { width: 100%; height: 500px; text-align: left; position: relative; overflow: hidden; } ↓ wideslider { width: 950px; height: 500px; text-align: left; position: relative; overflow: hidden; margin: 0 auto; } に調整してもダメですか?

関連する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スライダー

    お知恵をお貸しください。 http://black-flag.net/jquery/20130709-4710.html を参考にスライダーを勉強しています。 このスライダーをフリック対応にしたいと思っています。 試行錯誤し色々と試しているのですがうまく出来ません。 お分かりになる方、お知恵をお貸しください。 よろしくお願いします。

  • コンテンツが動くjquery?

    http://www.majigohan.jp/ このサイトのように、ブラウザの幅を変更するとコンテンツが動く(?)ようにしたいと思っています。 ソースを見てもよくわからないのですが、jqueryを使用しているのでしょうか? どなたか教えていただけると嬉しいです。

  • jquery スライダーが動かない

    昨日質問をしてなんとかクリアしたのですが、次はスライダーが動かなくて困っています。 問題のサイト:http://snapkidz.biz/wp/ 先日の質問:http://okwave.jp/qa/q7180952.html 教えて頂いたのを元に構築をしてメイン画像部分をスライダーにしようと思い構築したのですがうまくいきませんでした。 <!-- External files --> <link rel="stylesheet" href="<?php bloginfo( 'stylesheet_url' ); ?>"> <!-- Favicon, Thumbnail image --> <link rel="shortcut icon" href="<?php bloginfo('template_url'); ?>/images/favicon.ico"> <?php wp_head(); ?> <!-- ======================================= スライダーテスト ======================================= --> <script type="text/javascript" src="http://snapkidz.biz/slider1/script.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script> <link rel="stylesheet" type="text/css" media="screen" href="http://snapkidz.biz/slider1/style.css" /> </head> <body> <div id="page"> <div id="wrapper"> <div class="header" id="Top"> <h1><img src="http://snapkidz.biz/wp/wp-content/uploads/2011/12/blk_03.jpg" alt="Art・・"></h1> <div class="nav"> <ul> <li class="nav1"><a href=""></a></li> <li class="nav2"><a href=""></a></li> <li class="nav3"><a href=""></a></li> </ul> </div> <div class="siteImage"> <div id="slider"> <div class="slider-view"> <div class="slider-container"> <div><a href="#"><img src="http://snapkidz.biz/slider1/images/image1.jpg" alt="" /></a></div> <div><a href="#"><img src="http://snapkidz.biz/slider1/images/image2.jpg" alt="" /></a></div> <div><a href="#"><img src="http://snapkidz.biz/slider1/images/image3.jpg" alt="" /></a></div> <div><a href="#"><img src="http://snapkidz.biz/slider1/images/image4.jpg" alt="" /></a></div> <div><a href="#"><img src="http://snapkidz.biz/slider1/images/image5.jpg" alt="" /></a></div> </div><!-- // .slider-container --> </div><!-- // .slider-view --> <a href="#" id="slide-prev">&laquo;</a><a href="#" id="slide-next">&raquo;</a> </div> <p><img src="http://snapkidz.biz/wp/wp-content/uploads/2011/12/blk_03.png" alt="" class="top" /></p> </div> でcssが html,body{margin:0;padding:0;} #wrapper{width:980px;margin:0 auto;position:relative;} div.header{border:sold 1px solid;} div.header h1{position:absolute;top:0;left:0;} div.header div.nav ul,div.header div.nav ul li{list-style:none;margin:0;padding:0;} div.header div.nav ul{display:block;height:70px;width:242px;text-align:right;background:url(http://snapkidz.biz/wp/wp-content/uploads/2011/12/blacknav.jpg);background-repeat:no-repeat;position:relative;left:737px;top:40px;} div.header div.nav ul li{display:inline;width:85px;} div.header div.siteImage{position:relative;width:100%;min-width:640px;} div.header div.siteImage img.top{position:absolute;top:-80px;left:400px;} です。 スライダーダウンロード元:http://unformedbuilding.com/articles/jquery-simple-loop-slider/ head部分の記載が違うのかと思ったのですが、そうではないようでした・・・ 何が原因なんでしょうか? 宜しくお願い致します。

  • jQuery タブとスライダーの併用

    jQuery UIを使ったタブの中ひとつひとつにスライダーを置きたいのですが どうしても1つめのタブでしかスライダーが正しく動作しません。 overflow:hidden; が原因なのでしょうか。 どのように書き換えれば動作するようになるでしょうか。 スライダーはflexsliderを http://flexslider.woothemes.com/thumbnail-controlnav.html タブはこちらページを参考にしました http://alphasis.info/2011/07/jquery-ui-tabs-bottom/ css #jquery-ui-tabs { font-size: 12px; color: #666666; } .jquery-ui-tabs-bottom { position: relative; } .jquery-ui-tabs-bottom .ui-tabs-panel { height: 410px;width: 80%; overflow: auto; } .jquery-ui-tabs-bottom .ui-tabs-nav { position: absolute !important; left: 1px; bottom: 1px; right: 1px; padding: 0 0px 0px 0px; } .jquery-ui-tabs-bottom .ui-tabs-nav li { margin-top: -1px; border: 1px solid #d3d3d3 !important; border-top: !important; border-radius: 10px !important; color: #666666; } .jquery-ui-tabs-bottom .ui-tabs-nav li:hover { margin-top: 0px; border: 1px solid #aaaaaa !important; border-top: !important; border-radius: 10px !important; } .jquery-ui-tabs-bottom .ui-tabs-nav li.ui-tabs-selected { margin-top: 0px; border: 1px solid #000 !important; border-top: !important; border-radius: 10px !important; background-color: #cd5c5c !important; } script <script type="text/javascript"> // Can also be used with $(document).ready() $(window).load(function() { $('.flexslider').flexslider({ animation: "slide", controlNav: "thumbnails" }); }); jQuery( function() { jQuery( '#jquery-ui-tabs' ) . tabs(); jQuery( '.jquery-ui-tabs-bottom .ui-tabs-nav, .jquery-ui-tabs-bottom .ui-tabs-nav > *' ) . removeClass( 'ui-corner-all ui-corner-top' ) . addClass( 'ui-corner-bottom' ); } ); </script> HTML <div id="jquery-ui-tabs" class="jquery-ui-tabs-bottom"> <ul> <li><a href="#jquery-ui-tabs-1">その1</a></li> <li><a href="#jquery-ui-tabs-2">その2</a></li> <li><a href="#jquery-ui-tabs-3">その3</a></li> </ul> <div id="jquery-ui-tabs-1"> <div class="flexslider"> <ul class="slides"> <li data-thumb="images/XXX.png"> <img src="images/XXX.png"> </li> <li data-thumb="images/XXX.png"> <img src="images/XXX.png"> </li> <li data-thumb="images/XXX.png"> <img src="images/XXX.png"> </li> </ul> </div> </div> <div id="jquery-ui-tabs-2"> <div class="flexslider"> <ul class="slides"> <li data-thumb="images/XXX.png"> <img src="images/XXX.png"> </li> <li data-thumb="images/XXX.png"> <img src="images/XXX.png"> </li> <li data-thumb="images/XXX.png"> <img src="images/XXX.png"> </li> </ul> </div> </div> <div id="jquery-ui-tabs-3"> <div class="flexslider"> <ul class="slides"> <li data-thumb="images/XXX.png"> <img src="images/XXX.png"> </li> <li data-thumb="images/XXX.png"> <img src="images/XXX.png"> </li> <li data-thumb="images/XXX.png"> <img src="images/XXX.png"> </li> </ul> </div> </div>

  • cssでメインコンテンツをセンタリングする方法

    cssでメインコンテンツをセンタリングする方法に関する質問をお願いいたします。 下記のサイトなどをみると、 http://www.css-lecture.com/log/css-beginner/026.html *xhtml <body> <div id="wrapper"> <h1>サイト全体を中央に配置にする</h1> <p>サイト全体を中央に配置にする為のテキスト</p> <!--/ #wrapper--></div> </body> *css body { text-align: center; } div#wrapper { width: 800px; margin: 0 auto; text-align: left; border: 1px solid #FF0000; } (1)「body」においてもセンタリングを行っているいるのですが、 それはどうしてでしょうか。 「div#wrapper」だけのセンタリングでは不十分なのでしょうか? > body { text-align: center; } > (2)また、「p」などのインライン要素は { text-align: center; } を使い、 「id」などのブロック要素は { margin: 0 auto; text-align: left; } を使いますすが、 body要素に対しても、 { text-align: center; } とすることが出来るのでしょうか? (3)あと、「div#wrappe」で囲ったブロックの中の 「p」や「id」で囲ったコンテンツの中身のテキストは 「div#wrapper」の「 text-align: left; 」で 全て左寄せになりますか? 参考書などを見ても解りづらかったので 教えていただきたくお願い致します。m(_ _)m その他参考URL: http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1010809440

    • ベストアンサー
    • CSS
  • jqueryスライドのズレ修正

    jqueryのスライドショーを実装しました。 現在、添付画像のようにスライドのズレが直せません。 左端に一つ前の画像が残ってしまう状態です。。 参考にコピーさせてもらったのは下記サイトです。 http://black-flag.net/jquery/20120215-3671.html どう修正が必要でしょうか。 宜しくお願い致します。

  • 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 bxSlider でのアニメーション

    jQueryのbxSlider を使用して、6枚のスライドギャラリー的なものを作っています。 各スライドがスライドした後に、onAfterSlide: function() を使用してオブジェクトのフェードをしたく以下の様に記述しています。1枚目から5枚目では、各スライドをした後にオブジェクトをフェードインでアニメーションができるのですが、最後のスライドのオブジェクトのみがアニメーションしません。コードは以下になります。どなたか最後のオブジェクトもアニメーションするスクリプトを教えていただけますでしょうか? <script type="text/javascript"> $(function(){ var slider = $('#slider1').bxSlider({ controls: true, duration: 2000, easing: 'easeInOutQuart', onAfterSlide: function(currentSlide){ if(currentSlide==0){ $("#block").fadeIn("slow"); }else{ $("#block").hide(); } if(currentSlide==1){ $("#block2").fadeIn("slow"); }else{ $("#block2").hide(); } if(currentSlide==2){ $("#block3").fadeIn("slow"); }else{ $("#block3").hide(); } if(currentSlide==3){ $("#block4").fadeIn("slow"); }else{ $("#block4").hide(); } if(currentSlide==4){ $("#block5").fadeIn("slow"); }else{ $("#block5").hide(); } } }); $('.thumbs a').click(function(){ var thumbIndex = $('.thumbs a').index(this); slider.goToSlide(thumbIndex); $('.thumbs a').removeClass('pager-active'); $(this).addClass('pager-active'); return false; }); $('.thumbs a:first').addClass('pager-active'); }); </script> <ul id="slider1"> <li class="slider1-1"> <div id="block" style="background-color: red; width: 500px; height: 300px; position: absolute; top: 70px; left:100px;"> </div> </li> <li class="slider1-2"> <div id="block2" style="background-color: white; width: 500px; height: 300px; position: absolute; top: 70px; left:100px;"> </div> </li> <li class="slider1-3"> <div id="block3" style="background-color: black; width: 500px; height: 300px; position: absolute; top: 70px; left:100px;"> </div> </li> <li class="slider1-4"> <div id="block4" style="background-color: black; width: 500px; height: 300px; position: absolute; top: 70px; left:100px;"> </div> </li> <li class="slider1-5"> <div id="block5" style="background-color: black; width: 500px; height: 300px; position: absolute; top: 70px; left:100px;"> </div> </li> <li class="slider1-6"> <div id="block6" style="background-color: #FFF; width: 500px; height: 300px; position: absolute; top: 70px; left:100px;"> </div> </li> </ul> <div class="thumbs"> <a href=""><img src="img/1.jpg" width="50" height="50" /></a> <a href=""><img src="img/2.jpg" width="50" height="50" /></a> <a href=""><img src="img/3.jpg" width="50" height="50" /></a> <a href=""><img src="img/4.jpg" width="50" height="50" /></a> <a href=""><img src="img/5.jpg" width="50" height="50" /></a> <a href=""><img src="img/6.jpg" width="50" height="50" /></a> </div>

  • jqueryでn件目以降を抽出するには? 

    instagramの画像一覧を作成しています。 画像数が多いので「もっと見る」ボタンで追加していくようにしました。 以下の参考サイトのサンプルをそのまま使用させてもらっています。 実装はうまくいきましたが、これを1~10件目までは読み込まずに、 11件目から表示させるようにしたいです。 参考サイトサンプルは以下 http://black-flag.net/jquery/20131119-4881.html 色々試していますがうまくいきません。 お願いします。