以前、ワードプレスを使用してslickスライダーを実装したときに
なぜか「縦ならびのままスライドする」というトンチンカンなことが起こったので
そのときの対処法を備忘録で残しておきたいと思います。
もともと記載していた記述が下記です。
head内に記載していました。slickスライダーが動かないとかでもなく、
動くけど画像がすべて縦並び…という感じです。
slickに必要な記載は、CSSでは一番下部に
JSではslickのJSを記述する「common.js」の直上に記載しました。
1 2 3 4 5 6 7 8 | <!--css--> <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet"> <link type="text/css" rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/font.css"> <link type="text/css" rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/reset.css"> <link type="text/css" rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/layout.css"> <link type="text/css" rel="stylrsheet" href="<?php echo get_template_directory_uri(); ?>/css/slick.css"> //ここに記載 <link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/css/slick-theme.min.css"/> //ここに記載 |
1 2 3 4 5 6 7 | <!--JS--> <script src="//kit.fontawesome.com/d1ee74ea5c.js" crossorigin="anonymous"></script> <script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/velocity/1.0.0/velocity.min.js"></script> <script src="<?php echo get_template_directory_uri(); ?>/js/slick.min.js" type="text/javascript"></script> //ここに記載 <script src="<?php echo get_template_directory_uri(); ?>/js/common.js" type="text/javascript"></script> <?php wp_head(); ?> |
これでいいはず！
と思ったのに、縦並びにしか動かず…
最初はCDNで読み込んでいたslickでしたがうまくいかないのでダウンロードしてアップしなおしてみたりも
したのですが同じ挙動…。
JSをfooterへ移動させても変化なく…。
調べても全然解決せず…
結局、CDNに戻して書き順を書き換えたら、うまくいきました！
書き順、結構大事です。
1 2 3 4 5 6 7 8 | <!--css--> <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css"/> //ここに記載 <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css"/> //ここに記載 <link type="text/css" rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/font.css"> <link type="text/css" rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/reset.css"> <link type="text/css" rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/layout.css"> |
1 2 3 4 5 6 7 | <!--JS--> <script src="//kit.fontawesome.com/d1ee74ea5c.js" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script> //ここに記載 <script src="//cdnjs.cloudflare.com/ajax/libs/velocity/1.0.0/velocity.min.js"></script> <script src="<?php echo get_template_directory_uri(); ?>/js/common.js" type="text/javascript"></script> <?php wp_head(); ?> |
同じような穴にハマってしまった人はぜひご活用ください！
なんだったのだ！