Eazy Image Slider Block

説明

The Eazy Image Slider Block plugin adds a simple to use and easy to configure image slider block to the Gutenberg editor based on Tiny Slider 2.

You can configure following options:

  • Slides to show
  • Slides to slide by
  • Show arrows
  • Show dots
  • Automatic slide width
  • Center the slides
  • Restrict the height of the images
  • Gutter between the slides
  • Edge padding

Credits

Tiny Slider 2
Tiny Slider React

スクリーンショット

  • The slider in the Twenty Twenty-Three Theme
  • Slider without arrows
  • Slider without dots
  • Settings in the admin editor
  • And the result on the page
  • Unrestricted height of the slides

ブロック

このプラグインは1個のブロックを提供します。

  • Image Slider Eazy slider for images

インストール

  1. Install Plugin through the WordPress Admin Interface ‘Plugins > Add new’
  2. Activate the plugin
  3. Done!

OR

  1. Upload eazy-image-slider-block to the /wp-content/plugins/ directory
  2. Activate the plugin through the ‘Plugins’ menu in WordPress
  3. Done!

FAQ

Can I change the dots color?

Yes, currently only via CSS. The selectors for the buttons are:

.eazy-image-slider .tns-nav button

and for the active state:

.eazy-image-slider .tns-nav button.tns-nav-active

Example you can put in your themes style.css:

.eazy-image-slider .tns-nav button {
    background-color: #fcc;
}
.eazy-image-slider .tns-nav button.tns-nav-active {
    background-color: #e22;
}

Can I change the arrows color?

Yes, same applies as for the dots, currently only via CSS.

.eazy-image-slider .tns-controls button:before

and for the hover state:

.eazy-image-slider .tns-controls button:hover:before

Example you can put in your themes style.css:

.eazy-image-slider .tns-controls button:before {
    background-color: #fcc;
}
.eazy-image-slider .tns-controls button:hover:before {
    background-color: #e22;
}

Can I disable the style / script loading entirely?

Yes, to do so, simply add following lines to your themes functions.php:

For the styles:

function eazyimageslider_remove_style() {
    wp_dequeue_style( 'eazy-image-slider-style' );
}
add_action( 'wp_enqueue_scripts', 'eazyimageslider_remove_style', 99 );

For the script:

function eazyimageslider_remove_script() {
    wp_dequeue_script( 'eazy-image-slider-view-script' );
}
add_action( 'wp_enqueue_scripts', 'eazyimageslider_remove_script', 99 );

What does vh mean in the restrict slides height setting?

VH is a unit relative to the viewport. Which means if you set your slides height to be restricted to 50vh, the slides will have the height of 50% of the viewport.

評価

このプラグインにはレビューがありません。

貢献者と開発者

Eazy Image Slider Block はオープンソースソフトウェアです。以下の人々がこのプラグインに貢献しています。

貢献者

“Eazy Image Slider Block” をあなたの言語に翻訳しましょう。

開発に興味がありますか ?

コードを閲覧するか、SVN リポジトリをチェックするか、開発ログRSS で購読してみてください。

変更履歴

1.0.0

  • Initial Eazy Image Slider Block release. 🚀