*①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
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>slick</title> <script src="https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js"></script> <link rel="stylesheet" href="public/stylesheets/style.css"> <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/> <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script> <script src="/index.js"></script> </head> <body> <main> <div class="mainvg"> <div class="maincont"> <div class="text_side"> <p class="vgtext">aaaa</p> <p class="vgtext2">iiii</p> </div> <ul class="slick_list"> <li><img src="/public/images/todo.png" alt="1"></li> <li><img src="/public/images/usagi.png" alt="2"></li> <li><img src="/public/images/todo.png" alt="3"></li> </ul> </div> <div class="p-pc-main-visual__control"> <div class="p-pc-main-visual__control-item"><button type="button" class="p-pc-main-visual__play">再生</button></div> <div class="p-pc-main-visual__control-item"><button type="button" class="p-pc-main-visual__pause is-select">停止</button></div> </div> </div> </div> <div class="ttl"> <p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><h2>ウサギたち</h2><p>........</p> </div> <div class="ps"><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p class="pl"></p></div> </main> </body> </html>
style.css
.text_side{ display:flex; width: 35%; } .mainvg{ height:550px; background-image:url("/public/images/quiz.png"); } .maincont{ display: flex; } .vgtext{ writing-mode: vertical-rl; } .vgtext2{ writing-mode: vertical-rl; } .slick_list{ width:65%; } .slick-next{ right:0!important; position: absolute; top: 10rem; right: 0; background-color: pink; padding: 1rem; } .slick-prev{ left:0!important; position: absolute; top: 16rem; right: -2rem; background-color: pink; padding: 1rem; } .slick-arrow{ z-index:2!important; } .slick-arrow:before{ content:""!important; } .slide-dots{ display: flex; } .slick-active{ background-color:green; } .playbuttons{ display:flex; } .ttl{ display: flex; justify-content: center; } .p-pc-main-visual__control{ display:flex; } .p-pc-main-visual__play.is-select, .is-select.p-pickup__play, .p-pc-main-visual__pause.is-select, .is-select.p-pickup__pause { color: #ffffff; font-weight: bold; background-color: #848484; } p{ transform: scale(1.2, 4); font-weight: 900; border-radius: 1px; font-size: 1.2rem; } h2{ margin-left: 0.5rem; margin-right: 0.5rem; } .ps{ display:flex; justify-content: center; align-items: center; /* align-self: self-start; */ height: 100%; } .pl{ background-color: blue; content: ""; height: 0.3rem; padding-left: 0.1rem; padding-right: 0.1rem; align-self: self-end; }
index.js
$(function(){ $('.slick_list').slick({ dots:true, dotsClass: 'slide-dots', infinite:true, slidesToShow:1, slidesToScroll:1, centerMode:true, variableWidth:true, speed:1000, autoplay:true, accessibility:false, arrows: true, prevArrow: '<button class="slide-arrow prev-arrow"></button>', nextArrow: '<button class="slide-arrow next-arrow"></button>' }); $('.p-pc-main-visual__play').on('click', function(){ $('.p-pc-main-visual__list').slick('slickPlay'); $(this).addClass('is-select'); $('.p-pc-main-visual__pause').removeClass('is-select'); }); $('.p-pc-main-visual__pause').on('click', function(){ $('.p-pc-main-visual__list').slick('slickPause'); $(this).addClass('is-select'); $('.p-pc-main-visual__play').removeClass('is-select'); }); });
まだ回答がついていません
会員登録して回答してみよう