左右切换子标签

思路：左右箭头下方有个渐变的阴影，可以.icon-wrap {
      width: 40px;
      height: 36px;
      position: absolute;
      top: 0px;
      background: linear-gradient(-90deg, #fafafa 85%, rgba(0, 0, 0, 0));
      cursor: pointer;
      z-index: 2;
      &.invisible {
        visibility: hidden !important;
      }
}
invisible一下，左右箭头可以用定位的方法布局

.box ul li这种结构，box限制了宽度，比如1200px，超出需要hidden。
ul 不换行 white-space: nowrap; //这是关键代码
      // overflow-x: hidden;
      position: relative;
      // transition: transform 0.5s;
      transition: all 0.5s ease; //后面会移动ul的left属性，加上速度，更顺滑
      transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
li就正常布局即可。

// js实现是重要的
1、页面加载的时候，判断ul的宽度是否>.box的宽度，如果是，则显示右箭头??
2、点击右箭头，每点击一下，ul移动200px;
如果ul的宽度 <= (.box 宽度+已经移动的left距离），
 则left= ul.scrollWidth - .box.offsetWidth
3、点击左箭头，则较为简单，点击一次+200px                             

// 子分类标签左右箭头切换
      if ($(".subcategories-list-container").length > 0) {
        $(".subcategories-list-container").each(function () {
          var $t = $(this);
          if ($t.find("ul")[0].scrollWidth > 1200) {
            $t.find(".icon-next").removeClass("invisible");
          }
        });
      } else {
      }
      // 点击事件
var leftScrollIndex=0;
      $(document)
        .off("click", ".subcategories-list-container .js_icon-wrap")
        .on(
          "click",
          ".subcategories-list-container .js_icon-wrap",
          function () {
            var $t = $(this),
              $oUl = $t.parent().find("ul")[0],
              moveStyleLeft = 0;
            if ($t.attr("data-direction") == "next") {
              leftScrollIndex--;
              moveStyleLeft = -leftScrollIndex * 200;
              if ($oUl.scrollWidth > $oUl.offsetWidth + moveStyleLeft) {
                $oUl.style.left = -moveStyleLeft + "px";
                $t.parent().find(".icon-pre").removeClass("invisible");
              } else {
                $oUl.style.left = -($oUl.scrollWidth - $oUl.offsetWidth) + "px";
                $t.addClass("invisible");
                leftScrollIndex = 0;
              }
            } else {
              // rightScrollIndex++;
              leftScrollIndex++;
              // moveStyleLeft = rightScrollIndex * 200;
              //当前的left距离
              var currentLeft = parseInt($t.parent().find("ul").css("left")); //比如-255
              if (currentLeft + 200 < 0) {
                $oUl.style.left = currentLeft + 200 + "px";
              } else {
                $oUl.style.left = "0px";
                $t.addClass("invisible");
                leftScrollIndex = 0;
              }
              $t.parent().find(".icon-next").removeClass("invisible");
            }
          }
        );