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

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

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

1回答

717閲覧

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

yukki-1227

総合スコア47

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

1クリップ

投稿2022/05/15 07:15

*①slick(スライダー)での再生・停止ボタンが効きません
② slidesToShow:1, にしているのにも関わらず、スライド画面が並列で表示される
<div class="ps"><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p class="pl"></p></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

気になる質問をクリップする

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

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

投稿2022/05/15 08:32

koji

総合スコア111

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yukki-1227

2022/05/15 08:35

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

2022/05/15 08:47

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

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を使うと正常に動作しないと思います。 どうしても使いたい場合は段階を踏んで入れていった方が良いのではないでしょうか。
yukki-1227

2022/05/15 10:12

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

2022/05/15 10:52

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問