- ベストアンサー
jqueryのスライダー カスタムについて
http://zxcvbnmnbvcxz.com/jquery-簡単かつ高性能なスライダー【bxslider】の設置-divス/ こちらのスライダーを使用して、 「next」と「back」を画像にしたいのですが、 どこを書き換えらできますでしょうか。 html内に記述がないので多分以下のjsだと思うのですが。。 http://preview.spawn.jp/demonstration/js/jquery.bxSlider.min.js 詳しい方、どうぞよろしくお願いしあます。
- qpalzmwoskxn
- お礼率34% (16/46)
- JavaScript
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
リンクがちがっているみたいだし、ご提示の長いコードを読む気にはならないので、bxSliderという名称だけで探してみたので、違っているのかもしれませんが、これ（↓）のことでしょうか。 http://bxslider.com/ もし、そうであるなら、examplesのページにそのものズバリの説明があるみたいに思えます。（私は、英語がさっぱりなので、ちゃんと読んではいませんが…） http://bxslider.com/examples/custom-next-prev-selectors ライブラリ等を使う時は、配布元のサイトに使い方の説明がありますので、そこで調べるのが一番確実です。
関連するQ&A
- jqueryでスライダーを設置した時に
jqueryでスライダーを設置した時に設置したページのテキストが画像がスライドするタイミングで点滅してしまうようです。 現象が起こっているのはMacのsafariとchromeです WindowsのIEやモダンブラウザ、MacのFirefoxではオッケーのようです。 ちなみにコンテンツスライダーは、glide.jsやbxslider.jsです。両方とも同じ現象が起きます。 chrome はwebkitではなくなりましたし、、、 該当ページでは、スティッキーヘッダ、トップへ戻るボタン、ロールオーバーや複数のタブパネルなど、jQueryの塊のようなページになっておりまして、、、 ただ、それらをすべて無効にして、スライダだけを実装状態にしても同じようです。 スライダーそれぞれのCSSをみてみましたが、同ページにあるCSSの他のセレクトと同名のセレクタはないようです、、、 どなたか似たような現象を解決された方がいらっしゃいましたらご教示願えますでしょうか？
- 締切済み
- JavaScript
- 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部分の記載が違うのかと思ったのですが、そうではないようでした・・・ 何が原因なんでしょうか？ 宜しくお願い致します。
- ベストアンサー
- JavaScript
- 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による干渉などではない様です。 よろしくお願いします。
- 締切済み
- 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
- 【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
- IEのみjqoueryスライダーが動かない
いつもお世話になっています。 Wordpressでサイトを構築しています。 firefoxやsafariでは動作確認がとれいていますがieのみ動きません。 なぜでしょうか？ <script src="/js/jquery-1.6.2.min.js"></script> <script src="/js/jquery.easing.1.3.js"></script> <script src="/js/jquery.bxslider.min.js"></script> <?php wp_head(); ?> <script type="text/javascript"> $(function(){ var slider = $('#slider8').bxSlider({ auto: true, pager: true, speed: 1000, controls: true, }); $('.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'); }); jQuery(function() { var topBtn = jQuery('.tothetopfixed'); //最初はボタンを隠す topBtn.hide(); //スクロールが100に達したらボタンを表示させる jQuery(window).scroll(function () { if (jQuery(this).scrollTop() > 100) { topBtn.fadeIn(); } else { topBtn.fadeOut(); } }); //スクロールしてトップに戻る //500の数字を大きくするとスクロール速度が遅くなる topBtn.click(function () { jQuery('body,html').animate({ scrollTop: 0 }, 500); return false; }); }); </script> よろしくお願いします。
- 締切済み
- JavaScript
- jQueryにて複数ライブラリを動かす
wordpressにてWEB制作を行っています。 jQueryにてfullpage.jsというフルページスクロールするライブラリを使用しております。 そのセクションの一つをfullpage.jsの機能の一つ横スライドを行っているのですが、 fullpage.jsのオプションには自動再生はありません。 スライド部分のみ自動再生を行いたいので bxslider.jsというライブラリを使用し、 横スライドしたいセクションをbxsliderで動かしたいのですが、 bxsliderが全く作動しません。 また <script type="text/javascript"> jQuery(document).ready(function(){ jQuery('.bxslider').bxSlider(); }); </script> の記述を <script type="text/javascript"> jQuery(document).ready(function() { jQuery('#fullpage').fullpage(); }); の上に書くと今度はfullpageが動きません。 jQueryライブラリは同ページで二つ同時には動かないんでしょうか？ また、書き方が間違っていますでしょうか？ 宜しくお願い致します。
- 締切済み
- JavaScript
- jqueryの呼び出しはどこに？bxSlider
サイトを作っています。 bxSlider というものを入れたいのです。 こちらのサイト http://wp-and.me/bxslider/ で説明があるとおりに bxSliderの公式サイトからファイルをダウンロードし、 jsのファイルをローカルのフォルダへ入れました。 htmlではheadにファイルへのリンクを記述しました。 htmlに説明通りにコードも記述しましたが、ここからが分かりません。 サイトには、 最後に、bxSliderの呼び出しをすればスライドが動きます！ $(document).ready(function(){ $('.bxslider').bxSlider(); }); と書いてありますが、これはどこに書くんでしょうか？ htmlのhead内？ ダウンロードしてきたjsファイルのどこか？ 他にもいくつかのサイトをみたのですが、 みんな「最後に関数を呼び出してください」くらいの説明しかなく どうやって実行したらいいのか分かりません。 あと、jqueryはサーバーにアップしなくても動作確認はできるのでしょうか？ もしかしてローカルで作業しているのがいけないのでしょうか？ どうか教えてください。。。
- ベストアンサー
- JavaScript
- 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なのでしょうか？ よろしくお願いいたします。
- ベストアンサー
- JavaScript
- jqueryティッカーについて
http://www.ar-ch.org/mt/archives/2010/07/jquery.html 上のサイトで紹介しているスライドで動くスティッカーを実装しようと思ったのですが、サイトで紹介しているリンク先にはjquery.bxslider2.0.1.min.jsのファイルがありません。 ダウンロードはしたもののファイルが違うせいか紹介している通りになりませんでした。 説明不足かもしれませんが、自身jqueryは入門段階なので教えて頂けるのであれば簡単に説明していただけるとありがたいです。
- ベストアンサー
- JavaScript
