wip #6182 @0:10 question match

diff --git a/js/quiz.match.js b/js/quiz.match.js
index 9f72e69569194c77b8d11ff6a3052e0605f0b6b3..22c8e9d909c493bdabe6aea99bb36ff195818fcd 100644 (file)
--- a/js/quiz.match.js
+++ b/js/quiz.match.js
@@ -59,59 +59,58 @@ QuizMatch.prototype = {
             },
             on: {
                 slideChange: function(swiper) {
-                    //$this.setClass()
+                    $this.setRotation(swiper)
                 },
                 progress: function(swiper, progress) {
-                    console.log(swiper)
-
-                    const slides = swiper.slides
-                    let activeIndex = swiper.activeIndex
-                    let nextAllArray = swiper.slides.slice(activeIndex+1)
-                    let prevAllArray = swiper.slides.slice(0,activeIndex)
-
-
-                    console.log(nextAllArray)
-                    //console.log(prevAllArray)
-                    let angle = 4
-
-                    if(swiper.swipeDirection === "next") {
-                        angle -= 4
-                    }
-
-                    if(nextAllArray.length > 0) {
-                        let angle = 4
-                        nextAllArray.forEach(function(el,index) {
-                            console.log("progress",el.progress,progress)
-
-                            $(el).css({
-                                'transform':'rotate('+(angle)+'deg)',
-                                'top': $this.positionsX[index] ? $this.positionsX[index].top+'px' : 0,
-                            })
-                            angle += 4
-
-                        })
-                    }
-
+                    $this.setRotation(swiper)
                 }
             }
         })
 
     },
 
-    /*setRotation: function(swiper) {
+    setRotation: function(swiper) {
+        const $this = this
+        const slides = swiper.slides
         let activeIndex = swiper.activeIndex
         let nextAllArray = swiper.slides.slice(activeIndex+1)
+        let prevAllArray = swiper.slides.slice(0,activeIndex)
+
+
+        console.log(nextAllArray)
+        //console.log(prevAllArray)
         let angle = 4
+
+        if(swiper.swipeDirection === "next") {
+            angle -= 4
+        }
+
+        if(prevAllArray.length > 0) {
+            let angle = -4
+            prevAllArray.reverse().forEach(function(el,index) {
+
+                $(el).css({
+                    'transform':'rotate('+(angle)+'deg)',
+                    'top': $this.positionsX[index] ? $this.positionsX[index].top+'px' : 0,
+                })
+                angle -= 4
+
+            })
+        }
+
         if(nextAllArray.length > 0) {
+            let angle = 4
             nextAllArray.forEach(function(el,index) {
+
                 $(el).css({
                     'transform':'rotate('+(angle)+'deg)',
                     'top': $this.positionsX[index] ? $this.positionsX[index].top+'px' : 0,
                 })
                 angle += 4
+
             })
         }
-    },*/
+    },
 
     confirmTheMatch: function() {
         let lastIndex = this.swiperTop.slides.length - 1

diff --git a/style/107-question-match.sass b/style/107-question-match.sass
index 155b7a0e5a4a68ae58bb15dc8d4b3379b18f0e36..57d0bf3d1e3b9e94f5d4edaaf842bda4aad5f2bf 100644 (file)
--- a/style/107-question-match.sass
+++ b/style/107-question-match.sass
@@ -22,7 +22,7 @@
             height: 158px
             +radius(16px)
             padding: 15px
-            transition: transform .3s
+            transition: all .3s
             &-active
                 background-color: $neutral-color
                 border: 2px solid $texts-color