From fee13ec89452caf5c6fbb6caf21c4e6603fb116e Mon Sep 17 00:00:00 2001
From: soufiane <soufiane@cubedesigners.com>
Date: Tue, 19 Sep 2023 16:21:15 +0200
Subject: [PATCH] wip #6182 @1:20 question match

---
 js/quiz.match.js              |  8 +++++++-
 style/107-question-match.sass | 16 +++++++++++++++-
 2 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/js/quiz.match.js b/js/quiz.match.js
index a203d8c..9d1dafd 100644
--- 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 aadd983..ddeeab0 100644
--- 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
-- 
2.39.5