LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

@nanakoshis

2023.5.13 プログラミングメモ　slick

Posted at

スライドをslick.jsなしで作成して
途中経過
・矢印ボタンでスライド変更
・最初（最後）のスライドに移動した時に矢印を非表示にしようと（した）

◆質問フォーマット
【問題】
最初（最後）のスライドに移動した時に矢印が非表示にならない
移動した後に再度矢印を押さないと非表示にならない

【理想】
最初（最後）のスライドに移動した瞬間に矢印を非表示にしたい

【行ったこと、調べたこと】
条件式とaddClassが使えるのではないかと思った。

条件式を使って

もし現在のスライドが最後のスライドなら
右の矢印に非表示用のCSSを追加（addClass）
もし現在のスライドが最初のスライドなら
左の矢印に非表示用のCSSを追加（addClass）

という記述をした。

【仮説】
矢印ボタンを押すのがトリガーになっているのが悪いかもしれない
スライドを動かすイベントと矢印非表示にするイベントを別々で作る必要がありそう

・JS
$(function () {
let width = $('.carousel-list').outerWidth(true);
let length = $('.carousel-list').length;
let slideArea = width * length;
$('.carousel-area').css('width', slideArea);

let slideCurrent = 0;
let lastCurrent = $('.carousel-list').length - 1;

console.log('最後のスライド番号', lastCurrent);

function changeslide() {
$('.carousel-area').stop().animate({
left: slideCurrent * -width
});
}

$('.js-btn-next').click(function (){
  if (slideCurrent === lastCurrent) {
    // slideCurrent = 0;
    // changeslide();
    $('.arrow-right').addClass('delete');

    console.log('現在のスライド',slideCurrent);
  } else {
    $('.arrow-left').removeClass('delete');
    slideCurrent++;
    changeslide();

    console.log('現在のスライド', slideCurrent);
  };
})

$('.js-btn-back').click(function (){
  if (slideCurrent === 0 ) {
    // slideCurrent = lastCurrent;
    // changeslide();
    $('.arrow-left').addClass('delete');

    console.log('現在のスライド',slideCurrent);
  } else {
    slideCurrent--;
    changeslide();
    $('.arrow-right').removeClass('delete');

    console.log('現在のスライド',slideCurrent);
  };
});

});

参考URL
https://wa3.i-3-i.info/word13682.html
https://jquerystudy.info/reference/css/outerWidth.html
https://pengi-n.co.jp/blog/carousel/

●5/20
slickなしでスライダー苦戦したところ

【理想】
最初（最後）のスライドに移動した瞬間に矢印を非表示にしたい
↓
swich文を用いて
「クリックイベント」ではなく
「スライドするイベント」の中に
矢印を非表示する動きを入れることで理想の動きになった。
※矢印を再表示する動きはクリックイベント内でOK。

// slickなし

$(function () {
let width = $('.carousel-list').outerWidth(true);
let length = $('.carousel-list').length;
let slideArea = width * length;
$('.carousel-area').css('width', slideArea);

let slideCurrent = 0;
let lastCurrent = $('.carousel-list').length - 1;

console.log('最後のスライド番号', lastCurrent);

function changeslide() {
$('.carousel-area').stop().animate({
left: slideCurrent * - width
})

switch (slideCurrent) {
  case lastCurrent:
    $('.arrow-right').addClass('delete');
    break;
  case 0:
    $('.arrow-left').addClass('delete');
    break;
    default:
}

}

$('.js-btn-next').click(function (){
if (slideCurrent === lastCurrent) {
console.log('現在のスライド',slideCurrent);
} else {
$('.arrow-left').removeClass('delete');
slideCurrent++;
changeslide();
console.log('現在のスライド', slideCurrent);
}
})

$('.js-btn-back').click(function (){
  if (slideCurrent === 0 ) {
    console.log('現在のスライド',slideCurrent);
  } else {
    slideCurrent--;
    changeslide();
    $('.arrow-right').removeClass('delete');
    console.log('現在のスライド',slideCurrent);
  }
})

})

●5/23
スライドをslick.jsなしで作成して
途中経過
・矢印ボタンでスライド変更
・最初（最後）のスライドに移動した時に矢印を非表示
・ドットを表示させてスライドに応じて切り替え

残り→ドットをクリックしたらその番号に対応したスライドに飛ぶ

$(function () {
let width = $('.carousel-list').outerWidth(true);
let length = $('.carousel-list').length;
let slideArea = width * length;
$('.carousel-area').css('width', slideArea);

let slideCurrent = 0;
let lastCurrent = $('.carousel-list').length - 1;

let dotsCurrent = 0;
let dotsCurrent_back = (slideCurrent -1);
let dotsCurrent_next = (slideCurrent +1);

console.log('最後のスライド番号', lastCurrent);

function changeslide() {
$('.carousel-area').stop().animate({
left: slideCurrent * - width
})

switch (slideCurrent) {
  case lastCurrent:
    $('.arrow-right').addClass('delete');
    break;
  case 0:
    $('.arrow-left').addClass('delete');
    break;
    default:
}

}

$('.js-btn-next').click(function (){

{
  	
  dotsCurrent++
  changeslide();
  $('.dots').eq(dotsCurrent).addClass('active');

  dotsCurrent_back++
  changeslide();
  $('.dots').eq(dotsCurrent_back).removeClass('active');

  dotsCurrent_next++
  changeslide();


  console.log('現在のdots', dotsCurrent);
  console.log('前のdots', dotsCurrent_back);

}

if (slideCurrent === lastCurrent) {
    // console.log('現在のスライド',slideCurrent);
  } else {
    $('.arrow-left').removeClass('delete');
    slideCurrent++;
    changeslide();

    // console.log('現在のスライド', slideCurrent);
  }

})

$('.js-btn-back').click(function (){
  {
    dotsCurrent--
    changeslide();
    $('.dots').eq(dotsCurrent).addClass('active');

    dotsCurrent_back--
    changeslide();

    dotsCurrent_next--
    changeslide();
    $('.dots').eq(dotsCurrent_next).removeClass('active');

    console.log('現在のdots', dotsCurrent);
    console.log('次のdots', dotsCurrent_next);

  }

  if (slideCurrent === 0 ) {
    // console.log('現在のスライド',slideCurrent);
  } else {
    $('.arrow-right').removeClass('delete');
    slideCurrent--;
    changeslide();

    // console.log('現在のスライド',slideCurrent);
  }
})

})

eq()イコールメソッド

jQueryで特定の要素が何番目にあるのかを取得する：index()
https://uxmilk.jp/45334

「:not()」でセレクタ指定する！
https://www.sejuku.net/blog/37111
$('.dots:not(:eq(dotsCurrent))').removeClass('active');
↑dotsの○番目（クリックしたドット）以外のactive属性を削除する。

削除した上で
$('.dots').eq(dotsCurrent).addClass('active');
↑dotsの○番目（クリックしたドット）のactive属性を追加する。

これで切り替えができた
※順番を逆にするとactiveが全て消えるだけでうまく動作しなかった。

【完成】スライドをslickなしで作成
・最初のスライドの時は前に戻る矢印非表示
・最後のスライドの時は次は進む矢印非表示
・ドットも動作させる

// slickなし

$(function () {
let width = $('.carousel-list').outerWidth(true);
let length = $('.carousel-list').length;
let slideArea = width * length;
$('.carousel-area').css('width', slideArea);
let slideCurrent = 0;
let lastCurrent = $('.carousel-list').length - 1;
let dotsCurrent = 0;

console.log('最後のスライド番号', lastCurrent);

function changeslide() {
$('.carousel-area').stop().animate({
left: slideCurrent * - width
})

switch (slideCurrent) {
  case lastCurrent:
    $('.arrow-right').addClass('delete');
    break;
  case 0:
    $('.arrow-left').addClass('delete');
    break;
    default:
}

}

$('.js-btn-next').click(function (){

{	
  dotsCurrent++
  changeslide();
  $('.dots:not(:eq(dotsCurrent))').removeClass('active');
  $('.dots').eq(dotsCurrent).addClass('active');

  console.log('現在のdots', dotsCurrent);
}

if (slideCurrent === lastCurrent) {
    // console.log('現在のスライド',slideCurrent);
  } else {
    $('.arrow-left').removeClass('delete');
    slideCurrent++;
    changeslide();

    // console.log('現在のスライド', slideCurrent);
  }

})

$('.js-btn-back').click(function (){

{
  dotsCurrent--
  changeslide();
  $('.dots:not(:eq(dotsCurrent))').removeClass('active');
  $('.dots').eq(dotsCurrent).addClass('active');
  console.log('現在のdots', dotsCurrent);

}

  if (slideCurrent === 0 ) {
    // console.log('現在のスライド',slideCurrent);
  } else {
    $('.arrow-right').removeClass('delete');
    slideCurrent--;
    changeslide();
  }

})

$('.dots').on('click', function(){
const index = $('.dots').index(this);

  slideCurrent = index;
  dotsCurrent = index;
  changeslide();

  $('.dots:not(:eq(dotsCurrent))').removeClass('active');
  $('.dots').eq(dotsCurrent).addClass('active');

    switch (slideCurrent) {
      case 0:
        $('.arrow-right').removeClass('delete');
        $('.arrow-left').addClass('delete');
        break;
      case 1:
        $('.arrow-right').removeClass('delete');
        $('.arrow-left').removeClass('delete');
        break;
      case 2:
        $('.arrow-right').removeClass('delete');
        $('.arrow-left').removeClass('delete');
        break;
      case 3:
        $('.arrow-right').removeClass('delete');
        $('.arrow-left').removeClass('delete');
        break;
      case 4:
        $('.arrow-right').addClass('delete');
        $('.arrow-left').removeClass('delete');
        break;
        default:
    }
  console.log(index + 'th item clicked!');

})
})

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?