slickのcdnが効かない

題名通りslickのcdnが効きません。ファイルダウンロードよりcdnで対処したいので解決法「ファイルをダウンロードする」以外でお願いします。

<!DOCTYPE html>
<head>
<meata lang="ja">
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="design.css">
<script
  src="https://code.jquery.com/jquery-1.12.4.min.js"
  integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
  crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inview/1.0.0/jquery.inview.min.js"></script> 
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css"/>
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script> 
</head>
<body>
<ul class="slider">
     <li><a href="#"><img src="http://blogs.sweden.se/photo/files/2011/03/Sandwiches-at-Kulturhuset.jpg"></a></li>
     <li><a href="#"><img src="http://www.dreamhomestyle.com/wp-content/uploads/2014/10/modern-Swedish-crib-9.jpg"></a></li>
     <li><a href="#"><img src="http://football-uniform.up.n.seesaa.net/football-uniform/image/Sweden-12-UMBRO-women-home-kit-yellow-yellow-yellow-line-up.jpg?d=a0"></a></li>
     <li><a href="#"><img src="http://static5.businessinsider.com/image/4f19eb6beab8ea5b3600006a-1200/sweden-school.jpg"></a></li>
</ul>
<script>
$(function() {
    $('.multiple-item').slick({
          infinite: true,
          dots:true,
          slidesToShow: 6,
          slidesToScroll: 6,
          responsive: [{
               breakpoint: 768,
                    settings: {
                         slidesToShow: 3,
                         slidesToScroll: 3,
               }
          },{
               breakpoint: 480,
                    settings: {
                         slidesToShow: 2,
                         slidesToScroll: 2,
                    }
               }
          ]
     });
});
</script>
</body>

design.css

.slick-prev:before,
.slick-next:before {
    color: #000;
}

.slick-next {
    right: 20px;
    z-index: 99;
}
.slick-prev {
     left: 15px;
    z-index: 100;
}

.slick-dots li.slick-active button:before,
.slick-dots li button:before {
    color: #fff;
}

img {
    max-width: 100%;
     height: auto;
}

ちなみに https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js これで試してもダメでした。。

行動規範の内容に同意します

回答2件

ベストアンサー

'.multiple-item' が無いからでは？
'.slider' に置き換えてみてください。

投稿2017/05/15 19:09

kei344

総合スコア69398

kazoogon

2017/05/15 22:45

効きませんね...汗

退会済みユーザー

2017/05/16 00:20 編集

slick-theme.cssも無い？ https://jsfiddle.net/dotasterisque/L1z3ec43/7/

kazoogon

2017/05/16 13:19

効きません。。。　バージョンの問題でしょうか？？

kei344

2017/05/16 16:18

https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css これを呼んでいないから。動くサンプル： https://jsfiddle.net/yk7g3Lqo/ 【slick-carousel - cdnjs.com - The best FOSS CDN for web related libraries to speed up your websites!】 https://cdnjs.com/libraries/slick-carousel

kazoogon

2017/05/20 02:48

効きません汗それどころかinview.jsの部分まで効かなくなりました汗

kazoogon

2017/05/20 03:36

この質問ではinview.jsのコードは載せてませんでした、すみません

kei344

2017/05/20 03:55

エラーは出ていませんか？デベロッパーツールで確認してみてください。http://eng-entrance.com/javascript-display-error

kazoogon

2017/05/20 05:57

Uncaught SyntaxError: Invalid or unexpected token jsfiddle.net/:1 Uncaught SyntaxError: Unexpected token < design.html:1 Refused to execute script from 'https://cdnjs.com/libraries/fullPage.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled. design.html:98 Uncaught TypeError: $(...).fullpage is not a function at HTMLDocument.<anonymous> (design.html:98) at i (jquery-1.12.4.min.js:2) at Object.fireWith [as resolveWith] (jquery-1.12.4.min.js:2) at Function.ready (jquery-1.12.4.min.js:2) at HTMLDocument.K (jquery-1.12.4.min.js:2) こう表示されます（他のライブラリも使っていますが、それもエラーがでてますね。。）

kei344

2017/05/20 06:30

https://jsfiddle.net/yk7g3Lqo/ これは確認されましたか？で、そこにと質問文にfullPage.jsが書いてありますか？質問した内容と今書いているコードが変わっていませんか。エラーの内容は根本的にCDNの利用方法が間違っていると出ています。 https://cdnjs.com/libraries/fullPage.js このページにアクセスしてから何が間違いか見直してください。

kazoogon

2017/05/20 15:07

はい確認しました。　この質問では見やすくするためにslickの部分しか書いていませんでしたが、先ほどはfullpage.jsのエラーも書いてしまいました、コード自体は変わっていません、すみませんでした。 script src="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css"></script> </script src="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css"></script> ライブラリ読み込みコードはこれで間違ってないですよね？？

kei344

2017/05/20 15:38

kazoogon

2017/05/21 08:38

左右の矢印が下に点で表されていますが、とりあえず動くようになりました、ありがとうございます。またfullpage.jsも同じようにcssファイルを読み込む必要がありますかね？？

kei344

2017/05/21 09:02

https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.4/jquery.fullpage.css ありますね。一部機能を利用するのであれば他に2つほどjsを読み込む必要がありそうですが、公式ドキュメントで確認してください。

行動規範の内容に同意します

以下の点を変更して、確認したところ無事動作しましたが、いかがでしょうか？

<meata lang="ja">を削除。
htmlタグを追加。
scriptタグとlinkタグを分ける。
slick-theme.cssを読み込む。
background-colorプロパティを追加。

HTML
1<!DOCTYPE html>
2<html>
3<head>
4    <meta charset="UTF-8">
5    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css">
6    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick-theme.css">
7    <title>タイトル</title>
8    <style type="text/css">
9        body {
10            background-color: #c8c8c8; /* 追加。 */
11        }
12
13        .slick-prev:before,
14        .slick-next:before {
15            color: #000;
16        }
17
18        .slick-next {
19            right: 20px;
20            z-index: 99;
21        }
22
23        .slick-prev {
24            left: 15px;
25            z-index: 100;
26        }
27
28        .slick-dots li.slick-active button:before,
29        .slick-dots li button:before {
30            color: #fff;
31        }
32
33        img {
34            max-width: 100%;
35            height: auto;
36        }
37    </style>
38</head>
39<body>
40<ul class="multiple-item">
41    <li>
42        <a href="#">
43            <img src="http://blogs.sweden.se/photo/files/2011/03/Sandwiches-at-Kulturhuset.jpg">
44        </a></li>
45    <li>
46        <a href="#">
47            <img src="http://www.dreamhomestyle.com/wp-content/uploads/2014/10/modern-Swedish-crib-9.jpg">
48        </a>
49    </li>
50    <li>
51        <a href="#">
52            <img src="http://football-uniform.up.n.seesaa.net/football-uniform/image/Sweden-12-UMBRO-women-home-kit-yellow-yellow-yellow-line-up.jpg?d=a0">
53        </a>
54    </li>
55    <li>
56        <a href="#">
57            <img src="http://static5.businessinsider.com/image/4f19eb6beab8ea5b3600006a-1200/sweden-school.jpg">
58        </a>
59    </li>
60</ul>
61<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
62<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inview/1.0.0/jquery.inview.min.js"></script>
63<script src="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
64<script type="text/javascript">
65    $(function () {
66        $('.multiple-item').slick({
67            dots: true,
68            infinite: true,
69            slidesToShow: 6,
70            slidesToScroll: 6,
71            responsive: [
72                {
73                    breakpoint: 768,
74                    settings: {
75                        slidesToShow: 3,
76                        slidesToScroll: 3,
77                    }
78                },
79                {
80                    breakpoint: 480,
81                    settings: {
82                        slidesToShow: 2,
83                        slidesToScroll: 2,
84                    }
85                }
86            ]
87        });
88    });
89</script>
90</body>
91</html>