Javascript-форум - Несколько каруселей на одной странице

Радиойод,
Карусель на Vanilla.JS
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .b-carousel {
  width: 100%;
  overflow: hidden;
  position: relative;

  box-sizing: border-box;
  border: 1px solid;
}

  .b-carousel__prev,
  .b-carousel__next {
    position: absolute;
    top: 50%;
    left: 20px;
    width: 50px;
    height: 50px;
    background: #fff;
    transform: translateY(-50%) translateZ(0);
    cursor: pointer;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    z-index: 3;
  }

    .b-carousel__next {
      left: auto;
      right: 20px;
    }

  .b-carousel__wrap {
    display: flex;
    transition: transform .5s;
    will-change: transform;
    position: relative;
    z-index: 1;
    height: 100%;
  }

    .b-carousel__item {
      flex: 0 0 100%;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
    }

      .b-carousel__img {
        width: 100%;
        display: block;
      }

  </style>

</head>

<body>
<div class="wrap">
    <div class="b-carousel js-carousel">
      <button class="b-carousel__prev js-carousel__prev"><</button>
      <button class="b-carousel__next js-carousel__next">></button>
      <div class="b-carousel__wrap js-carousel__wrap">
        <div class="b-carousel__item">
          <img src="https://i1.wp.com/oriflamzvezda.ru/wp-content/uploads/2014/06/%D1%81%D0%BE%D0%B1%D0%B0%D1%87%D0%BA%D0%B0.jpg?resize=350%2C200" alt="" class="b-carousel__img">
        </div>
        <div class="b-carousel__item">
          <img src="https://i1.wp.com/oriflamzvezda.ru/wp-content/uploads/2015/08/%D0%9C%D0%B8%D0%BB%D1%8B%D0%B5-%D0%B6%D0%B8%D0%B2%D0%BE%D1%82%D0%BD%D1%8B%D0%B5....jpg?resize=350%2C200" alt="" class="b-carousel__img">
        </div>
        <div class="b-carousel__item">
          <img src="https://images.unsplash.com/photo-1422303497846-57188833cbe1?w=500" alt="" class="b-carousel__img">
        </div>
        <div class="b-carousel__item">
          <img src="https://images.unsplash.com/44/MIbCzcvxQdahamZSNQ26_12082014-IMG_3526.jpg?w=500" alt="" class="b-carousel__img">
        </div>
      </div>
    </div>
</div>
<div class="wrap">
    <div class="b-carousel js-carousel">
      <button class="b-carousel__prev js-carousel__prev"><</button>
      <button class="b-carousel__next js-carousel__next">></button>
      <div class="b-carousel__wrap js-carousel__wrap">
        <div class="b-carousel__item">
          <img src="https://i1.wp.com/oriflamzvezda.ru/wp-content/uploads/2014/06/%D1%81%D0%BE%D0%B1%D0%B0%D1%87%D0%BA%D0%B0.jpg?resize=350%2C200" alt="" class="b-carousel__img">
        </div>
        <div class="b-carousel__item">
          <img src="https://i1.wp.com/oriflamzvezda.ru/wp-content/uploads/2015/08/%D0%9C%D0%B8%D0%BB%D1%8B%D0%B5-%D0%B6%D0%B8%D0%B2%D0%BE%D1%82%D0%BD%D1%8B%D0%B5....jpg?resize=350%2C200" alt="" class="b-carousel__img">
        </div>
        <div class="b-carousel__item">
          <img src="https://images.unsplash.com/photo-1422303497846-57188833cbe1?w=500" alt="" class="b-carousel__img">
        </div>
        <div class="b-carousel__item">
          <img src="https://images.unsplash.com/44/MIbCzcvxQdahamZSNQ26_12082014-IMG_3526.jpg?w=500" alt="" class="b-carousel__img">
        </div>
      </div>
    </div>
</div>
<div class="wrap">
    <div class="b-carousel js-carousel">
      <button class="b-carousel__prev js-carousel__prev"><</button>
      <button class="b-carousel__next js-carousel__next">></button>
      <div class="b-carousel__wrap js-carousel__wrap">
        <div class="b-carousel__item">
          <img src="https://i1.wp.com/oriflamzvezda.ru/wp-content/uploads/2014/06/%D1%81%D0%BE%D0%B1%D0%B0%D1%87%D0%BA%D0%B0.jpg?resize=350%2C200" alt="" class="b-carousel__img">
        </div>
        <div class="b-carousel__item">
          <img src="https://i1.wp.com/oriflamzvezda.ru/wp-content/uploads/2015/08/%D0%9C%D0%B8%D0%BB%D1%8B%D0%B5-%D0%B6%D0%B8%D0%B2%D0%BE%D1%82%D0%BD%D1%8B%D0%B5....jpg?resize=350%2C200" alt="" class="b-carousel__img">
        </div>
        <div class="b-carousel__item">
          <img src="https://images.unsplash.com/photo-1422303497846-57188833cbe1?w=500" alt="" class="b-carousel__img">
        </div>
        <div class="b-carousel__item">
          <img src="https://images.unsplash.com/44/MIbCzcvxQdahamZSNQ26_12082014-IMG_3526.jpg?w=500" alt="" class="b-carousel__img">
        </div>
      </div>
    </div>
</div>
<script>
(function() {
  "use strict";

  function Carousel(setting) {
    if(document.querySelector(setting.wrap) === null) {
      console.error(`Carousel not fount selector ${setting.wrap}`);
      return;
    }

    /* Scope privates methods and properties */
    let privates = {};


    /* Public methods */
    // Prev slide
    this.prev_slide = () => {
      --privates.opt.position;

      if(privates.opt.position < 0) {
        privates.sel.wrap.classList.add('s-notransition');
        privates.opt.position = privates.opt.max_position - 1;
      }

      privates.sel.wrap.style["transform"] = `translateX(-${privates.opt.position}00%)`;
    };


    // Next slide
    this.next_slide = () => {
      ++privates.opt.position;

      if(privates.opt.position >= privates.opt.max_position) {
        privates.opt.position = 0;
      }

      privates.sel.wrap.style["transform"] = `translateX(-${privates.opt.position}00%)`;
    };



    /* Privates properties */
    privates.setting = setting;

    privates.sel = {
      "main": document.querySelector(privates.setting.main),
      "wrap": document.querySelector(privates.setting.wrap),
      "children": document.querySelector(privates.setting.wrap).children,
      "prev": document.querySelector(privates.setting.prev),
      "next": document.querySelector(privates.setting.next)
    };

    privates.opt = {
      "position": 0,
      "max_position": document.querySelector(privates.setting.wrap).children.length
    };

    // Control
    if(privates.sel.prev !== null) {
      privates.sel.prev.addEventListener('click', () => {
        this.prev_slide();
      });
    }

    if(privates.sel.next !== null) {
      privates.sel.next.addEventListener('click', () => {
        this.next_slide();
      });
    }

  }


  let a = new Carousel({
    "main": ".wrap:nth-of-type(1) .js-carousel",
    "wrap": ".wrap:nth-of-type(1) .js-carousel__wrap",
    "prev": ".wrap:nth-of-type(1) .js-carousel__prev",
    "next": ".wrap:nth-of-type(1) .js-carousel__next"
  });
  let b = new Carousel({
    "main": ".wrap:nth-of-type(2) .js-carousel",
    "wrap": ".wrap:nth-of-type(2) .js-carousel__wrap",
    "prev": ".wrap:nth-of-type(2) .js-carousel__prev",
    "next": ".wrap:nth-of-type(2) .js-carousel__next"
  });
  let c = new Carousel({
    "main": ".wrap:nth-of-type(3) .js-carousel",
    "wrap": ".wrap:nth-of-type(3) .js-carousel__wrap",
    "prev": ".wrap:nth-of-type(3) .js-carousel__prev",
    "next": ".wrap:nth-of-type(3) .js-carousel__next"
  });

})();

</script>
</body>
</html>