以前紹介した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> |
基本これだけ！