画面サイズ768px未満で表示した時のみタブ切り替えコンテンツ内でslick.jsを動かしたい

前提・実現したいこと

slick.jsを使用し画面サイズ768px未満の時のみ、タブ切り替えコンテンツ内をスライドさせたいです。
画面サイズに応じてスライドの有り無しを設定することはできました。
しかしスライド有りの時、タブを切り替えると表示が崩れます。
ご助言を頂けたら幸いです。宜しくお願い致します。

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <meta http-equiv="X-UA-Compatible" content="ie=edge">
7  <title>Document</title>
8  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css"/>
9  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css">
10  <link rel="stylesheet" type="text/css" href="style.css">
11</head>
12<body>
13
14  <ul class="tabmenu">
15    <li class="tab active">タブ１</li>
16    <li class="tab">タブ２</li>
17  </ul>
18
19  <div class="tab_content current">
20      <div class="tab_box">
21        <div class="tab_item">
22          タブ１の内容１
23        </div>
24        <div class="tab_item">
25          タブ１の内容２
26        </div>
27      </div>
28  </div>
29
30  <div class="tab_content">
31    <div class="tab_box">
32      <div class="tab_item">
33        タブ２の内容１
34      </div>
35      <div class="tab_item">
36        タブ２の内容２
37      </div>
38    </div>
39  </div>
40
41<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs=" crossorigin="anonymous"></script>
42<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
43
44<script>
45//タブ切り替え
46$('.tab').click(function(){
47    $('.active').removeClass('active');
48    $(this).addClass('active');
49    $('.current').removeClass('current');
50    const index = $(this).index();
51    $('.tab_content').eq(index).addClass('current');
52});
53
54//slider
55const mediaQuery = window.matchMedia('(min-width: 768px)')
56function checkBreakPoint(mql) {
57  if (mql.matches) {
58    $('.tab_box').slick('unslick');
59  } else {
60    $('.tab_box').slick({
61      autoplay: true,
62      arrow: true,
63      });
64  }
65}
66mediaQuery.addListener(checkBreakPoint)
67checkBreakPoint(mediaQuery)
68</script>
69
70</body>
71</html>

css
1* {
2  margin: 0;
3  padding: 0;
4  list-style: none;
5}
6.tabmenu {
7  width: 80%;
8  margin: 10px auto;
9  display: flex;
10  justify-content: space-between;
11}
12.tabmenu li {
13  cursor: pointer;
14  background: #e6e6e6;
15  border: 1px solid #6a6a6a;
16  width: 48%;
17  text-align: center;
18  height: 50px;
19  line-height: 50px;
20}
21.tabmenu li.active {
22  background: #7eb7bf;
23}
24.tab_content {
25  width: 80%;
26  margin: 0 auto;
27  border: 1px solid #6a6a6a;
28  display: none;
29}
30.tab_content.current {
31  display: block;
32}
33.tab_item {
34  width: 100%;
35  height: 50px;
36  line-height: 50px;
37  text-align: center;
38  background: #feffd6;
39}
40.tab_item:nth-of-type(odd) {
41  background: #c3dfc9;
42}
43.slick-prev:before,
44.slick-next:before {
45  color: #000 !important;
46}

行動規範の内容に同意します

回答1件

自己解決

sliderのコードに以下の通り条件を追加し、自己解決できました。
ありがとうございました。

//slider
const mediaQuery = window.matchMedia('(min-width: 768px)')
function checkBreakPoint(e) {
if (e.matches) {
$('.tab_box').slick('unslick');
} else {
$(function(){
const slider = $('.tab_box').slick({
arrow: true,
});
$('.tab').click(function() {
slider.slick('setPosition');
});
});
}
}
mediaQuery.addListener(checkBreakPoint)
checkBreakPoint(mediaQuery)

投稿2021/02/18 12:34

編集2021/02/19 10:13

tomo320

総合スコア0

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

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

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