wip #6182 @1:20 question match

diff --git a/js/quiz.match.js b/js/quiz.match.js
index a203d8c50ff2b51f5e5bb2db943aa64387f5d576..9d1dafdd9310bc28bf07b4468c4a96ab6b33f064 100644 (file)
--- a/js/quiz.match.js
+++ b/js/quiz.match.js
@@ -12,6 +12,7 @@ function QuizMatch(quiz) {
 QuizMatch.prototype = {
     start: function() {
         const $this = this
+        let posInit = 0
 
         $(document).on("click", ".move-slide", function () {
             let move = $(this).attr("aria-keyshortcuts")
@@ -46,7 +47,12 @@ QuizMatch.prototype = {
                 type: 'bullets',
             },
         })
-        swiperBottom.on('slideChange', function () {
+        swiperBottom.on('sliderMove', function (swiper,ev) {
+            const direction = swiper.swipeDirection
+            let currentSlide = $(swiper.slides[swiper.activeIndex])
+            console.log(currentSlide)
+
+            console.log(swiper,ev)
             //$this.applyRotationToSiblings()
         });
     },

diff --git a/style/107-question-match.sass b/style/107-question-match.sass
index aadd9832aa27111dec3c2c52baaa74eb636d74f1..ddeeab0f098e45c427d08f43c160540a377c913e 100644 (file)
--- a/style/107-question-match.sass
+++ b/style/107-question-match.sass
@@ -22,9 +22,22 @@
             height: 158px
             +radius(16px)
             padding: 15px
-            &.swiper-slide-active
+            transition: transform .3s
+            &-active
                 background-color: $neutral-color
                 border: 2px solid $texts-color
+            &-prev
+                transform: rotate(-5deg)
+            &-next
+                transform: rotate(5deg)
+            &-prev,
+            &-next
+                +opacity(.24,background-color,$neutral-color)
+
+            &:not(.swiper-slide-active):not(.swiper-slide-prev):not(.swiper-slide-next)
+                +opacity(.24,background-color,$neutral-color)
+
+
 
     .swiper-pagination-top
         text-align: center
@@ -37,6 +50,7 @@
         .swiper-pagination-bullet
             width: 4px
             height: 4px
+            opacity: 1
             +opacity(.16,background-color,$texts-color)
         .swiper-pagination-bullet-active
             background-color: $texts-color