Dynamic Posts - Render - Swiper (Carousel)

"Swiper (Carousel)" is one of render type of Dynamic Posts that show a carousel of posts.

Settings

You can choose:

  • the speed of transition;
  • the effect of transition between slides (slide | fade | cube | coverflow | flip)
  • the active slide will be centered;
  • how many slides per view with space between its, number of slides for a column, slides per group;
  • freemode, so the slide will not have fixed positions;
  • navigation options:
    • arrows color;
    • use animation in rollover and hover colour;
    • stroke arrow and line;
    • dashed;
    • scale;
    • the horizontal and vertical position;
  • pagination options:
    • the type of pagination (bullets | fraction | progress);
    • the style of bullets or fraction or progress bar;
  • scrollbar options so you can use a scrollbar that displays navigation;
  • if you want to use autoplay;
  • if you want to enable keyboard or mouse control;
  • to enable continuous mode loop;

Special Options

In special options, you can choose:

  • set wrapper size enabled this option and plugin will set width/height on swiper wrapper equal to the total size of all slides. Mostly should be used as compatibility fallback option for the browser that doesn't support flexbox layout well;
  • virtual translate enabled this option and swiper will be operated as usual except it will not move, real translate values on the wrapper will not be set. Useful when you may need to create a custom slide transition;
  • auto height, the slider wrapper will adapt its height to the height of the currently active slide;
  • round lengths, to round values of slides width and height to prevent blurry texts on usual resolution screens (if you have such);
  • nested, set to true on nesting Swiper for correct touch events interception. Use only on nested swipers that use the same direction as the parent one;
  • grab cursor, this option may a little improve desktop usability. If true, the user will see the "grab" cursor when hovering on swiper.

Example (Slider Background with arrows and bullets)

Example (Alternated Slider with arrows and bullets)

Still need help? Contact Us Contact Us