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

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

ただいまの
回答率

90.10%

タブ切り替えとスライダー併用時、タブを切り替えた際の表示順について

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,370

Gou0209

score 9

 前提・実現したいこと

タブで切り替えした要素の中にjQueryプラグイン(slick.js)を使用したスライダーを設置しています。用途としては、カテゴリー毎の商品ランキングで使用したいと思っています。スライダーでは商品は4つ並びで、左右のボタンで8つの商品が順番で切り替えができるようになっています。他のタブを押すことでカテゴリーの切り替えができ、別カテゴリーの商品が4つ並びます。

初期の画面では問題ないのですが、タブを切り替えた際に1つ目から4つ目までの商品を表示させたいのですが、5つ目から8つ目までの商品が表示されてしまいます。商品数を7つにすると、4つ目から7つ目までの商品が表示されました。

タブで切り替えた際に、1つ目から4つ目までの4つの商品を表示させるにはどうしたらよいでしょうか。お分かりの方、お力を貸していただければ幸いです。よろしくお願いします。

slick
http://kenwheeler.github.io/slick/

【追加】9/6
タブを切り替えた後、、5つ目から8つ目までが表示されている際に、左右のボタンを押した時、4つ商品が移動する(1つ目から4つ目が表示されるはず)のですが、移動後も同じ5つ目から8つ目までが表示されてしまう場合がありました。

 HTML

<!DOCTYPE html>
<head>
<link rel="stylesheet" href="./css/slick.css"> <!--slick.jsのファイル-->
<link rel="stylesheet" href="./css/slick-theme.css"> <!--slick.jsのファイル-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="./js/slick.min.js"></script> <!--slick.jsのファイル-->
</head>
<body>
<div id="ranking">
    <h2>ランキング</h2>
    <div class="tab_wrap">
        <input id="tab1" class="tabtab" type="radio" name="tab_btn" checked>
        <input id="tab2" class="tabtab" type="radio" name="tab_btn">

        <div class="tab_area">
            <label class="tab1_label" for="tab1">カテゴリー1</label>
            <label class="tab2_label" for="tab2">カテゴリー2</label>
        </div>
        <div class="panel_area">
            <div id="panel1" class="tab_panel">
                <div class="multiple-items">
                    <div class="box"><a href="#">
                        <img src="/img/item01.jpg">
                        <div class="title">商品名A</div>
                        <div class="price">金額</div>
                        <div class="number">1位</div></a>
                    </div>
                    <div class="box"><a href="#">
                        <img src="/img/item02.jpg">
                        <div class="title">商品名B</div>
                        <div class="price">金額</div>
                        <div class="number">2位</div></a>
                    </div>
                    <div class="box"><a href="#">
                        <img src="/img/item03.jpg">
                        <div class="title">商品名C</div>
                        <div class="price">金額</div>
                        <div class="number">3位</div></a>
                    </div>
                    <div class="box"><a href="#">
                        <img src="/img/item04.jpg">
                        <div class="title">商品名D</div>
                        <div class="price">金額</div>
                        <div class="number">4位</div></a>
                    </div>
                    <div class="box"><a href="#">
                        <img src="/img/item05.jpg">
                        <div class="title">商品名E</div>
                        <div class="price">金額</div>
                        <div class="number">5位</div></a>
                    </div>
                    <div class="box"><a href="#">
                        <img src="/img/item06.jpg">
                        <div class="title">商品名F</div>
                        <div class="price">金額</div>
                        <div class="number">6位</div></a>
                    </div>
                    <div class="box"><a href="#">
                        <img src="/img/item07.jpg">
                        <div class="title">商品名G</div>
                        <div class="price">金額</div>
                        <div class="number">7位</div></a>
                    </div>
                    <div class="box"><a href="#">
                        <img src="/img/item08.jpg">
                        <div class="title">商品名H</div>
                        <div class="price">金額</div>
                        <div class="number">8位</div></a>
                    </div>                                                                                                    
                </div>
            </div>
            <div id="panel2" class="tab_panel">
                <div class="multiple-items">
                    <div class="box"><a href="#">
                        <img src="/img/item01.jpg">
                        <div class="title">商品名I</div>
                        <div class="price">金額</div>
                        <div class="number">1位</div></a>
                    </div>
                    <div class="box"><a href="#">
                        <img src="/img/item02.jpg">
                        <div class="title">商品名J</div>
                        <div class="price">金額</div>
                        <div class="number">2位</div></a>
                    </div>
                    <div class="box"><a href="#">
                        <img src="/img/item03.jpg">
                        <div class="title">商品名K</div>
                        <div class="price">金額</div>
                        <div class="number">3位</div></a>
                    </div>
                    <div class="box"><a href="#">
                        <img src="/img/item04.jpg">
                        <div class="title">商品名L</div>
                        <div class="price">金額</div>
                        <div class="number">4位</div></a>
                    </div>
                    <div class="box"><a href="#">
                        <img src="/img/item05.jpg">
                        <div class="title">商品名M</div>
                        <div class="price">金額</div>
                        <div class="number">5位</div></a>
                    </div>
                    <div class="box"><a href="#">
                        <img src="/img/item06.jpg">
                        <div class="title">商品名N</div>
                        <div class="price">金額</div>
                        <div class="number">6位</div></a>
                    </div>    
                    <div class="box"><a href="#">
                        <img src="/img/item05.jpg">
                        <div class="title">商品名O</div>
                        <div class="price">金額</div>
                        <div class="number">7位</div></a>
                    </div>
                    <div class="box"><a href="#">
                        <img src="/img/item06.jpg">
                        <div class="title">商品名P</div>
                        <div class="price">金額</div>
                        <div class="number">8位</div></a>
                    </div>                                                                                                                            
                </div>
            </div>

        </div>                        
    </div>                                                                                                                                                                                    
</div>
</body>
</html>

 JS

<!-- 人気ランキングスライダー -->
<script>
$(function() {
var slick = $('.multiple-items').slick({
infinite: true,
dots:false,
initialSlide:0,
slidesToShow: 4,
slidesToScroll: 4
});
$('.tabtab').on( 'change', function(){
     slick.slick( 'reinit' );
     slick.slick('setPosition');
     } );
});
</script>

 CSS

#ranking{
    position:relative;
}
#ranking{
    position:relative;
}
.tab_wrap{
    width:900px;
}
input[type="radio"]{display:none;}
.tab_area{
    font-size:0;
    margin:0 15px;
}
.tab_area label{
    width:135px;
    display:inline-block;
    padding:10px;
    color:#fff;
    background:#b8b7b7;
    font-size:16px;
    cursor:pointer;
    margin:0 5px 0;
}
.panel_area{
    background:#d1f5ff;
}

.tab_panel{
    width:100%;
    padding:15px 40px 25px;
    display:none;
    box-sizing:border-box;
}
.tab_panel p{
    font-size:14px;
    letter-spacing:1px;
    text-align:center;
}
#tab1:checked ~ .tab_area .tab1_label{background:#00c4fd; }
#tab1:checked ~ .panel_area #panel1{display:block;}
#tab2:checked ~ .tab_area .tab2_label{background:#00c4fd; }
#tab2:checked ~ .panel_area #panel2{display:block;}

.slick-track{
    margin:0;
}
.box{
    box-sizing:border-box;
    padding:10px 5px;
    background:#fff;
    position:relative;
}
.box img{
    width:150px;
    height:150px;
    display:block;
    margin:0 auto 5px;
}
.number{
    position:absolute;
    left:8px;
    top:40px;
    background:#00c4fd;
    width:40px;
    color:#fff;
}
.slick-prev::before ,.slick-next::before {
    content: '\f104';
    font-family:FontAwesome;
    color: #fff;
    background: #00c4fd;
    padding: 20px 5px;
}
.slick-next::before {
    content: '\f105';
}
button.slick-next{
    display:block;
}
.slick-initialized .slick-slide {
    margin: 0 5px;
}
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • spookybird

    2018/09/05 16:33

    コードはコードブロックに入れてください。これだけの規模になると生文字列から解読する気にはならないです。

    キャンセル

  • Gou0209

    2018/09/05 17:32

    ご指摘ありがとうございます。すいません。初めてで使い方が良くわかっていませんでした。修正させていただきました。

    キャンセル

  • spookybird

    2018/09/05 21:52 編集

    https://jsfiddle.net/xpvt214o/740621/ とりあえず適当な画像を使って再現させてみようと思ったんですが、タブの切替が動作しないので無理でした。タブ切替処理もご提示ください。というか質問の事象が再現可能なコードをご提示ください。

    キャンセル

  • Gou0209

    2018/09/06 10:24

    ご対応ありがとうございます。大変失礼しました。同じ現象が確認できるコードに修正させていただきました。文字数の関係でタブの数を1つ減らしております。また、文章に一部【追加】をさせていただいております。タブを切り替えることができれば、すぐに確認ができるかと存じます。

    キャンセル

回答 1

checkベストアンサー

+3

https://jsfiddle.net/xpvt214o/744849/
思ってるように動くと思います。

まず、悪さをしているのはこいつです。
slick.slick( 'reinit' );
これイベントなので、タブを切り替えるたびにslickに「再初期化されたよー」と通知してしまい、余計な処理が走ってるようです。
5~8位が2セット表示されたりしてぶっ壊れてました。

で、おそらくタブの移動をすると再度1位から表示したいんだろうなーと思い、
slick.slick('slickGoTo', 1);
これを追加しています。

こうです。

$('.tabtab').on('change', function() {
  slick.slick('setPosition');
  slick.slick('slickGoTo', 1);
});

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/09/06 12:14

    ありがとうございます。教えたいただいたように修正したら思ったように動くようになりました。JavaScriptは初心者なので、少しずつ勉強していきたいと思います。本当にありがとうございました。

    キャンセル

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

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