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.
Adding slides is based on the "Image Slider" block.
If you don't know how to add slides, here are the instructions.
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.
- set the number of slides ("Slides per view")
- add value to "Space between" (px)
- check "Pagination"
a) check "Clickable
Slides per view auto:
- slidesPerView: "auto"
- spaceBetween: 30
- check "Pagination"
- check "Clickable"
Centered:
"Centered Slides" works when there is more than one slide in the view.
- set the number od slides ("Slides per view")
- add value to "Space Between" (px)
- check "Centered Slides"
- check "Pagination"
- check "Clickable"
- slides per view ("auto")
- centered slides (true)
- space between (30)
- check "Pagination"
- clickable (true)
Freemode
- slides per view (3)
- space between (30)
- check freeMode (true)
- check "Pagination"
- check "Clickable"
Grab cursor:
- slides per view (3)
- centered slides (true)
- space between (30)
- grab cursor (true)
- check "Pagination"
- clickable (true)
Infinite loop:
- slides per view (1)
- space between (30)
- Loop Mode: loop
- check "Pagination"
- clickable (true)
- check "Navigation"
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:
.swiper-slide {
background-position: center;
background-size: cover;
}
.swiper-slide img {
display: block;
width: 100%;
}
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 coverflow:
- effect: "coverflow"
- grab cursor (true),
- centered slides (true),
- slides per view (auto)
- cover flow effect
a) rotate (50)
b) stretch (0)
c) depth (100)
d) modifier (1)
e) slide shadows (true)
- check 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.
Sample settings:
- effect: "flip",
- grab cursor: true,
- check "Pagination",
- check "Navigation
- effect: "cards",
- grabCursor: true,
Keyboard control:
- slides per view (1)
- space between (30)
- check 'Keyboard'
- check "Pagination"
a) clickable (true)
- check "Navigation"
Mousewheel control:
- direction "vertical"
- set slider side: custom and Height: fixed. Set value in px.
- slides per view (1)
- space between (30)
- check "Mousewheel"
- check "Pagination"
a) check "Clickable"
- space between (30)
- centered slides (true)
- autoplay (true)
- delay (2500)
- disable on Interaction
- check "Pagination"
- check "Clickable"
- check "Navigation"
Responsive breakpoints:
- check "Breakpoints enabled"
- add values for the number of slides and spacing to the table
Autoheight
- check "AutoHeight"
- spaceBetween
- check "Navigation"
- check "Pagination"
- check "Clickable"
Rewind
- rewind (true)
- check "Navigation"
alt Attribute for Images in Zen Swiper SlidesTo ensure proper accessibility and SEO optimization for images in your Zen Swiper block, you can set the alt attribute for each image displayed in the slider. The alt attribute provides alternative text for the image if it fails to load, and it is also used by screen readers for visually impaired users.
Here’s how to add the alt attribute for images in Zen Swiper:
alt Attribute:Log in to Concrete CMS:
Navigate to the File Manager:
Select the Image:
alt text for.Edit the Image:
Set the Description:
alt attribute in the Zen Swiper slider.Save Changes:
alt text for the image when it is displayed in the Zen Swiper slider.alt Text?alt text helps visually impaired users understand the content of the image through screen readers.alt attribute to index images, which can improve your website's search engine ranking.