slider buttons

src/svg/arrow_active-back.svg

+<svg width="16" height="14" viewBox="0 0 16 14" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.84254 0.288818C9.44977 -0.0994427 8.81661 -0.0957828 8.42835 0.296992C8.04009 0.689767 8.04375 1.32292 8.43653 1.71118L9.84254 0.288818ZM15 6.7931L15.7271 7.47963C16.1001 7.08455 16.0894 6.4639 15.703 6.08192L15 6.7931ZM8.41243 12.3135C8.03327 12.715 8.05144 13.3479 8.45301 13.7271C8.85458 14.1063 9.48748 14.0881 9.86664 13.6865L8.41243 12.3135ZM13.3721 7.7931C13.9244 7.7931 14.3721 7.34539 14.3721 6.7931C14.3721 6.24082 13.9244 5.7931 13.3721 5.7931V7.7931ZM1 5.7931C0.447715 5.7931 0 6.24082 0 6.7931C0 7.34539 0.447715 7.7931 1 7.7931V5.7931ZM8.43653 1.71118L14.297 7.50429L15.703 6.08192L9.84254 0.288818L8.43653 1.71118ZM14.2729 6.10658L8.41243 12.3135L9.86664 13.6865L15.7271 7.47963L14.2729 6.10658ZM13.3721 5.7931H1V7.7931H13.3721V5.7931Z" fill="currentColor"/>
+</svg>

src/view/cmp/cardSlider/CardSlider.jsx

 import Card from "../card/Card";
+import ArrPrev from '/svg/arrow_active.svg';
+import ArrNext from '/svg/arrow_active-back.svg';
 import './CardSlider.scss';
 
-const CardSlider = D.declare( 'view.cmp.CardSlider', (cfg) => {
-  let current = [],
-    hash = {},
-    items = [],
-    cardWidth = 160,
-    minPadding = 20,
-    wrap,
-    width,
-    fullCardsCount,
-    padding,
-    updateSize = function() {
-      width = dom.clientWidth;
-      fullCardsCount = width/(cardWidth+minPadding)|0;
-      padding = (width-fullCardsCount*cardWidth)/(fullCardsCount-1);
-      wrap.style.width = (items.length*(padding+cardWidth)-padding)+'px';
-    },
-    update = function() {
-      updateSize();
-      updateVisibleDom();
+const CardSlider = D.declare('view.cmp.CardSlider', (cfg) => {
+    let current = [],
+        hash = {},
+        items = [],
+        cardWidth = 160,
+        minPadding = 20,
+        wrap,
+        width,
+        fullCardsCount,
+        padding,
+        updateSize = function () {
+            width = dom.clientWidth;
+            fullCardsCount = width / (cardWidth + minPadding) | 0;
+            padding = (width - fullCardsCount * cardWidth) / (fullCardsCount - 1);
+            wrap.style.width = (items.length * (padding + cardWidth) - padding) + 'px';
+        },
+        update = function () {
+            updateSize();
+            updateVisibleDom();
+        };
+
+
+    tmpStore.sub('width', Store.debounce(function (w) {
+        let firstItem = Math.round(dom.scrollLeft / (cardWidth + padding));
+        console.log(firstItem);
+        update();
+        dom.scrollLeft = firstItem * (cardWidth + padding);
+    }, 30));
+    let waitTimeout = false;
+    let tuning = false;
+    let leftestItem = 0;
+    let lastLeftestItem = 0;
+    let tuneScrollPosition = function () {
+        waitTimeout = false;
+        tuning = true;
+        let fromLeft = dom.scrollLeft;
+        let firstItem = Math.round(fromLeft / (cardWidth + padding) - (lastLeftestItem > leftestItem ? 0.4 : -0.4));
+        let toLeft = Math.round(firstItem * (cardWidth + padding));
+        let deltaMove = (toLeft - fromLeft) / Math.ceil(200 / (1000 / 60));
+        while (deltaMove > 0 && deltaMove < 1) {
+            deltaMove *= 2;
+        }
+        if (Math.abs(fromLeft + deltaMove - toLeft) > Math.abs(fromLeft - toLeft)) {
+            deltaMove = toLeft - fromLeft;
+        }
+        let tune = function () {
+            if (Math.abs(toLeft - dom.scrollLeft) > (cardWidth + padding)) {
+                return tuning = false;
+            }
+            if (Math.sign(toLeft - dom.scrollLeft) !== Math.sign(deltaMove)) {
+                return tuning = false;
+            }
+            if (Math.abs(dom.scrollLeft - toLeft) < Math.abs(deltaMove)) {
+                dom.scrollLeft = toLeft;
+                return tuning = false;
+            } else {
+                dom.scrollLeft += deltaMove;
+                requestAnimationFrame(tune);
+            }
+        };
+        if (Math.abs(deltaMove) > 0) {
+            requestAnimationFrame(tune);
+        } else {
+            tuning = false;
+        }
+
     };
+    let waitUntilDoNotTouchScroll = function () {
+        if (tuning)
+            return;
 
+        lastLeftestItem = leftestItem;
+        leftestItem = dom.scrollLeft / (cardWidth + padding);
 
-  tmpStore.sub('width', Store.debounce(function(w) {
-    let firstItem = Math.round(dom.scrollLeft/(cardWidth+padding));
-    console.log(firstItem);
-    update();
-    dom.scrollLeft = firstItem*(cardWidth+padding);
-  }, 30));
-  let waitTimeout = false;
-  let tuning = false;
-  let leftestItem = 0;
-  let lastLeftestItem = 0;
-  let tuneScrollPosition = function() {
-    waitTimeout = false;
-    tuning = true;
-    let fromLeft = dom.scrollLeft;
-    let firstItem = Math.round(fromLeft/(cardWidth+padding)-(lastLeftestItem>leftestItem?0.4:-0.4));
-    let toLeft = Math.round(firstItem*(cardWidth+padding));
-    let deltaMove = (toLeft - fromLeft)/Math.ceil(200/(1000/60));
-    while(deltaMove>0 && deltaMove<1){
-      deltaMove *= 2;
-    }
-    if(Math.abs(fromLeft+deltaMove - toLeft) > Math.abs(fromLeft-toLeft)){
-      deltaMove = toLeft - fromLeft;
-    }
-    let tune = function() {
-      if(Math.abs(toLeft-dom.scrollLeft) > (cardWidth+padding)){
-        return tuning = false;
-      }
-      if(Math.sign(toLeft-dom.scrollLeft) !== Math.sign(deltaMove)){
-        return tuning = false;
-      }
-      if(Math.abs(dom.scrollLeft-toLeft) < Math.abs(deltaMove)){
-        dom.scrollLeft = toLeft;
-        return tuning = false;
-      }else{
-        dom.scrollLeft += deltaMove;
-        requestAnimationFrame( tune );
-      }
+        if (waitTimeout)
+            clearTimeout(waitTimeout);
+        waitTimeout = setTimeout(tuneScrollPosition, 80);
     };
-    if(Math.abs(deltaMove)>0){
-      requestAnimationFrame( tune );
-    }else{
-      tuning = false;
-    }
-
-  };
-  let waitUntilDoNotTouchScroll = function() {
-    if(tuning)
-      return;
-
-    lastLeftestItem = leftestItem;
-    leftestItem = dom.scrollLeft/(cardWidth+padding);
-
-    if(waitTimeout)
-      clearTimeout(waitTimeout);
-    waitTimeout = setTimeout(tuneScrollPosition,80);
-  };
-  let dom;
-  let theDOM = <div class="card-slider">
-
-      {dom = <div class='card-slider__scroller'>
-      {wrap = <div class='card-slider__wrapper'>{' '}</div>}
-    </div>}
-  </div>;
-
-  let lastFrom, lastTo, last = false;
-  let updateVisibleDom = function() {
-    let from = Math.floor(dom.scrollLeft/(cardWidth+padding)-1),
-        count = Math.ceil(dom.clientWidth/(cardWidth+padding)),
-        to;
-    to = from + count *2;
-    from -=count;
-    from = Math.max(0, from);
-    to = Math.min(to, items.length);
+    let dom;
+    let theDOM = <div class="card-slider">
+        <button class="card-slider__control card-slider__control--prev" type="button"
+                aria-label="Показать предыдущую карточку">
+            <ArrPrev width="14" height="12"/>
+        </button>
+        <button className="card-slider__control card-slider__control--next" type="button"
+                aria-label="Показать предыдущую карточку">
+            <ArrNext width="14" height="12"/>
+        </button>
+        {dom = <div class='card-slider__scroller'>
+            {wrap = <div class='card-slider__wrapper'>{' '}</div>}
+        </div>}
+    </div>;
+
+    let lastFrom, lastTo, last = false;
+    let updateVisibleDom = function () {
+        let from = Math.floor(dom.scrollLeft / (cardWidth + padding) - 1),
+            count = Math.ceil(dom.clientWidth / (cardWidth + padding)),
+            to;
+        to = from + count * 2;
+        from -= count;
+        from = Math.max(0, from);
+        to = Math.min(to, items.length);
 
 //console.log({from, to, cardWidth, padding})
-    for(let i = from; i< to; i++){
-      if(!(i in hash)){
-        hash[i] = {
-          dom: (function(item, n) {
-            return <div className="card-slider__item">
-              <Card
-                type={'product,info,other'.split( ',' )[ n % 3 ]}
-                disabled={n % 5 === 0}
-                seen={n % 4 === 0}
-                title={item.name}
-                image={item.image}
-              />
-            </div>
-          })(items[i], i),
-          inDOM: false,
-          x: 0
-        };
-      }
-    }
-    if(last){
-      for( let i = lastFrom; i < lastTo; i++ ){
-        if(i < from || i >= to){
-          if(hash[i].inDOM){
-            hash[i].inDOM = false;
-            wrap.removeChild(hash[i].dom);
-          }
+        for (let i = from; i < to; i++) {
+            if (!(i in hash)) {
+                hash[i] = {
+                    dom: (function (item, n) {
+                        return <div className="card-slider__item">
+                            <Card
+                                type={'product,info,other'.split(',')[n % 3]}
+                                disabled={n % 5 === 0}
+                                seen={n % 4 === 0}
+                                title={item.name}
+                                image={item.image}
+                            />
+                        </div>
+                    })(items[i], i),
+                    inDOM: false,
+                    x: 0
+                };
+            }
+        }
+        if (last) {
+            for (let i = lastFrom; i < lastTo; i++) {
+                if (i < from || i >= to) {
+                    if (hash[i].inDOM) {
+                        hash[i].inDOM = false;
+                        wrap.removeChild(hash[i].dom);
+                    }
+                }
+            }
+        }
+        for (let i = from; i < to; i++) {
+            let x = i * (cardWidth + padding);
+            if (hash[i].x !== x) {
+                hash[i].dom.style.left = (hash[i].x = x) + 'px';
+            }
+            if (!hash[i].inDOM) {
+                wrap.appendChild(hash[i].dom);
+                hash[i].inDOM = true;
+            }
         }
-      }
-    }
-    for(let i = from; i< to; i++){
-      let x = i*(cardWidth+padding);
-      if(hash[i].x !== x){
-        hash[i].dom.style.left = (hash[i].x = x)+'px';
-      }
-      if(!hash[i].inDOM){
-        wrap.appendChild(hash[i].dom);
-        hash[i].inDOM = true;
-      }
-    }
 
 
-    lastFrom = from;
-    lastTo = to;
-    last = true;
+        lastFrom = from;
+        lastTo = to;
+        last = true;
 
-  };
+    };
 
-  dom.addEventListener('scroll', Store.debounce(function() {
-    requestAnimationFrame(updateVisibleDom);
-    waitUntilDoNotTouchScroll();
-  }, 1000/60));
-  cfg.items(function(i) {
-    items = i;
-    //update();
+    dom.addEventListener('scroll', Store.debounce(function () {
+        requestAnimationFrame(updateVisibleDom);
+        waitUntilDoNotTouchScroll();
+    }, 1000 / 60));
+    cfg.items(function (i) {
+        items = i;
+        //update();
 
-    update();
+        update();
 
-  });
+    });
 
-  return theDOM;
-} );
+    return theDOM;
+});
 
 export default CardSlider;
-export { CardSlider };
+export {CardSlider};