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

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

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

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

HTML5

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

jQueryプラグイン

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

スライダー

GUIのグラフィカルウィジェットのひとつです。インジケーターを動かすことで値を調節可能とします。

受付中

slickのスライダーのドットが二つ出てきてカスタマイズの方法が分かりません

yukki-1227
yukki-1227

総合スコア10

CSS3

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

HTML5

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

jQueryプラグイン

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

スライダー

GUIのグラフィカルウィジェットのひとつです。インジケーターを動かすことで値を調節可能とします。

1回答

0評価

0クリップ

150閲覧

投稿2022/05/15 10:38

ドットのカスタマイズの方法が分かりません

何度スライダーを作ってドットを表示させても、デフォルトで小さな〇と数字の書かれたボタンが出てきます。デフォルト表示でこれって普通ですか?

やりたいことは、数字の書かれたbuttonは消して、小さな〇の方にactiveがついて、activeがつくと丸の色が変わるようにしたいのですが、どうすればいいですか?
ドットをfalseにすると小さな〇も数字の書かれたactiveの移動するbuttonも消えます
どうかお願いします

※flexを使うとlickが正常に動作しない可能性があるとのことで、flexは全て解除しました
イメージ説明

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 ">停止</button></div> </div> <!-- <div class="buttons"> <div class="button js-stop">停止</div> <div class="button js-play">開始</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> <div> <ul class="slick_list2"> <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="block"> <div class="texts"><p>oooo</p><p>eeee</p></div> <ul class="slider"> <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="buttons"> <div class="button js-stop">停止</div> <div class="button js-play">開始</div> </div> </div> </main> </main> </body> </html>

style.css

*{ min-width: 0; min-height: 0; } .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-dots li { color:blue; } .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; } /* .buttons{ display:flex; } .block{ display:flex; } .texts{ display:flex; } */

index.js

$(function(){ $('.slick_list').slick({ dots:true, dotsClass: 'slide-dots', infinite:true, slidesToShow:1, slidesToScroll:1, centerMode:true, variableWidth:true, speed:500, 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'); }); $('.js-stop').on('click', function() { $('.slick_list').slick('slickPause'); }); $('.js-play').on('click', function() { $('.slick_list').slick('slickPlay'); }); $('.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'); $('.slick_list2').slick({ dots:true, dotsClass: 'slide-dots', infinite:true, slidesToShow:1, slidesToScroll:1, centerMode:true, variableWidth:true, speed:1000, autoplay:true, accessibility:false, arrows: true, }); $('.js-stop').on('click', function() { $('.slider').slick('slickPause'); }); $('.js-play').on('click', function() { $('.slider').slick('slickPlay'); }); }); $(document).ready(function(){ $('.slider').slick({ autoplay: true, autoplaySpeed: 500, dots:true, dotsClass: 'slide-dots', infinite:true, slidesToShow:1, slidesToScroll:1, centerMode:true, variableWidth:true, speed:1000, autoplay:true, accessibility:false, arrows: true, }); $('.js-stop').on('click', function() { $('.slider').slick('slickPause'); }); $('.js-play').on('click', function() { $('.slider').slick('slickPlay'); }); }); });

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

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

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

CSS3

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

HTML5

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

jQueryプラグイン

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

スライダー

GUIのグラフィカルウィジェットのひとつです。インジケーターを動かすことで値を調節可能とします。