started home showroom carroussel with mediaquery in js

web/themes/custom/materiotheme/vuejs/components/Pages/Home.vue

@@ -27,7 +27,50 @@ export default {
       return this.template.render.call(this)
     }
   },
+  mounted(){
+    this.initShowroomCarroussel()
+  },
   methods: {
+    initShowroomCarroussel(){
+      console.log("startShowroomCarroussel");
+      let $showrooms = document.querySelectorAll('.field--name-computed-showrooms-reference > .field__item')
+      console.log('$showrooms', $showrooms);
+
+      // TODO: share media query and variables between scss and js
+      let column_width= 205
+      let column_goutiere= 13
+      let bp = (column_width + column_goutiere )*7 +1
+      const mediaQuery = window.matchMedia(`(min-width: ${bp}px)`)
+      if (mediaQuery.matches) {
+        let $showroomsOdd = []
+        let $showroomsEven = []
+        for (var i = 0; i < $showrooms.length; i++) {
+          if (i%2 === 0) {
+            $showroomsOdd.push($showrooms[i])
+          }else{
+            $showroomsEven.push($showrooms[i])
+          }
+        }
+        console.log('Odd', $showroomsOdd);
+        console.log('Even', $showroomsEven);
+        this.switchShowroomCarroussel($showroomsEven, 0)
+        this.switchShowroomCarroussel($showroomsOdd, 0)
+      }else{
+        this.switchShowroomCarroussel($showrooms, 0)
+      }
+    },
+    switchShowroomCarroussel($elmts, i){
+      // console.log('switchShowroomCarroussel i', $elmts, i);
+
+      $elmts[i].classList.add('active')
+      $elmts[i-1 < 0 ? $elmts.length -1 : i-1].classList.remove('active')
+
+      i++
+      if(i >= $elmts.length){
+        i = 0
+      }
+      setTimeout(this.switchShowroomCarroussel.bind(this,$elmts,i), 5000);
+    },
     onClickLink(e){
       console.log("onClickLink", e, this.$router, this.$route);
       let path = null;