質問編集履歴

1

southern_flavor

southern_flavor score 59

2015/05/21 12:33  投稿

ページ内に複数設置されたスライドショーを同時に動かしたい
bxsliderというjqueryのスライドショーなんですが、これをページ内に複数設置しています。
どちらか一方のnextボタン、pervボタンを押すと、
二つのスライドショーを同時にスライドもしくはフェードさせるように動かしたいです。
方法はないでしょうか?
 
また、「このテキストは固定」と書いてあるものは、動かさず固定表示にしたいと思っていますが、  
これはできなさそうでしたら大丈夫です。  
 
サンプルはこちらです。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="http://bxslider.com/lib/jquery.bxslider.js"></script>
<link rel="stylesheet" type="text/css" href="http://bxslider.com/lib/jquery.bxslider.css">
</head>
<body>
<script>
   $(document).ready(function(){
     $('.bxslider1').bxSlider({
           auto: false,
       minSlides: 1, //最低限表示する数
       maxSlides: 1, //マックスで表示する数
       moveSlides: 3, //スライドをどのくらいの数を動かすか
       slideWidth: 200, //ひとつの要素の幅を指定
       controls: false   
       });
     $('.bxslider2').bxSlider({
           auto: false,
       });   
   });
</script>
<ul class="bxslider1">
   <li>サンプルテキスト1<br><span style="color:#ff0000;">このテキストは固定</span></li>
   <li>サンプルテキスト2<br><span style="color:#ff0000;">このテキストは固定</span></li>
   <li>サンプルテキスト3<br><span style="color:#ff0000;">このテキストは固定</span></li>
</ul>
<ul class="bxslider2">
   <li><img src="sample1.jpg" /></li>
   <li><img src="sample2.jpg" /></li>
   <li><img src="sample3.jpg" /></li>
</ul>
</body>
</html>
  • JavaScript

    24335 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    14141 questions

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

  • jQuery

    9515 questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • jQueryプラグイン

    673 questions

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

  • スライダー

    99 questions

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

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る