Zen Swiper

 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.
  • Click the "install" button.
Mobile-Optimized, Fast & Fluid

Experience the ultimate responsive design with our SwiperJS slider, perfect for any device.

Customizable & Powerful

Unleash the full potential of your content with our highly adaptable SwiperJS slider.

Engage Your Audience Like Never Before

Capture attention instantly with stunning animations and SwiperJS precision.

Smooth Transitions, Seamless Experience

Elevate your website with our SwiperJS-powered slider for effortless navigation.

Default:

Mobile-Optimized, Fast & Fluid

Experience the ultimate responsive design with our SwiperJS slider, perfect for any device.

Customizable & Powerful

Unleash the full potential of your content with our highly adaptable SwiperJS slider.

Engage Your Audience Like Never Before

Capture attention instantly with stunning animations and SwiperJS precision.

Smooth Transitions, Seamless Experience

Elevate your website with our SwiperJS-powered slider for effortless navigation.

Pagination progress:

  • check "Navigation"
  •  check "Pagination"
    • select "Progressbar" in "Pagination Type"

Pagination fraction:

  • check "Navigation"
  • check "Pagination"
    • select "Fraction" in "Pagination Type"

Vertical:

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.

 

Zrzut ekranu z 2023-09-23 10-31-49.pngYou 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.

  • direction: "Vertical"
  • check "Pagination"
  • a) check "Clickable"

Space Between:
 

  • - add value to"Space Between" (.px)
  • - check "Pagination"
  • a) "Clickable"

Slides per view:

- 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"

Centered auto:
 

- 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"

Effect fade:

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)

Effect cube:

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:

- 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"
 

Autoplay:

- 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"

1