{"id":14384,"date":"2022-03-23T11:44:27","date_gmt":"2022-03-23T10:44:27","guid":{"rendered":"https:\/\/hesmid.nl\/test\/?p=14384"},"modified":"2022-03-23T11:45:30","modified_gmt":"2022-03-23T10:45:30","slug":"swiper-the-most-modern-mobile-touch-slider","status":"publish","type":"post","link":"https:\/\/hesmid.nl\/test\/swiper-the-most-modern-mobile-touch-slider\/","title":{"rendered":"Swiper – The Most Modern Mobile Touch Slider"},"content":{"rendered":"\n

https:\/\/swiperjs.com\/<\/a><\/p>\n\n\n\n

https:\/\/swiperjs.com\/demos<\/a><\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

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.<\/p>\n\n\n\n

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<\/strong>.<\/p>\n\n\n\n

Swiper, along with other great components, is a part of Framework7<\/a> – a fully-featured framework for building iOS & Android apps. Swiper is also a default slider component in the Ionic Framework<\/a>.<\/p>\n\n\n\n\n\n\n\n

Get started<\/h2>\n\n\n\n

Installation<\/strong><\/p>\n\n\n\n

There are few options on how to include\/import Swiper into your project:<\/p>\n\n\n\n

<\/a>Install from NPM<\/strong><\/p>\n\n\n\n

We can install Swiper from NPM<\/p>\n\n\n\n

  $ npm install swiper\n<\/code><\/pre>\n\n\n\n
  \/\/ import Swiper JS\n  import Swiper from 'swiper';\n  \/\/ import Swiper styles\n  import 'swiper\/css';\n\n  const swiper = new Swiper(...);\n<\/code><\/pre>\n\n\n\n
By default Swiper exports only core version without additional modules (like Navigation, Pagination, etc.). So you need to import and configure them too:<\/p>\n\n\n\n
  \/\/ core version + navigation, pagination modules:\n  import Swiper, { Navigation, Pagination } from 'swiper';\n  \/\/ import Swiper and modules styles\n  import 'swiper\/css';\n  import 'swiper\/css\/navigation';\n  import 'swiper\/css\/pagination';\n\n  \/\/ init Swiper:\n  const swiper = new Swiper('.swiper', {\n    \/\/ configure Swiper to use modules\n    modules: [Navigation, Pagination],\n    ...\n  });\n<\/code><\/pre>\n\n\n\n
If you want to import Swiper with all modules (bundle) then it should be imported from swiper\/bundle<\/code>:<\/p>\n\n\n\n
  \/\/ import Swiper bundle with all modules installed\n  import Swiper from 'swiper\/bundle';\n\n  \/\/ import styles bundle\n  import 'swiper\/css\/bundle';\n\n  \/\/ init Swiper:\n  const swiper = new Swiper(...);\n<\/code><\/pre>\n\n\n\n
See further on https:\/\/swiperjs.com\/get-started<\/a><\/p>\n\n\n\n
Swiper for Vue<\/h2>\n\n\n\n
Swiper Vue.js plugin is available only via NPM as a part of the main Swiper library:<\/p>\n\n\n\n
  npm i swiper\n<\/code><\/pre>\n\n\n\n
Usage<\/h3>\n\n\n\n
swiper\/vue<\/code> exports 2 components: Swiper<\/code> and SwiperSlide<\/code>:<\/p>\n\n\n\n
<template>\n  <swiper\n    :slides-per-view=\"3\"\n    :space-between=\"50\"\n    @swiper=\"onSwiper\"\n    @slideChange=\"onSlideChange\"\n  >\n    <swiper-slide>Slide 1<\/swiper-slide>\n    <swiper-slide>Slide 2<\/swiper-slide>\n    <swiper-slide>Slide 3<\/swiper-slide>\n    ...\n  <\/swiper>\n<\/template>\n<script>\n  \/\/ Import Swiper Vue.js components\n  import { Swiper, SwiperSlide } from 'swiper\/vue';\n\n  \/\/ Import Swiper styles\n  import 'swiper\/css';\n\n  export default {\n    components: {\n      Swiper,\n      SwiperSlide,\n    },\n    setup() {\n      const onSwiper = (swiper) => {\n        console.log(swiper);\n      };\n      const onSlideChange = () => {\n        console.log('slide change');\n      };\n      return {\n        onSwiper,\n        onSlideChange,\n      };\n    },\n  };\n<\/script>\n<\/code><\/pre>\n\n\n\n
By default Swiper Vue.js uses core version of Swiper (without any additional modules). If you want to use Navigation, Pagination and other modules<\/a>, you have to install them first.<\/p>\n\n\n\n
See further on https:\/\/swiperjs.com\/vue<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
https:\/\/swiperjs.com\/ https:\/\/swiperjs.com\/demos 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 […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[7],"tags":[37,101,661,94,748,747,555],"acf":[],"_links":{"self":[{"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/posts\/14384"}],"collection":[{"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/comments?post=14384"}],"version-history":[{"count":2,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/posts\/14384\/revisions"}],"predecessor-version":[{"id":14387,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/posts\/14384\/revisions\/14387"}],"wp:attachment":[{"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/media?parent=14384"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/categories?post=14384"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/tags?post=14384"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}