質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.54%

【jQuery】スライドショーを右側に動かしたい

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 176
退会済みユーザー

退会済みユーザー

現在の記述で改善が必要な部分がありましたらご指摘いただければと思います。
現在の記述で解決したいです。
よろしくお願いいたします。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<title></title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="wrapper">
    <div class="slider-wrap">
        <div class="slider-area">
            <ul class="slider-list clearfix">
                <li><img src="img/1.jpg" alt=""></li>
                <li><img src="img/2.jpg" alt=""></li>
                <li><img src="img/3.jpg" alt=""></li>
                <li><img src="img/4.jpg" alt=""></li>
            </ul>
            <button type="button" class="slider-ctrl-btn prev" data-ctrl="prev"></button>
            <button type="button" class="slider-ctrl-btn next" data-ctrl="next"></button>
        </div>
    </div>
</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
"use strict";

   $(function() {
  function slider(target){
    var box = $('.slider-area'); // スライドする画像を括っているセレクタを格納
    var prevBtn = $('.slider-ctrl-btn.prev'); // prevボタンのセレクタを格納した変数
    var nextBtn = $('.slider-ctrl-btn.next'); // prevボタンのセレクタを格納した変数
    var w = 0; // スライドショーの横幅
    var h = 0; // スライドショーの高さ
    var imgW; // スライドする画像の横幅
    var imgH; // スライドする画像の高さ
    var items = []; // スライド画像のセレクタを格納した配列
    var srcList = []; // 画像の参照先を格納する配列
    var loadIndex = 0; // 読み込み画像をインデックス

    // スライド要素の複製
    function clone(selector){
      var cloneSelector = selector.clone(true);
      $(cloneSelector).attr({
        'href': selector.attr('href'),
        'target': selector.attr('target')
      });
      return cloneSelector;
    };

    // スライド
    function slide(way){
      removeEvent();
      var i;
      var cloneSelector;
      // nextボタンのクリックで実行される処理
      if( way < 0 ){
        cloneSelector = clone(items[0]);
        $(cloneSelector).css('left', (w*items.length+1)+'px');
        box.find('ul').append( cloneSelector );
        items.push( $(cloneSelector) );
        for( i=0; i<items.length; i++){
          items[i].animate( {'left': (w*i)-w}, 500);
        };
      // prevボタンのクリックで実行される処理
      }else{
        cloneSelector = clone(items[items.length-1]);
        $(cloneSelector).css( 'left', (w*-1)+'px');
        box.find('ul').append( cloneSelector );
        items.unshift( $(cloneSelector) );
        for( i=0; i<items.length; i++){
          items[i].animate( {'left': w*i}, 500);
        };
      };
      setTimeout( function(){
        slideComplete(way);
      }, 500 );
    };

    // スライド完了
    function slideComplete(way){
      // next
      if ( way < 0 ){
        items[0].remove();
        items.shift();
      }
      // prev
      else {
        items[items.length-1].remove();
        items.pop();
      };
      addEvent();
    };

    // イベント設定
    function addEvent(){
      prevBtn.on({
        'click': function(){
          slide(1);
        }
      });
      nextBtn.on({
        'click': function(){
          slide(-1);
        }
      });
    };

    // イベント削除
    function removeEvent(){
      prevBtn.off('click');
      nextBtn.off('click');
    };

    // 位置調整
    function pos(){
      $.each(items, function(index){
        $(this).css('left', (w*index)+'px');
      });
    };

    // リサイズ
    function resize(){
      w = target.parent().width();
      h = Math.floor(w*imgH/imgW);
      target.width(w).height(h);
      box.find('ul').width(w).height(h);
      pos();
    };

    // セットアップ
    function setup(){
      imgW = box.find('img').width();
      imgH = box.find('img').height();
      box.find('li').each(function(index){
        items[index] = $(this);
      });
      $(window).on('resize', resize);
      resize();
      addEvent();
    };

    // 画像の読み込み完了
    function loaded(){
      if ( loadIndex != (srcList.length-1) ){
        loadIndex++;
        imgLoad();
      } else {
        setup();
      };
    };

    // 画像の読み込み
    function imgLoad(){
      var img = new Image();
      $(img).on('load', loaded).attr('src', srcList[loadIndex]);
    };

    // 初期設定
    function init(){
      box.find('img').each(function(index){
        srcList[index] = $(this).attr('src');
      });
      imgLoad();
    };
    init();
  };
  slider($('.slider-area'));
});
</script>
</body>
</html>
.slider-wrap {
    width: 600px;
    padding: 10px;
    margin: 0 auto;
    border-radius: 10px;
    background-color: #DDD;
    box-shadow: 0 2px 5px rgba(50, 50, 50, 0.4);
}
.slider-area {
    position: relative;
    width: 600px;
    height: 300px;
    background-color: #FFF;
    overflow: hidden;
}
.slider-list {
    position: absolute;
    top: 0;
    left: 0;
    width: 2400px;
    height: 300px;
}
.slider-list > li { float: left; }
.slider-ctrl-btn {
    position: absolute;
    top: 50%;
    width: 30px;
    height: 30px;
    margin-top: -15px;
    cursor: pointer;
    border-radius: 15px;
    background-color: rgba(255, 255, 255, 0.5);
}
.slider-ctrl-btn.prev { left: 30px; }
.slider-ctrl-btn.next { right: 30px; }
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • m.ts10806

    2019/11/22 15:07

    「動作しない」では起きている現象がわかりませんし、プラグインでない以上は「想定する動作」は質問者さんしか知りません。要は仕様部分、「どうなったら正解なのか」ですね。
    起きている現象はazuapricotさんの指摘にあるブラウザのデベロッパーツールでエラーが出ているかいないかでまずひとつ確認ができますし、エラーが出てないなら「どうなるのか」を記載する必要があります。

    キャンセル

  • 退会済みユーザー

    退会済みユーザー

    2019/11/22 15:12

    ありがとうございます。
    想定する動作としては、nextとprevボタンをクリックしたときにスライドショーの動きになります。
    ディベロッパーツールで確認してみましたが、クリックイベントを実行したときにスライドショーの動きにならずエラーが出なかったです。
    言葉不足ですみません。

    キャンセル

  • m.ts10806

    2019/11/22 15:17

    いえ、試したこと調べたこととして追記してもらえたら良いです。
    「エラーは出ていない」も重要な情報です。

    キャンセル

回答 2

checkベストアンサー

+1

セレクタの指定方法が間違えている
$(.指定クラス1.指定クラス2)

prevBtnをconsole.logでみてconsole部分にマウスを持っていって指定したprevボタンなどを指定しているか見てみては

var prevBtn = $('.slider-ctrl-btn.prev'); // prevボタンのセレクタを格納した変数
var nextBtn = $('.slider-ctrl-btn.next'); // prevボタンのセレクタを格納した変数

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/11/22 16:55

    セレクタの指定方法を修正したらnextをクリックした時の動作が実行できました。
    ありがとうございます。
    prevをクリックしたときに右に画像がスライドする動作が機能しなかったです。

    キャンセル

0

ざっと見た感じですが、ボタンクリックのイベントを登録しているaddEvent()までの導線がちゃんとつながっていないのだと思います。
addEvent()から逆にたどっていってどこで呼び出しが止まっているか見てみてはいかがでしょうか。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/11/22 15:35

    ありがとうございます。
    やってみます。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.54%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる