jquery スライダーが動かない
- 昨日質問をしてなんとかクリアしたのですが、次はスライダーが動かなくて困っています。
- 先日の質問のサイトは http://okwave.jp/qa/q7180952.html です。
- 教えて頂いたのを元に構築をしてメイン画像部分をスライダーにしようと思い構築したのですがうまくいきませんでした。head部分の記載が違うのかと思ったのですが、そうではないようでした。何が原因なんでしょうか？
- ベストアンサー
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">«</a><a href="#" id="slide-next">»</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部分の記載が違うのかと思ったのですが、そうではないようでした・・・ 何が原因なんでしょうか？ 宜しくお願い致します。
- 01mk
- お礼率62% (45/72)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
とりあえず・・・ jQueryベースのスクリプトのようなので、jQueryを読込んでから実行するようにしないと動作しないのでは？ 現状は順序が逆のように見受けられます。
関連するQ&A
- 【jQuery】スライダーについて
初めまして。 下記サンプルを元にカスタマイズをしてます。 参照URL http://bxslider.com/examples/ticker 写真をランダムで左に流したいのですが、 $(document).ready(function(){ $('.bxslider').bxSlider({ 'auto': true, 'minSlides': 6, 'maxSlides': 6, 'slideWidth': 160, 'slideMargin': 0, 'ticker': true, 'speed': 15000, 'randomize': true, }); }); 『'randomize': true,』を入れてもランダムになりません。 ダウンロードしたjquery.bxslider.jsの方の記述も同じように書き換えてます。 html側もサンプルのをそのまま貰ってるので <div class="slider"> <ul class="bxslider"> <li><a href="/"><img src="/img/photo01.jpg" alt="/"></a></li> <li><a href="/"><img src="/img/photo02.jpg" alt="/"></a></li> <li><a href="/"><img src="/img/photo03.jpg" alt="/"></a></li> <li><a href="/"><img src="/img/photo04.jpg" alt="/"></a></li> <li><a href="/"><img src="/img/photo05.jpg" alt="/"></a></li> <li><a href="/"><img src="/img/photo06.jpg" alt="/"></a></li> </ul> </div> でならんでます。 リロードするたびに photo01.jpg←photo03.jpg←photo06.jpg← や、 photo02.jpg←photo05.jpg←photo02.jpg← とか順不同で出来たら最高なんですが、そこまで私の技術は出来ないので、可能であればスタートする写真をランダムで出来たらと思ってます。 ご教授お願いします。
- 締切済み
- JavaScript
- z-indexについて...
今回添付画像のように画像の上にアイコンを置きたかったのですがうまくいきません。 http://snapkidz.biz/wp/ cssのz-indexを使って熊のアイコンをpngで表示させればうまくいくのかな？と思ったのですが、うまく表示できませんでした。 ソースです。 <div id="header"> <ul class="haeder_bak"> <li><img src="http://snapkidz.biz/wp/wp-content/uploads/2011/12/blk_03.jpg" /> <li><img src="http://snapkidz.biz/wp/wp-content/uploads/2011/12/blk_04.jpg" /></li> <li><img src="http://snapkidz.biz/wp/wp-content/uploads/2011/12/blk_05.jpg" /></li> <li><img src="http://snapkidz.biz/wp/wp-content/uploads/2011/12/blk_06.jpg" /></li> <li><img src="http://snapkidz.biz/wp/wp-content/uploads/2011/12/blk_07.jpg" /></li> </ul> <div class="header_slider"> <img src="http://snapkidz.biz/wp/wp-content/uploads/2011/12/blk_09.jpg" /> </div> <div class="header_bear"> <img src="http://snapkidz.biz/wp/wp-content/uploads/2011/12/blk_03.png" /> </div> </div> CSSです。 #header{ width:100%; margin-top:15px; position :relative; z-index:0; } #header li{ float:left; } #header ul{ list-style-type:none; } .haeder_bak{ poaition:abosolute; z-index:10; } .header_slider{ poaition:abosolute; z-index:20; } .header_bear{ poaition:abosolute; z-index:30; } どうすれば添付画像のようにいきますか？
- ベストアンサー
- CSS
- jQueryでタブ、スライダーを使う際の質問です
こんにちは。WEBデザインを勉強している者です。 本やネットを見ながらWEBデザインの勉強をしていますが、まだわかっていない事が多く、どなたかお答えして頂けたら大変有り難いです。 jQueryを使って、タブ（２つ）の中にそれぞれ写真を動かすスライダーを作ったのですが、 ２つめのタブのスライダーが、写真が終わっても空白のページにどこまでも進んでしまいます。 ページネーションの数も、写真の数以上に表示されていて、何ページ目かわかるように 色が濃くなるはずが、何も変わりません。 ひとつめのタブも、ページネーションが一個飛ばしで表示されてしまいます。 初心者なのに、難しい作りにしたのがまずかったのかと反省しましたが、こういった 作りは不可能なのでしょうか？似た質問を見て、＄をjQueryに変えるものや、いろいろ試しましたがチンプンカンプンで全くできませんでした。涙 両方のスライダーを動かそうと思って、 <div id="carousel">と<ul id="carousel_base">のidをclassに変えてしまったのですがそれが原因でしょうか.. もしおわかりになる方がいらっしゃったら、助けて頂きたいです。 スライダーはhttp://black-flag.net/jquery/20110708-3310.htmlここのコードをそのまま使いました。 ２つとも動かす為に、$('#carousel')などの#部分を全てクラス$('.carousel')に変えてしまいました。javascriptの方も#から.に変えました。 ですが２つのスライダーがまとめて動いてしまっているような感じもします。 よくわからない質問で申し訳ありません。 下にあるコード部分がもうひとつあって、<div id="tab-2">にしているという感じです。 <div id="tab-1"> <div class="carousel"><!-------------carousel start-----------------------> ↑ここはもともとidでした <ul class="carousel_base"><!-------carsousel_base start-------> ↑ここはもともとidでした <li> <ul> <li><img src="#" /></li> </ul> </li> <li> <ul> <li><a href="#" rel="lightbox[roadtrip]"><img src="#" /></a></li> <li><a href="#" rel="lightbox[roadtrip]"><img src="#" /></a></li> </ul> </li> <li> <ul> <li><a href="#" rel="lightbox[roadtrip]"><img src="#" /></a></li> <li><a href="#" rel="lightbox[roadtrip]"><img src="#" /></a></li> </ul> </li> <li> <ul> <li><a href="#" rel="lightbox[roadtrip]"><img src="#" /></a></li> <li><a href="#" rel="lightbox[roadtrip]"><img src="#" /></a></li> </ul> </li> <li> <ul> <li><img src="#" /></a></li> </ul> </li> </ul><!-------carsousel_base end--------> </div><!-----------------------carousel end-----------------------------> </div><!--tab-1 end-->
- ベストアンサー
- JavaScript
- jqueryでの画像表示について
どなたか教えて頂ければ幸いです。 画像のプリロードをするためjqueryを書いているのですが、 うまくいかず助けて頂きたくまいりました。 <div id="slideshow" class="clearfix"> <ul class="slider clearfix"> <li><a href="#"><img src="img/dress1.jpg" alt="" /></a></li> <li><a href="#"><img src="img/dress2.jpg" alt="" /></a></li> <li><a href="#"><img src="img/dress3.jpg" alt="" /></a></li> <li><a href="#"><img src="img/dress4.jpg" alt="" /></a></li> <li><a href="#"><img src="img/dress5.jpg" alt="" /></a></li> <li><a href="#"><img src="img/dress6.jpg" alt="" /></a></li> <li><a href="#"><img src="img/dress7.jpg" alt="" /></a></li> <li><a href="#"><img src="img/dress8.jpg" alt="" /></a></li> <li><a href="#"><img src="img/dress9.jpg" alt="" /></a></li> </ul> </div> $('#slideshow .slider li').hide();//ページ上の画像を隠す var i = 0; var c = 0; $(window).bind("load", function() { var c = setInterval(showImg() , 500); }); function showImg() { var imgLength = $('#slideshow .slider li').length; if (i >= imgLength) { clearInterval(c); } $('#slideshow .slider li:hidden').eq(0).fadeIn(500); i++; } 上記のように書いたのですが、ループしてくれません。 i++がきいてないように思います。 一枚ずつ表示していき、非表示の最初のliにフェイドインさせるようにしています。 すみませんが教えて頂ければ幸いです。 宜しくお願い致します。
- ベストアンサー
- JavaScript
- 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>
- 締切済み
- JavaScript
- img画像表示を短くしたい
lemmon-slider-0.2 win8.1 pro 下記 img 45個 記述しています。表示が長いので、短くしたい。500個の場合もあります。 ひまわり美術館 http://esd827.web.fc2.com/himawari/index.html 詳細 IE11 F12開発者ツール 参照 <div id="nav"> <div class="wrap"> <div id="container"> <div class="wrap"> <div id="slider3" class="slider"> <ul> <li><img src="images/01.jpg" alt=""></li> <li><img src="images/02.jpg" alt=""></li> <li><img src="images/03.jpg" alt=""></li> ----- cut -------- <li><img src="images/43.jpg" alt=""></li> <li><img src="images/44.jpg" alt=""></li> <li><img src="images/45.jpg" alt=""></li> </ul> </div>
- 締切済み
- JavaScript
- Jqueryスライダーが動きません。
WEB制作の素人です。 簡単といわれている「FlexSlider2」ですが、私がやったところ、 画像は出たもののスライドにならず、そのまま上下に出てしまいます。 一度見ていただき、間違えを教えていただけますか？ （ちなみにスムーススクロールは動きます） <!-- TemplateEndEditable --> <link href="../common.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="../js/smoothScroll.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="../js/jquery.flexslider-min.js"></script> $(window).load(function() { $('.flexslider').flexslider({ animation: "slide", pauseOnAction: false, slideshowSpeed: 3000 }); }); </script> <!-- TemplateBeginEditable name="head" --> <!-- TemplateEndEditable --> <!-- TemplateParam name="id" type="text" value="index_page" --> </head> <body id="@@(id)@@"> <div id="wrapper"> <!---ヘッダー---> <div id="header"> <h1><a href="../index.html"><img src="../image/title.gif" width="477" height="79" alt="title"/></a></h1> </div> <p><img src="../image/ribon.jpg" width="800" height="40" alt="Topライン"/></p> <!---トップ画像---> <div id="main_visual"> <div class="flexslider"> <ul class="slides"> <li><h2><img src="../image/slide_image/01.jpg" width="400" height="300" alt="Top画像"/></h2></li> <li><img src="../image/slide_image/02.jpg" width="400" height="300" alt="Top画像"/></li> </ul> </div> </div> よろしくお願いします。
- ベストアンサー
- JavaScript
- ジャバスクリプトでクリックして画像を切り替えていま
画像は一つのスライドセットに5枚ほど用意してあり、 今回、あらたにもう一セット同じページに追加したところ、相互のく動作がうまくいきません。 コードをジャバスクリプトの部分だけコピーしてみます。どこかに誤りがあったら是非ご教授ください。 <div id="nav2"> <ul class="imagelist"> <li><a class="current" href="#image1">1</a></li> <li><a href="#image2">2</a></li> <li><a href="#image3">3</a></li> <li><a href="#image4">4</a></li> <li><a href="#image5">5</a></li> <li><a href="#image6">6</a></li> </ul> </div> <div id="nav3"> <ul class="imagelist"> <li><a class="current" href="#image7">1</a></li> <li><a href="#image8">2</a></li> <li><a href="#image9">3</a></li> <li><a href="#image10">4</a></li> <li><a href="#image11">5</a></li> </ul> </div> ： ： ： <div id="slideshow"> <img id="image1" src="/livingimg/002.jpg"alt="Image 1" /> <img id="image2" src="/livingimg/031.jpg" alt="Image 2" /> <img id="image3" src="/livingimg/6039.jpg" alt="Image 3" /> <img id="image4" src="/livingimg/6336.jpg" alt="Image 4" /> <img id="image5" src="/livingimg/5563.jpg" alt="Image 5" /> <img id="image6" src="/livingimg/5860.jpg" alt="Image 6" /> </div> <div id="slideshow"> <img id="image7" src="/interiorimg/035akari.jpg"alt="Image 7" /> <img id="image8" src="/interiorimg/034.jpg" alt="Image 8" /> <img id="image9" src="/interiorimg/5923akari.jpg" alt="Image 9" /> <img id="image10" src="/interiorimg/akari190.jpg" alt="Image 10" /> <img id="image11" src="/interiorimg/5866akari.jpg" alt="Image 11" /> </div> こんな具合です。またhead部分に <style type="text/css"> <!-- #slideshow img{ display: none; } --> </style> と書いてあります。これで回答いただくことに必要な情報は十分でしょうか もちろん一つのセットの場合は正常に動作しています。 宜しくお願いします。 補足 ちなみに url は http://brownpaper.biz/interior.htm です。
- 締切済み
- JavaScript
- jQuery bxSlider でのアニメーション
jQueryのbxSlider を使用して、6枚のスライドギャラリー的なものを作っています。 各スライドがスライドした後に、onAfterSlide: function() を使用してオブジェクトのフェードをしたく以下の様に記述しています。１枚目から５枚目では、各スライドをした後にオブジェクトをフェードインでアニメーションができるのですが、最後のスライドのオブジェクトのみがアニメーションしません。コードは以下になります。どなたか最後のオブジェクトもアニメーションするスクリプトを教えていただけますでしょうか？ <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>
- ベストアンサー
- JavaScript
- フルスライドの画像上に文字を入れたい
すみません、初心者です。 htmlは、 <div id="container"> <div class="fullSlideShow"> <ul> <li><a href="#1"><img src="img/photo01.jpg" alt=""></a></li> <li><a href="#2"><img src="img/photo02.jpg" alt=""></a></li> <li><a href="#3"><img src="img/photo03.jpg" alt=""></a></li> <li><a href="#4"><img src="img/photo04.jpg" alt=""></a></li> <li><a href="#5"><img src="img/photo05.jpg" alt=""></a></li> <li><a href="#5"><img src="img/photo06.jpg" alt=""></a></li> </ul> </div> <div class="helo"> <h1>site title</h1> <p>abcdefg</p> </div> と書いてみました。CSSですが、 .fullSlideShow h1 { position: absolute; z-index:500; left: 40px; top: 40px; padding-right: 40px; font-size: 2em; line-height: 1.20; } .fullSlideShow h1 a.textlink { color: white; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); text-decoration: none; } としてみましたが表示されません。まだサイズや位置は気にせず表示されるように試してみているのですが、どうも文字が画面上に現れてくれません。 とりあえず、h1とpだけでも表示させたいのですが、教えて頂けないでしょうか。 どうぞ宜しくお願いします。
- ベストアンサー
- CSS
お礼
なるほど！<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script> を先に読み込ませないとけないんですね！ 知らなかったです。 初心者の質問温かく答えて頂きありがとうございます。