{"action":"created","issue":{"url":"https://api.github.com/repos/nolimits4web/Swiper/issues/1615","repository_url":"https://api.github.com/repos/nolimits4web/Swiper","labels_url":"https://api.github.com/repos/nolimits4web/Swiper/issues/1615/labels{/name}","comments_url":"https://api.github.com/repos/nolimits4web/Swiper/issues/1615/comments","events_url":"https://api.github.com/repos/nolimits4web/Swiper/issues/1615/events","html_url":"https://github.com/nolimits4web/Swiper/issues/1615","id":133843313,"number":1615,"title":"Normalized progress when using centeredSlides:true","user":{"login":"ericmoff","id":17260764,"avatar_url":"https://avatars.githubusercontent.com/u/17260764?v=3","gravatar_id":"","url":"https://api.github.com/users/ericmoff","html_url":"https://github.com/ericmoff","followers_url":"https://api.github.com/users/ericmoff/followers","following_url":"https://api.github.com/users/ericmoff/following{/other_user}","gists_url":"https://api.github.com/users/ericmoff/gists{/gist_id}","starred_url":"https://api.github.com/users/ericmoff/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ericmoff/subscriptions","organizations_url":"https://api.github.com/users/ericmoff/orgs","repos_url":"https://api.github.com/users/ericmoff/repos","events_url":"https://api.github.com/users/ericmoff/events{/privacy}","received_events_url":"https://api.github.com/users/ericmoff/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":2,"created_at":"2016-02-15T23:37:17Z","updated_at":"2016-02-16T18:20:51Z","closed_at":null,"body":"Hi,\r\n\r\nwhen using `watchSlidesProgress: true` and `centeredSlides: true` the value of `swiper.slides[].progress` into `onProgress` callback is always 'shifted' due to swiper logic, how can we obtain a normalized progress value? (eg. a value that is 0 when active slide is centered and slider is not swiping?)\r\n\r\nTo understand, we need it to implement a custom transform that translates slides also on y-axis when swiping on x-axis:\r\n\r\n```javascript\r\n              var mySwiper = new Swiper ('.swiper-container', {\r\n                    slidesPerView: 'auto',\r\n                    centeredSlides: true,                    \r\n                    watchSlidesProgress: true,\r\n                    onProgress: function(swiper, progress){\r\n                        for (var i = 0; i < swiper.slides.length; i++){\r\n                            var slide = swiper.slides[i];\r\n                            var translateY;\r\n                            progress = slide.progress;\r\n                            if (progress > 0) {\r\n                                translateY = progress * swiper.height/2;\r\n                            }\r\n                            else {\r\n                                translateY = -progress * swiper.height/2;\r\n                            }\r\n                            $(slide).css({\r\n                                transform: 'translate3d(' + 0 + 'px,' + translateY + 'px,0)'\r\n                            });\r\n                        }\r\n                    },\r\n\r\n                    onTouchStart: function(swiper){\r\n                        for (var i = 0; i < swiper.slides.length; i++){\r\n                            $(swiper.slides[i]).css({ transition: '' });\r\n                        }\r\n                    },\r\n\r\n                    onSetTransition: function(swiper, speed) {\r\n                        for (var i = 0; i < swiper.slides.length; i++){\r\n                            $(swiper.slides[i]).css({ transition: speed + 'ms' });\r\n                        }\r\n                    }\r\n                })\r\n```\r\n```css\r\n           @media only screen and (min-width: 45em) {\r\n                .swiper-slide {\r\n                    width: 75%;\r\n                }\r\n            }\r\n\r\n           @media only screen and (min-width: 75em) {\r\n                .swiper-slide {\r\n                    width: 50%;\r\n                }\r\n            }\r\n```\r\nThe above code works well only when `centeredSlides` is `false`, when `true` as needed then the active slide is wrongly shifted to the bottom when is centered, additionally it will go up when swiping to left and then goes down but when using `prevButton` instead of touch/mouse to swipe then transform behave differently"},"comment":{"url":"https://api.github.com/repos/nolimits4web/Swiper/issues/comments/184809755","html_url":"https://github.com/nolimits4web/Swiper/issues/1615#issuecomment-184809755","issue_url":"https://api.github.com/repos/nolimits4web/Swiper/issues/1615","id":184809755,"user":{"login":"ericmoff","id":17260764,"avatar_url":"https://avatars.githubusercontent.com/u/17260764?v=3","gravatar_id":"","url":"https://api.github.com/users/ericmoff","html_url":"https://github.com/ericmoff","followers_url":"https://api.github.com/users/ericmoff/followers","following_url":"https://api.github.com/users/ericmoff/following{/other_user}","gists_url":"https://api.github.com/users/ericmoff/gists{/gist_id}","starred_url":"https://api.github.com/users/ericmoff/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ericmoff/subscriptions","organizations_url":"https://api.github.com/users/ericmoff/orgs","repos_url":"https://api.github.com/users/ericmoff/repos","events_url":"https://api.github.com/users/ericmoff/events{/privacy}","received_events_url":"https://api.github.com/users/ericmoff/received_events","type":"User","site_admin":false},"created_at":"2016-02-16T18:20:51Z","updated_at":"2016-02-16T18:20:51Z","body":"Thank you @nolimits4web! you made a great work with swiper\r\n\r\nHere is how I got the 'normalized' value for progress:\r\n```javascript\r\nonProgress: function(swiper, progress) {\r\n        for (var i = 0; i < swiper.slides.length; i++) {\r\n            var slide = swiper.slides[i];\r\n            var translateX, translateY;\r\n            progress = slide.progress;\r\n            var normalizedProgress = progress + (swiper.width - $(slide).width()) / (2 * $(slide).width());\r\n            if (normalizedProgress > 0) {\r\n                translateY = normalizedProgress * swiper.height / 2;\r\n            } else {\r\n                translateY = -normalizedProgress * swiper.height / 2;\r\n            }\r\n            $(slide).css({\r\n                transform: 'translate3d(' + 0 + 'px,' + translateY + 'px,0)'\r\n            });\r\n        }\r\n    }\r\n```\r\nand a jsfiddle: https://jsfiddle.net/duceo8jr/6/\r\n(the final effect should be a circular carousel with translate/rotate transforms etc., for sake of simplicity in the fiddle there is only translateY assigned)\r\n\r\nIssues here can be seen when stop dragging and when clicking prev/next buttons"}}