` - put actual slide's content here ```html

Slide 1

``` We can also: - scale elements during transition between slides by adding `data-swiper-material-scale` attribute to such elements (like IMG element in the example above) - animate elements opacity during transition between slides by adding `swiper-material-animate-opacity` class to such elements ### In Browser Environment You need to include Material Effect scripts and styles in addition to Swiper scripts and styles from the (`./dist/` folder), e.g. ```html

``` ### In ESM Environment In environment with ES modules support (webpack, Vite, rollup, etc.), you can just import `effect-material.esm.js` and `effect-material.css` (or `effect-material.scss`) from the `./dist/` folder, e.g.: ```js // import Material effect module import EffectMaterial from './effect-material.esm.js'; // import Material effect styles import './effect-material.scss'; ``` ### Initialization After you included (or imported) required Material Effect scripts and styles and have the required layout, you need to pass Material Effect module to Swiper constructor and set effect to `'material'`: In browser environment: ```html

``` In ESM environment: ```js import Swiper, { Autoplay, Navigation, Pagination } from 'swiper'; import EffectMaterial from './effect-material.esm.js'; import './effect-material.scss'; import './main.scss'; // Init Material Effect const swiper = new Swiper({ // pass EffectMaterial module to modules modules: [Autoplay, Navigation, Pagination, EffectMaterial], // specify "material" effect effect: 'material', // material effect parameters materialEffect: { slideSplitRatio: 0.65, }, // other parameters }); ``` ## Split Ratio When `centeredSlides` parameter is disable, then last slide's split ratio can be configure with the `materialEffect.slideSplitRatio` parameter: #### `materialEffect.slideSplitRatio: 0.65` ![](https://s.uiinitiative.com/items/material-you-slider/docs/0.65.png) #### `materialEffect.slideSplitRatio: 0.5` ![](https://s.uiinitiative.com/items/material-you-slider/docs/0.5.png) #### `materialEffect.slideSplitRatio: 0.25` ![](https://s.uiinitiative.com/items/material-you-slider/docs/0.25.png) When `centeredSlides` parameter is enabled, then split ratio can be configure with the `slidesPerView` parameter when its value is between `1` and `2`: #### `centeredSlides: true` `slidesPerView: 2` ![](https://s.uiinitiative.com/items/material-you-slider/docs/2.png) #### `centeredSlides: true` `slidesPerView: 1.6` ![](https://s.uiinitiative.com/items/material-you-slider/docs/1.6.png) #### `centeredSlides: true` `slidesPerView: 1.3` ![](https://s.uiinitiative.com/items/material-you-slider/docs/1.3.png) ## Usage with React Usage with Swiper React components is pretty similar, there only difference is we need to pass all mentioned above `Swiper` parameters as `` component properties: ```jsx import React from 'react'; import Swiper, { Autoplay, Navigation, Pagination } from 'swiper'; import EffectMaterial from './effect-material.esm.js'; import './effect-material.scss'; import './main.scss'; export default function App() { return (

... ... ... ... ...

); } ``` ## Development Preview First of all, we need to install all dependencies, run in terminal: ``` npm i ``` To launch development server (with hot reload), run the following command in terminal: ``` npm run dev ``` And the project will be available at [http://localhost:3000](http://localhost:3000) ## Production Build To create a production build, run the following command in terminal: ``` npm run build-dist ``` And production-ready project will be available in `/dist/` folder. ## Connect to Git It is possible to connect this project folder to the new repository. For example for GitHub: 1. Create new GitHub repository at https://github.com/new 2. Initialize Git. In terminal run: ``` git init ``` 3. Add remote origin. Replace $USERNAME and $REPOSITORY with your GitHub username and newly created repository name: ``` git remote add origin https://github.com/$USERNAME/$REPOSITORY.git ``` That is all, after that you can track, commit and push/pull to repo, for example: ``` git add . git commit -m "initial commit" git push origin master ```