UPD: Carousel

src/js/main/css-screen-size.js

@@ -48,6 +48,7 @@ export default ((W) => {
     return curEnv
   }
 
+  W.detectCSSScreenSize = detectCSSScreenSize
   W.addEventListener(`${Events.LOADED}`, detectCSSScreenSize)
 
   W.addEventListener(`${Events.RESIZE}`, detectCSSScreenSize)

src/js/main/funcs.js

@@ -31,5 +31,21 @@ funcs.getParents = (elem, selector) => {
   return parents
 }
 
+funcs.ucwords = (strInitial) => {
+  let str = strInitial.toLowerCase();
+  const words = str.split(' ');
+  str = '';
+  for (var i = 0; i < words.length; i++) {
+    let word = words[i];
+    word = word.charAt(0).toUpperCase() + word.slice(1);
+    if (i > 0) { str = str + ' '; }
+    str = str + word;
+  }
+
+  return str
+}
+
+
+window.globalF = funcs
 module.exports = funcs
 module.exports.default = funcs

src/js/main/index.js

@@ -4,4 +4,5 @@
 import './visibility'
 import './touch'
 import './css-screen-size'
+import './funcs'
 import './main'

src/js/ui/carousel.js

@@ -1,4 +1,5 @@
 import Events from '../_events'
+import Consts from '../_consts'
 import Carousel from 'bootstrap/js/src/carousel'
 
 const CarouselUI = ((window) => {
@@ -103,13 +104,25 @@ const CarouselUI = ((window) => {
         // fix animation glitch
         inner.style.left = '0px'
 
+        const getNumToDisplay = (el) => {
+          const screenSize = window.detectCSSScreenSize()
+          let curNum = parseInt(el.dataset['length'+window.globalF.ucwords(screenSize)]);
+          if(!curNum){
+            curNum = parseInt(el.dataset.length);
+          }
+
+          return Math.min(curNum, numberOfItems)
+        }
+
         const calculate = (entries) => {
           const entry = entries[0]
           const el = entry.target
           const rect = entry.contentRect
-          const width = rect.width
+          //const width = rect.width
+          const width = el.querySelector('.carousel-inner-container').clientWidth
+
           // const height = rect.height
-          const numToDisplay = Math.min(parseInt(el.dataset.length), numberOfItems)
+          const numToDisplay = getNumToDisplay(el)
           const itemWidth = width / numToDisplay
 
           el.dataset.itemWidth = itemWidth
@@ -121,7 +134,7 @@ const CarouselUI = ((window) => {
           })
 
           if (numberOfItems === numToDisplay) {
-            el.classList.add('js-carousel-no-slide')
+            el.classList.add(`${NAME}-no-slide`)
             carousel.pause()
           }
         };
@@ -150,7 +163,7 @@ const CarouselUI = ((window) => {
 
         el.addEventListener('slide.bs.carousel', (e) => {
           // infinite scroll
-          const numToDisplay = Math.min(parseInt(el.dataset.length), numberOfItems)
+          const numToDisplay = getNumToDisplay(el)
           console.log(`.${NAME}: ${e.to} ${numberOfItems / 2}`);
 
           if(numberOfItems - numToDisplay < e.to){
@@ -177,7 +190,7 @@ const CarouselUI = ((window) => {
         el.classList.add(`${NAME}-multislide-active`)
       } else {
         if (items.length === 1) {
-          el.classList.add('js-carousel-no-slide')
+          el.classList.add(`${NAME}-no-slide`)
         }
       }
 

src/scss/ui/carousel.scss

@@ -118,14 +118,14 @@ $carousel-slide-img-loading-max-height: 25vh !default;
 
     .carousel-inner {
         display: flex;
-        flex-direction: column;
+        flex-direction: row;
 
         align-items: center;
         justify-content: center;
         transition: all 1s ease;
-        @media (min-width: map-get($grid-breakpoints, "md")) {
+        /*@media (min-width: map-get($grid-breakpoints, "md")) {
             flex-direction: row;
-        }
+        }*/
     }
 }