is an innovative add-on for Concrete CMS that allows for the easy integration of a block using SwiperJS - a powerful, modern library for creating swipeable carousels.
Installation Instructions
Unzip this file in your site's packages/ directory.
Login to your site as an administrator.
Find the "Extend concrete5" page in your dashboard.
Find this package in the list of packages awaiting installation.
To ensure that Zen Swiper displays correctly when using the 'vertical' direction setting, you need to set a fixed height instead of using a percentage-based height.
You can also set a fixed height for the surrounding div element that contains Zen Swiper, either in pixels (e.g., 'px') or as a percentage of the viewport height (e.g., '100vh').
Sample settings:
Change "slider size" to 'custom.' Set 'height' to 'fixed.' Change 'Height value' to appropriate value.
When using the 'fade' transition effect, please note that you can have only one slide per view and one slide per group. The settings 'centered slides,' 'Space between slides,' and 'Slide to clicked slide' are not available for this transition.
Sample settings:
- space between
- effect: "fade"
- check "Navigation"
- check "Pagination"
- clickable (true)
When using the 'cube' transition effect, please note that you can have only one slide per view and one slide per group. The settings 'centered slides,' 'Space between slides,' and 'Slide to clicked slide' are not available for this transition.
In the case of the cube effect, images are attached to the sides of the cube starting from the top-left corner. To ensure that the cube's sides are fully covered by the images, the images should be equal to or larger than the cube's sides. It's also a good practice to make sure that the images are of the same size for consistency.
You can achieve this effect using custom CSS as follows:
Simply add this CSS code to your project to make the cube effect work seamlessly with properly sized and centered images on each side of the cube.
Sample settings:
- effect ("Cube")
- grab cursor (true)
- cube effect
a) shadow (true)
b) slide shadows (true)
c) shadow offset (20)
d) shadow scale
- pagination
Effect flip:
When using the 'flip' transition effect, please note that you can have only one slide per view and one slide per group. The settings 'centered slides,' 'Space between slides,' and 'Slide to clicked slide' are not available for this transition.