WordPress

【WordPress】画像スライダーとカルーセルを複数表示することができるWP Slick Slider and Image Carousel

November 16, 2018
WP Slick Slider and Image Carousel

WP Slick Slider and Image Carousel
WP Slick Slider and Image Carouselはショートコードを使用して、画像スライダーとカルーセルを複数表示することができるプラグイン。レスポンシブ、スワイプ対応、無限ループ、矢印キー、自動再生などの機能があります。

WP Slick Slider and Image Carouselプラグインを導入

ダッシュボード >> プラグイン >> 新規追加 >> WP Slick Slider and Image Carouselを検索
有効化にするとSlick Sliderが追加されます。

Add New slide

WP Slick Slider and Image Carousel
画像のタイトル、説明、アイキャッチ画像にスライダーの画像を設定。必要でしたらリンクも設定してください。

ショートコード

下記のショートコードをコピペします。
[slick-slider] – Slickスライダー
[slick-carousel-slider] – Slickカルーセル

PHP

テンプレートコード

<?php echo do_shortcode('[slick-slider]'); ?>  and
 <?php echo do_shortcode('[slick-carousel-slider]'); ?> 

パラメーター

[slick-slider]で使用できるパラメーター

  1. limit [slick-slider limit=”-1″]
  2. category [slick-slider category=”category_ID”]
  3. show_content [slick-slider show_content=”true”]
  4. Pagination and arrows [slick-slider dots=”false” arrows=”false”]
  5. Autoplay and Autoplay Interval [slick-slider autoplay=”true” autoplay_interval=”100″]
  6. Slide Speed [slick-slider speed=”3000″]
  7. fade [slick-slider fade=”true” ]
  8. sliderheight [slick-slider sliderheight=”400″]
  9. rtl [slick-slider rtl=”true”]

[slick-carousel-slider]で使用できるパラメーター

  1. limit [slick-carousel-slider limit=”-1″]
  2. design [slick-carousel-slider design=”design-1″]
  3. category [slick-carousel-slider category=”category_ID”]
  4. image_size [slick-carousel-slider image_size=”large”]
  5. slidestoshow [slick-carousel-slider slidestoshow=”3″]
  6. slidestoscroll [slick-carousel-slider slidestoscroll=”1″ ]
  7. Pagination and arrows [slick-carousel-slider dots=”false” arrows=”false”]
  8. Autoplay and Autoplay Interval [slick-carousel-slider autoplay=”true” autoplay_interval=”100″]
  9. Slide Speed [slick-carousel-slider speed=”3000″]
  10. centermode [slick-carousel-slider centermode=”true”]
  11. variablewidth [slick-carousel-slider variablewidth=”true”]
  12. sliderheight [slick-carousel-slider sliderheight=”400″]
  13. rtl [slick-carousel-slider rtl=”true”]

WP Slick Slider and Image Carousel
Slickスライダー
WP Slick Slider and Image Carousel
Slickカルーセル
WP Slick Slider and Image Carousel
画像:Foodiesfeed