Eazy Image Slider Block adds an easy to use and configurable 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
Screenshots
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
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.
ChangeLog
1.0.0
- Initial Eazy Image Slider Block release. 🚀