以前紹介したslickですがjquery依存だったので別のないかなということで、探してみました。
swiperはコンテンツスライダーで、画像でも文章でも差し込むことができるスライダーです。slickでも親要素にposition: relative;をすればできないこともないんですけどね。
まず上のダウンロードリンクを押してdistの中にある「swiper.min.css」と「swiper.min.js」を使用します。
スポンサードリンク
function.php
そしてfunction.phpに以下のように書きます。
まずJS側の設定
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
if (!is_admin()) { function register_script(){ wp_enqueue_script( 'swiper', get_template_directory_uri() . '/assets/js/swiper/js/swiper.min.js' ); wp_enqueue_script( 'swiper_main', get_template_directory_uri() . '/assets/js/swiper/js/main.js' ); } function plus_script() { register_script(); if (is_home() || is_front_page()) { wp_enqueue_script('swiper');// トップページのみに適応させる wp_enqueue_script('swiper_main');// トップページのみに適応させる } } add_action('wp_print_scripts', 'plus_script'); } |
そしてCSS側の設定
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
/* CSSの読み込み ---------------------------------------------------------- */ function register_stylesheet() { wp_enqueue_style( 'swiper_css', get_template_directory_uri() . '/assets/js/swiper/css/swiper.min.css' ); } function add_stylesheet() { //登録したCSSを以下の順番で読み込む register_stylesheet(); wp_enqueue_style('style', '', array(), '1.0', false); if (is_home() || is_front_page()) { wp_enqueue_style('swiper_css');// トップページのみに適応させる } } add_action('wp_enqueue_scripts', 'add_stylesheet'); |
HTML側
phpなんですけどね
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!-- Slider main container --> <div class="swiper-container"> <!-- Additional required wrapper --> <div class="swiper-wrapper"> <!-- Slides --> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> ... </div> <!-- If we need pagination --> <div class="swiper-pagination"></div> <!-- If we need navigation buttons --> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> <!-- If we need scrollbar --> <div class="swiper-scrollbar"></div> </div> |
基本これだけ！