以前、ワードプレスを使用してslickスライダーを実装したときに
なぜか「縦ならびのままスライドする」というトンチンカンなことが起こったので
そのときの対処法を備忘録で残しておきたいと思います。
もともと記載していた記述が下記です。
head内に記載していました。slickスライダーが動かないとかでもなく、
動くけど画像がすべて縦並び…という感じです。
slickに必要な記載は、CSSでは一番下部に
JSではslickのJSを記述する「common.js」の直上に記載しました。
<!--css-->
<link rel="stylesheet" href="https://use.typekit.net/kkb5vtk.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"/> //ここに記載
<!--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に戻して書き順を書き換えたら、うまくいきました！
書き順、結構大事です。
<!--css-->
<link rel="stylesheet" href="https://use.typekit.net/kkb5vtk.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">
<!--JS-->
<script src="//kit.fontawesome.com/d1ee74ea5c.js" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></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(); ?>
同じような穴にハマってしまった人はぜひご活用ください！
なんだったのだ！