画面サイズ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)