https://github.com/mrvcoder/swiperjs-dynamic-responsive
with this piece of code you can set sliders of swiper.js margin dynamically base on width of slider container
https://github.com/mrvcoder/swiperjs-dynamic-responsive
Last synced: 11 months ago
JSON representation
with this piece of code you can set sliders of swiper.js margin dynamically base on width of slider container
- Host: GitHub
- URL: https://github.com/mrvcoder/swiperjs-dynamic-responsive
- Owner: mrvcoder
- Created: 2022-08-01T10:17:22.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-02-09T09:30:22.000Z (about 3 years ago)
- Last Synced: 2025-02-17T13:12:02.857Z (about 1 year ago)
- Language: JavaScript
- Size: 1.89 MB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# swiperjs-dynamic-responsive
with using this function in your code you can make the sliders that created with [swiper.j](https://swiperjs.com/) from this 👇.
https://user-images.githubusercontent.com/49777789/182134303-d517c613-0747-46ac-bede-d0fb615697d0.mp4
to this :) 👇
https://user-images.githubusercontent.com/49777789/182134278-2732dfdb-e7d6-44d1-9422-3a68e19a9193.mp4
## how to use function
lets say that you have this code to create slider
**html code :**
```
```
**JavaScript :**
```
export function MySlider(){
let swiper = new Swiper(".mySwiper", {
slidesPerView:'auto',
spaceBetween: 50,
});
}
```
to use this code you should first add our function in your project then you should change the previues code to this :
```
export function MySlider(){
let [space , max] = MakeResponsiveSliders(document.querySelector('.mySwiper'),
{
margin:20
}
)
let swiper = new Swiper(".mySwiper", {
slidesPerView:'auto',
spaceBetween: space,
centeredSlides: false
});
swiper.snapGrid[swiper.snapGrid.length-1]=swiper.snapGrid[swiper.snapGrid.length-1]+space
}
```
in this code **MakeResponsiveSliders** is our function and you should pass some parameters
- #1 first parameter is your slider container html obj
- #2 second parameter is an object for seting some minimal settings..
for now the minimal setting object only gets **margin** in **px** .