@Qrara (Qrara)posted at 2022-10-23

スライドが上手くいきません。

Q&A

Closed

解決したいこと

コード自体は色んなページを参考にしたので大丈夫だと思うのですが、
コンソールを確認すると何故か上手くできないです。。
どこがおかしいのか教えて頂きたいです。

コンソールで確認

右の矢印をクリックすると一個目は上手くスライドできました。
pagesNum 0
pages (4) [0, -600, -1200, -1800]
pagesNum 1
pages[pagesNum] -600

その後もう一回クリックすると同じ値が出てスライドできません。
原因はpagesNumに +1 されてないから？
pagesNum 0
pages (4) [0, -600, -1200, -1800]
pagesNum 1
pages[pagesNum] -600
pagesNum 0
pages (4) [0, -600, -1200, -1800]
pagesNum 1
pages[pagesNum] -600

該当するソースコード

  <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>

<script defer>
window.addEventListener( 'load', function(){

  $(".slider-ctrl-btn").click(function () {

    let pages = [];
    let numCount = $('.slider-list li').length;
    let num = 0;
    let pagesNum = 0;

    for(let i = 0; i < numCount; i++){
      if (i == 0) {
        pages.push(0);
      } else {
        num += - $('.slider-list li').eq(i).width();
        pages.push(num);
      }
    }

    console.log('pagesNum', pagesNum);
    console.log('pages', pages);
    if ($(this).data('ctrl') === 'next') {
      let step = 1;
      pagesNum = pagesNum + step;
      if (pagesNum === pages.length) {
        pagesNum = 0;
      }
      console.log('pagesNum', pagesNum);
      console.log('pages[pagesNum]', pages[pagesNum]);
      $(".slider-list").animate({left: pages[pagesNum]})
    } else if ($(this).data('ctrl') === 'prev') {
      let back = -1;
      pagesNum = pagesNum + back;
      if (pagesNum === -1) {
        pagesNum = pages.length - 1;
      }
      console.log('pagesNum', pagesNum);
      console.log('pages[pagesNum]', pages[pagesNum]);
      $(".slider-list").animate({left: pages[pagesNum]})
    }
  });

}, false);

自分で試したこと

if文以下がおかしいと思うので、1つずつどんな動きをするのか手探りしながらいじっていたのですが、結局どこがおかしいのか分かりませんでした。。。
是非教えて頂きたいです。
宜しくお願い致します。

2Answer

@tonberry1050 posted at 2022-10-23

ちゃんと読み込んでないので間違ってたら申し訳無いのですが、現在のページを記録せずに毎回0を起点にしているような？

+ let pagesNum = 0;
  $(".slider-ctrl-btn").click(function () {
-   let pagesNum = 0;

1Like

Comments

@Qrara
Questioner
それでしたー！！
ありがとうございます！！

@tonberry1050 posted at 2022-10-23

あと、質問内容には直接関係なくお節介な指摘が一つあります。
共通化をしようとした試みがありそれは素晴らしいのですが、個人的な体験から、目的の違うクリックイベントを共通化するより処理内容を共通化することをオススメします。

let pagesNum = 0; // 先の指摘が正しければ

// 要素が不変ならこのへんも外で書ける、動的な要素だったとしても変数自体は外に出して、初期化は関数ですることを勧める
let pages = [];
const numCount = $('.slider-list li').length;
for(let i = 0, num = 0; i < numCount; i++){
  pages.push(num);
  num -= $('.slider-list li').eq(i).width();
}

$("btn.prev").click(() => { // 戻るイベント
  const targetPage = pageNum === 0 ? numCount - 1 : pageNum - 1;
  slidePage(targetPage, "left");
});
$("btn.next").click(() => { // 進むイベント
  const targetPage = pageNum === numCount - 1 ? 0 : pageNum + 1;
  slidePage(targetPage, "right");
});

// 指定したページに指定した向きで動く共通処理
const slidePage = (targetPage, moveDirection) => {
  // 省略
  const animeOption = {};
  animeOption[moveDirection] = pages[pagesNum];
  $(".slider-list").animate(animeOption);
};

0Like

Are you sure you want to delete the question?