Q&A前提・実現したいこと
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件
0
自己解決
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
総合スコア0
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。