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

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

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

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

Q&A

解決済

2回答

975閲覧

slick.jsのカスタマイズについて

takuma1217

総合スコア20

JavaScript

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

0グッド

0クリップ

投稿2019/06/09 10:55

編集2019/06/09 11:07

前提・実現したいこと

slick.jsでやじるしやドットをよくあるスライドショーの形にしたい。

発生している問題・エラーメッセージ

イメージ説明説明](54dfecae18b406a83c8cfc636dc65355.png)
画像のようなレイアウトになっており、カスタマイズの仕方がわからないです。
ネットで、slick.jsに関する記事は一通り読んだのですが、ソースコードを確認したのですが、なにも記述がないまま、Previous,Nextの部分が<、>になっていたり、下のボタン要素の1、2、3、4の部分が良くあるようなドットの形になっていたり、おそらくデフォルトのCSSの設定が適応されています。
なのでおそらく自分がCSSを読み込めていない可能性があると思い質問させていただきました。なにか読み込み忘れているCSSがあるのでしょうか?ご回答よろしくお願いします。ちなみに、styles.cssとmain.jsは自分独自で設定しているCSSです。

該当のソースコード

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" href="css/slick.css"> 9 <link rel="stylesheet" href="css/styles.css"> 10 <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet"> 11</head> 12<body> 13 14 <div class="slider"> 15 <div class="slider1 slide"></div> 16 <div class="slider2 slide"></div> 17 <div class="slider3 slide"></div> 18 <div class="slider4 slide"></div> 19 </div> 20 <script 21 src="https://code.jquery.com/jquery-3.4.1.min.js" 22 integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" 23 crossorigin="anonymous"></script> 24 <script src="js/slick.min.js"></script> 25 <script src="js/main.js"></script> 26</body> 27</html>

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

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

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

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

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

kei344

2019/06/09 10:59

「発生している問題」の部分はコードでないので、コードブロックで囲む必要はありません。
guest

回答2

0

ベストアンサー

公式サイトの Getting Started に "Add slick.css in your <head>" という箇所がありますが、そこには

<link rel="stylesheet" type="text/css" href="slick/slick.css"/> // Add the new slick-theme.css if you want the default styling <link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>

とあります。「デフォルトのスタイルにする場合は slick-theme.css を追加してください」とのことですので、こちらも読み込んでみてください。

投稿2019/06/09 11:49

YukiYamashina

総合スコア1011

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

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

0

これが不足しています。

HTML

1<link rel="stylesheet" type="text/css" href="css/slick-theme.css"/>

投稿2019/06/09 11:51

kei344

総合スコア69364

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問