Default:

Slide 1

Lorem ipsum dolor sit amet.

Slide 2

Slide 3

Slide 4

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.

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.

• 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

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)

Css mode - Comming soon

- check cssMode
- check "Pagination"
- check "Navigation"

Freemode
- slides per view (3)
- space between (30)
- check freeMode (true)
- check "Pagination"
- check "Clickable"

Grid - Comming soon
- slides per view (3)
- grid rows (2)
- space between (30)
- check "Pagination"
- clickable (true)

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"

Slides per group skip - Comming soon
- slides per view (1)
- centered slides (false)
- slides per group skip (1)
- grab cursor (true)
- keyboard (true)
- breakpoints
- scrollbar

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"

Hash Navigation - Comming soon
- spaceBetween (30)
- hashNavigation
a) watchState (true)

- check "Pagination"

- check "Navigation"

History - Comming soon
- space between (50)
- slides per view (1)
- check "Navigation"
- check "Pagination"
- history
a) key: "slide"

Rtl - Comming soon

- check "Navigation"
- check "Pagination"
- clickable (true)
- check "RTL" (true)

Parallax - Comming soon

- speed (600)

-  parallax: true,
- check "Pagination"

- clickable (true)
- check "Navigation"

Lazy load images - Comming soon
- check lazy (true)
- 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"

Zoom - Comming soon
- check zoom
- check "Navigation"
- check "Pagination"
- check "Clickable"

Rewind
- rewind (true)

- check "Navigation"

1