Swiper

---

Hello Stackers, Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. It is intended to be used in mobile websites, mobile web apps, and mobile native/hybrid apps. Swiper is not compatible with all platforms, it is a modern touch slider which is focused only on modern apps/platforms to bring the best experience and simplicity. Swiper, along with other great components, is a part of Framework7 – a fully-featured framework for building iOS & Android apps. Swiper is also a default slider component in the Ionic Framework.

The Most Modern Mobile Touch Slider

Swiper

Quick Start Svelte

 npm i swiper

<Swiper
    spaceBetween={50}
    slidesPerView={3}
    on:slideChange={() => console.log('slide change')}
    on:swiper={(e) => console.log(e.detail[0])}
  >
    <SwiperSlide>Slide 1</SwiperSlide>
    <SwiperSlide>Slide 2</SwiperSlide>
    <SwiperSlide>Slide 3</SwiperSlide>
    <SwiperSlide>Slide 4</SwiperSlide>
    ...
  </Swiper>
  <script>
  // Import Swiper Svelte components
  import { Swiper, SwiperSlide } from 'swiper/svelte';

  // Import Swiper styles
  import 'swiper/css';
  </script>

Here is the list of additional modules imports:

• Virtual – Virtual Slides module
• Keyboard – Keyboard Control module
• Mousewheel – Mousewheel Control module
• Navigation – Navigation module
• Pagination – Pagination module
• Scrollbar – Scrollbar module
• Parallax – Parallax module
• FreeMode – Free Mode module
• Grid – Grid module
• Manipulation – Slides manipulation module (only for Core version)
• Zoom – Zoom module
• Lazy – Lazy module
• Controller – Controller module
• A11y – Accessibility module
• History – History Navigation module
• HashNavigation – Hash Navigation module
• Autoplay – Autoplay module
• EffectFade – Fade Effect module
• EffectCube – Cube Effect module
• EffectFlip – Flip Effect module
• EffectCoverflow – Coverflow Effect module
• EffectCards – Cards Effect module
• EffectCreative – Creative Effect module
• Thumbs – Thumbs module

Demo Live : Shaders Slider (uiinitiative.com)

For the full documentation please refer on here. cyaaa…