{"id":18563513,"url":"https://github.com/mrvcoder/swiperjs-dynamic-responsive","last_synced_at":"2025-05-15T18:13:32.741Z","repository":{"id":94884316,"uuid":"520060928","full_name":"mrvcoder/swiperjs-dynamic-responsive","owner":"mrvcoder","description":"with this piece of code you can set sliders of swiper.js margin dynamically base on width of slider container","archived":false,"fork":false,"pushed_at":"2023-02-09T09:30:22.000Z","size":1980,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-17T13:12:02.857Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mrvcoder.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-08-01T10:17:22.000Z","updated_at":"2022-12-31T07:30:31.000Z","dependencies_parsed_at":"2023-07-29T17:30:58.927Z","dependency_job_id":null,"html_url":"https://github.com/mrvcoder/swiperjs-dynamic-responsive","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mrvcoder%2Fswiperjs-dynamic-responsive","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mrvcoder%2Fswiperjs-dynamic-responsive/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mrvcoder%2Fswiperjs-dynamic-responsive/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mrvcoder%2Fswiperjs-dynamic-responsive/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mrvcoder","download_url":"https://codeload.github.com/mrvcoder/swiperjs-dynamic-responsive/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254394726,"owners_count":22063984,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-06T22:12:49.837Z","updated_at":"2025-05-15T18:13:32.718Z","avatar_url":"https://github.com/mrvcoder.png","language":"JavaScript","readme":"# swiperjs-dynamic-responsive\n\nwith using this function in your code you can make the sliders that created with [swiper.j](https://swiperjs.com/) from this 👇.\n\n\nhttps://user-images.githubusercontent.com/49777789/182134303-d517c613-0747-46ac-bede-d0fb615697d0.mp4\n\n\nto this :) 👇\n\n\nhttps://user-images.githubusercontent.com/49777789/182134278-2732dfdb-e7d6-44d1-9422-3a68e19a9193.mp4\n\n\n\n## how to use function\n\nlets say that you have this code to create slider \n\n**html code :**\n```\n\u003cdiv class=\"swiper mySwiper\"\u003e\n      \u003cdiv class=\"swiper-wrapper\"\u003e\n        \u003cdiv class=\"swiper-slide\"\u003eSlide 1\u003c/div\u003e\n        \u003cdiv class=\"swiper-slide\"\u003eSlide 2\u003c/div\u003e\n        \u003cdiv class=\"swiper-slide\"\u003eSlide 3\u003c/div\u003e\n        \u003cdiv class=\"swiper-slide\"\u003eSlide 4\u003c/div\u003e\n        \u003cdiv class=\"swiper-slide\"\u003eSlide 5\u003c/div\u003e\n        \u003cdiv class=\"swiper-slide\"\u003eSlide 6\u003c/div\u003e\n        \u003cdiv class=\"swiper-slide\"\u003eSlide 7\u003c/div\u003e\n        \u003cdiv class=\"swiper-slide\"\u003eSlide 8\u003c/div\u003e\n        \u003cdiv class=\"swiper-slide\"\u003eSlide 9\u003c/div\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n```\n\n**JavaScript :**\n```\nexport function MySlider(){\n\n  let swiper = new Swiper(\".mySwiper\", {\n      slidesPerView:'auto',\n      spaceBetween: 50,\n    });\n\n}\n```\n\nto use this code you should first add our function in your project then you should change the previues code to this :\n\n```\nexport function MySlider(){\n\n  let [space , max] = MakeResponsiveSliders(document.querySelector('.mySwiper'),\n  {\n    margin:20\n  }\n  )\n\n  let swiper = new Swiper(\".mySwiper\", {\n    slidesPerView:'auto',\n    spaceBetween: space,\n    centeredSlides: false\n    });\n\n  swiper.snapGrid[swiper.snapGrid.length-1]=swiper.snapGrid[swiper.snapGrid.length-1]+space\n\n}\n```\nin this code **MakeResponsiveSliders** is our function and you should pass some parameters\n- #1 first parameter is your slider container html obj\n- #2 second parameter is an object for seting some minimal settings..\n\nfor now the minimal setting object only gets **margin** in **px** .\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmrvcoder%2Fswiperjs-dynamic-responsive","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmrvcoder%2Fswiperjs-dynamic-responsive","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmrvcoder%2Fswiperjs-dynamic-responsive/lists"}