\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n
\r\n \r\n
\r\n\r\n
\r\n \r\n
\r\n
\r\n \r\n\r\n\r\n```\r\n\r\n```css:style.css\r\nul {\r\n list-style: none;\r\n}\r\n\r\n.container {\r\n display: flex;\r\n}\r\n\r\n```\r\n\r\n```javascript:index.js\r\n$(function(){\r\n\r\n$('.slider').slick({\r\n autoplay:true,\r\n autoplaySpeed:5000,\r\n dots:true,\r\n});\r\n})\r\n\r\n```\r\n\r\n### 試したこと\r\nfloatで試してみたのですが、同様に要素が消えてしまいます...\r\n何が原因なのでしょうか？","answerCount":1,"upvoteCount":0,"datePublished":"2019-07-13T15:28:42.710Z","dateModified":"2022-01-12T10:55:45.698Z","suggestedAnswer":[{"@type":"Answer","text":"slick.jsはflexboxが使用されることが\r\n想定されたライブラリではないので\r\n**flexboxを使用すると表示が崩れます。**\r\n\r\n余計なプロパティの追加はせずに\r\n公式サイトのドキュメント通りに使用する必要があります。\r\n[https://kenwheeler.github.io/slick/](https://kenwheeler.github.io/slick/)","dateModified":"2019-07-15T08:01:52.437Z","datePublished":"2019-07-15T08:01:52.437Z","upvoteCount":1,"url":"https://teratail.com/questions/200391#reply-296926","comment":[]}],"breadcrumb":{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"https://teratail.com","name":"トップ"}},{"@type":"ListItem","position":2,"item":{"@id":"https://teratail.com/tags/HTML5","name":"HTML5に関する質問"}},{"@type":"ListItem","position":3,"item":{"@id":"https://teratail.com/questions/200391","name":"slick.js + flexboxで要素が消える"}}]}}}
teratail
回答率
85.29%
質問するログイン新規登録
トップHTML5に関する質問slick.js + flexboxで要素が消える

Q&A

1回答

3773閲覧

slick.js + flexboxで要素が消える

shoooo
shoooo

総合スコア34

HTML5

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2019/07/13 15:28

編集2019/07/15 07:46

0

0

やりたいこと

イメージ説明

上記のようの画像スライドコンテンツを横並びにしたいのですが、フレックスボックスを用いて、横並びにすると、なぜか要素が消えてしまいます。

該当のソースコード

html:index.html
1<!DOCTYPE html>
2<html lang="ja">
3    <head>
4        <meta charset="UTF-8">
5        <script src="js/index.js"></script>
6        <link rel="stylesheet" href="css/style.css">
7        <!-- slick -->
8        <link href="slick/slick-theme.css" rel="stylesheet" type="text/css">
9        <link href="slick/slick.css" rel="stylesheet" type="text/css">
10        <script src="https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js"></script>
11        <script type="text/javascript" src="slick/slick.min.js"></script>
12    </head>
13    <body>
14        <div class="container">
15            <div class="item">
16                <ul class="slider">
17                    <li><a href="#"><img src="images/1.png" alt="image01"></a></li>
18                    <li><a href="#"><img src="images/2.png" alt="image02"></a></li>
19                    <li><a href="#"><img src="images/3.png" alt="image03"></a></li>
20                </ul>
21            </div>
22
23            <div class="item">
24                <ul class="slider">
25                    <li><a href="#"><img src="images/4.jpg" alt="image04"></a></li>
26                    <li><a href="#"><img src="images/5.png" alt="image05"></a></li>
27                    <li><a href="#"><img src="images/6.png" alt="image06"></a></li>
28                </ul>
29            </div>
30        </div>
31    </body>
32</html>
33
css:style.css
1ul {
2  list-style: none;
3}
4
5.container {
6  display: flex;
7}
8
javascript:index.js
1$(function(){
2
3$('.slider').slick({
4    autoplay:true,
5    autoplaySpeed:5000,
6    dots:true,
7});
8})
9

試したこと

floatで試してみたのですが、同様に要素が消えてしまいます...
何が原因なのでしょうか？

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

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

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

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

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

yasutomi
yasutomi

2019/07/13 16:08

とりあえず、js/index.jsのコードの記載と 重複しているjquery.min.js削除を先に行うべきかと。
shoooo
shoooo

2019/07/13 16:11

すみません。ご指摘ありがとうございます！
guest

回答1件

0

slick.jsはflexboxが使用されることが
想定されたライブラリではないので
flexboxを使用すると表示が崩れます。

余計なプロパティの追加はせずに
公式サイトのドキュメント通りに使用する必要があります。
https://kenwheeler.github.io/slick/

投稿2019/07/15 08:01

yasutomi
yasutomi

総合スコア2941

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

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

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

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

ただいまの回答率
85.29%

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

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

質問する

関連した質問

トップHTML5に関する質問

slick.js + flexboxで要素が消える