①slick（スライダー）での再生・停止ボタンが効きません

*①slick（スライダー）での再生・停止ボタンが効きません
② slidesToShow:1,　にしているのにも関わらず、スライド画面が並列で表示される
③<div class="ps">.......</div>のflexアイテムが、親要素のpsに
.ps{
display:flex;
justify-content: center;
align-items: center;
/ align-self: self-start; */
height: 100%;
｝としているにも関わらず縦中央にならない
**

ため困っています。特に、再生・停止ボタンが動かなくて困っています
助けてください

index.html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>slick</title>
8    <script src="https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js"></script>
9    <link rel="stylesheet" href="public/stylesheets/style.css">
10    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
11    <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
12    <script src="/index.js"></script>
13</head>
14<body>
15    <main>
16     <div class="mainvg">
17      <div class="maincont">
18       <div class="text_side">
19        <p class="vgtext">aaaa</p>
20        <p class="vgtext2">iiii</p>
21       </div> 
22      <ul class="slick_list">
23      
24       <li><img src="/public/images/todo.png" alt="1"></li>
25       <li><img src="/public/images/usagi.png" alt="2"></li>
26       <li><img src="/public/images/todo.png" alt="3"></li>
27      </ul>
28      
29    </div>
30    <div class="p-pc-main-visual__control">
31    <div class="p-pc-main-visual__control-item"><button type="button" class="p-pc-main-visual__play">再生</button></div>
32    <div class="p-pc-main-visual__control-item"><button type="button" class="p-pc-main-visual__pause is-select">停止</button></div>
33  </div>
34    
35      </div>
36     </div>
37     <div class="ttl">
38     <p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><h2>ウサギたち</h2><p>........</p>
39     </div>
40     <div class="ps"><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p class="pl"></p></div>
41    </main>
42    
43</body>
44</html>

style.css
1.text_side{
2    display:flex;
3    width: 35%;
4}
5.mainvg{
6    height:550px;
7    background-image:url("/public/images/quiz.png");
8}
9.maincont{
10    display: flex;
11}
12.vgtext{
13    writing-mode: vertical-rl;
14}
15.vgtext2{
16    writing-mode: vertical-rl;
17}
18.slick_list{
19    width:65%;
20}
21.slick-next{ right:0!important;
22    position: absolute;
23    top: 10rem;
24    right: 0;
25    background-color: pink;
26    padding: 1rem;
27 }
28.slick-prev{ left:0!important; 
29    position: absolute;
30    top: 16rem;
31    right: -2rem;
32    background-color: pink;
33    padding: 1rem;
34}
35.slick-arrow{ z-index:2!important; }
36.slick-arrow:before{
37        content:""!important;
38    }    
39
40.slide-dots{
41    display: flex;
42    
43}
44.slick-active{
45    background-color:green;
46}
47.playbuttons{
48    display:flex;
49}
50.ttl{
51    display: flex;
52    justify-content: center;
53}
54.p-pc-main-visual__control{
55    display:flex;
56}
57.p-pc-main-visual__play.is-select, .is-select.p-pickup__play, .p-pc-main-visual__pause.is-select, .is-select.p-pickup__pause {
58    color: #ffffff;
59    font-weight: bold;
60    background-color: #848484;
61  }
62
63p{
64    transform: scale(1.2, 4);
65    font-weight: 900;
66    border-radius: 1px;
67    font-size: 1.2rem;
68}
69h2{
70    margin-left: 0.5rem;
71    margin-right: 0.5rem;
72}
73.ps{
74    display:flex;
75    justify-content: center;
76    align-items: center;
77    /* align-self: self-start; */
78    height: 100%;
79
80}
81.pl{
82    background-color: blue;
83    content: "";
84    height: 0.3rem;
85    padding-left: 0.1rem;
86    padding-right: 0.1rem;
87    align-self: self-end;
88}

index.js
1$(function(){
2  $('.slick_list').slick({
3     dots:true,
4     dotsClass: 'slide-dots',
5     infinite:true,
6     slidesToShow:1,
7     slidesToScroll:1,
8     centerMode:true,
9     variableWidth:true,
10     speed:1000,
11     autoplay:true,
12     accessibility:false,
13     arrows: true,
14     prevArrow: '<button class="slide-arrow prev-arrow"></button>',
15    nextArrow: '<button class="slide-arrow next-arrow"></button>'
16  });
17  $('.p-pc-main-visual__play').on('click', function(){
18		$('.p-pc-main-visual__list').slick('slickPlay');
19		$(this).addClass('is-select');
20		$('.p-pc-main-visual__pause').removeClass('is-select');
21	});
22
23	$('.p-pc-main-visual__pause').on('click', function(){
24		$('.p-pc-main-visual__list').slick('slickPause');
25		$(this).addClass('is-select');
26		$('.p-pc-main-visual__play').removeClass('is-select');
27	});
28
29  
30});
31

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

回答1件

slickを使うのにfiexを使ったら駄目だと思います。

投稿2022/05/15 08:32

koji

総合スコア111

loving

2022/05/15 08:35

回答ありがとうございます flexで横並びにしていると再生停止ボタンが動作しないことがあるということでしょうか？

loving

2022/05/15 08:47

https://ks-blog.com/slickflexbox-solveを参考に、 “slick.js” は “Javascript” を記載するクラスの親要素以上に、 “flexbox” を適応させるとうまく作動しない場合があります。とのことだったので、ｃｓｓに ```style.css *{ min-width: 0; min-height: 0; } ``` と追記しましたが、改善されません。

loving

2022/05/15 08:51

slickの親<div class="maincont">から、display:flexを解除しましたが、改善されませんどうかご教授ください

koji

2022/05/15 08:51

いえ、そうではありません。 flexを使っていることによってそれ以前にスライダーが正常に動作していないということです。まずはスライダーをきちんと動作するようにしないといけないので、 flexを使わずにスライドが動作するようにしてみてください。スライダーが正常に動作していない状態では当然ながら再生ボタンも正常に動作しないと思います。

koji

2022/05/15 08:54

少し古い記事ですが、こちらを参考にまずスライダーを正常に動作させてみてください。 https://k-sugi.sakura.ne.jp/javascript/4055/ その上で色々触った方が、動作しなくなったタイミングと原因も掴みやすくなると思います。

koji

2022/05/15 09:01 編集

maincont以外にも数箇所でflexを使われていると思います。スライドに関する部分でflexを使うと正常に動作しないと思います。どうしても使いたい場合は段階を踏んで入れていった方が良いのではないでしょうか。

loving

2022/05/15 10:12

ありがとうございます flexではなくBootstrapのグリッドを使って、左右にコンテンツを並べた場合、開発者ツール上ではflex表記になると思いますが、Bootstrapのグリッドも使わない方が無難でしょうか？ float:leftやfloat:rightで枠組みする分には問題ありませんか？

koji

2022/05/15 10:52

スライダー自体がコンテンツを横並びにする機能を保持しています。そこに更に横並びにする記述をする意味はないのでは？と思う次第です。スライダーを複数設置し、横並びにするのであれば目的は分かりますが。先程も申しましたが、一旦はきちんとスライダーが機能するようになってから、色々試されたら良いと思います。