SwiperJS

Image slide

With text overlay (next slide - without overlay)

Text slide

With some description

Add Swiper gallery to your pages

v1.1.0 on GitHub

This whole pages uses the default swiper-js.html.twig template provided by the plugin (swiper at the top):

  • Image slide with text overlay
  • Same image without overlay
  • Text slide with some description
  • Local video file
  • Youtube video

Default config is:

enabled: true
built_in_swiper_assets: true
built_in_css: true
built_in_js: true

# See docs for parameters at https://swiperjs.com/swiper-api#parameters
swiper:

  autoplay: false
  loop: false
  zoom: false

  navigation:
    nextEl: ''
    prevEl: ''

  pagination:
    el: ''

  scrollbar:
    el: ''

  direction: 'horizontal'
  effect: 'slide'
  spaceBetween: 0
  freeMode: false
  freeModeSticky: false
  grabCursor: false
  autoHeight: false
  centeredSlides: false
  initialSlide: 0
  preloadImages: true

  speed: 300
  shortSwipes: true

  keyboard:
    enabled: false

  mousewheel: false
  history: false

  watchOverflow: false
  watchSlidesProgress: false
  watchSlidesVisibility: false

  a11y:
    firstSlideMessage: PLUGIN_SWIPER_JS.A11Y.FIRST_SLIDE
    lastSlideMessage: PLUGIN_SWIPER_JS.A11Y.LAST_SLIDE
    nextSlideMessage: PLUGIN_SWIPER_JS.A11Y.NEXT_SLIDE
    paginationBulletMessage: PLUGIN_SWIPER_JS.A11Y.PAGINATION_BULLET
    prevSlideMessage: PLUGIN_SWIPER_JS.A11Y.PREV_SLIDE