エイチ デザイン / カルーセル

.sliderMod {margin: 0 0 24px;}
.sliderMod {
  width: 100%;
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}
.sliderMod.set {padding: 0 0 24px;}

.sliderMod-wrap {position: relative;}
.sliderMod-nav {
  opacity: 0;
  transition: 0.2s;
}
.sliderMod-nav-btn {
  width: 32px;
  height: 32px;
  margin: auto;
  border-radius: 50% 50%;
  background: rgba(0,0,0,0.6);
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  position: absolute;
  top: 0;
  bottom: 0;
  transition: 0.2s;
}
.sliderMod-nav-btn:hover {background: rgba(0,0,0,0.9);}
.sliderMod-nav-btn.prev {left: -18px;}
.sliderMod-nav-btn.next {right: -18px;}
.sliderMod-nav-btn.prev .ico-mui::before {content: '\e408';}
.sliderMod-nav-btn.next .ico-mui::before {content: '\e409';}
.sliderMod-nav-bar ,
.sliderMod-nav-bar-btn {
  height: 16px;
  border-radius: 16px;
}
.sliderMod-nav-bar {
  width: 100%;
  background: #d0d0d0;
  position: absolute;
  bottom: 0;
  transform: scale(0.5);
}
.sliderMod-nav-bar-btn {
  background: #444;
  cursor: pointer;
}
.sliderMod-wrap:hover .sliderMod-nav {opacity: 1;}
.sliderMod-wrap:hover .sliderMod-nav-btn.prev {left: 18px;}
.sliderMod-wrap:hover .sliderMod-nav-btn.next {right: 18px;}

var $slider = $('.sliderMod');
var slid_amount = 12;
var inertia = 24;
var frag_slider = false;

function sliderSet(){
  $slider.each(function(){
    const w = $win.width();
    const $li = $(this).children('li');
    const i = $li.size();
    $li.addClass('slider-li');
    if(($li.width() + 8) * i > $(this).parent().width() && w > 769 && !$(this).hasClass('set')){
      if($(this).data('scrollber') === 'set'){
        var obj = '
';
      } else {
        var obj = '
';
      }
      $(this).addClass('set').wrap('
').parent('.sliderMod-wrap').append(obj).find('.sliderMod-nav-bar-btn').width(100 / i + '%');
    }
  });
}

// 戻る
$bd.on({
  'mousedown': function(){
    const $slider = $(this).parents('.sliderMod-nav').prev('.sliderMod');
    frag_slider=setInterval(function(){
      $slider.scrollLeft($slider.scrollLeft() - slid_amount);
    },1);
  },
  'mouseup': function(){
    const $slider = $(this).parents('.sliderMod-nav').prev('.sliderMod');
    $slider.animate({
      scrollLeft: $slider.scrollLeft() - inertia
    },200, 'swing');
    clearInterval(frag_slider);
  }
}, '.sliderMod-nav-btn.prev');

// 進む
$bd.on({
  'mousedown': function(){
    const $slider = $(this).parents('.sliderMod-nav').prev('.sliderMod');
    frag_slider=setInterval(function(){
      $slider.scrollLeft($slider.scrollLeft() + slid_amount);
    },1);
  },
  'mouseup': function(){
    const $slider = $(this).parents('.sliderMod-nav').prev('.sliderMod');
    $slider.animate({
      scrollLeft: $slider.scrollLeft() + inertia
    },200, 'swing');
    clearInterval(frag_slider);
  }
}, '.sliderMod-nav-btn.next');

// スクロール同期
$('.sliderMod').scroll(function(){
  const $slideWrap = $(this).parents('.sliderMod-wrap');
  const $slide = $slideWrap.find('.sliderMod');
  const $barBtn = $slideWrap.find('.sliderMod-nav-bar-btn');
  const disp_width = $slide.width();

  // スクロールバー移動可能量(スライダー表示幅 - スライダー幅) / スクロール可能量(スライダー全幅 - スライダー表示幅)
  var offset = $(this).scrollLeft() * (disp_width - $barBtn.width()) / ($slide.get(0).scrollWidth - disp_width);
  $barBtn.css('transform', 'translateX(' + offset + 'px)');
});

// スクロールバードラッグ
var frag_scroll = false;
$bd.on({
  'mousedown': function(e){
    frag_scroll = true;
    scrollbar_x = (e.pageX - $(this).offset().left) * 4;
    tar = $(this);
  }
}, '.sliderMod-nav-bar-btn');
$bd.on('mousemove', function(e){
  if(!frag_scroll) return;

  const $slideWrap = tar.parents('.sliderMod-wrap');
  const $slide = $slideWrap.find('.sliderMod');
  const $bar = tar.parents('.sliderMod-nav-bar');
  const bar_left = $bar.offset().left;
  const disp_width = $slide.width();

  const scrollbar_track = disp_width - tar.width(); // スクロールバー移動可能量
  var scroll_move = ((e.pageX - bar_left) * 4 / scrollbar_track * scrollbar_track) - scrollbar_x;

  if (scroll_move < 0) {scroll_move = 0;}
  else if (scroll_move > scrollbar_track * 2) {return;}

  tar.css('transform', 'translateX(' + scroll_move + 'px)');
  $slide.scrollLeft(((tar.offset().left - bar_left) / scrollbar_track * ($slide.get(0).scrollWidth - disp_width)));
});
$bd.on('mouseup', function(){frag_scroll = false;});

// リストドラッグ
$.prototype.mousedragscrollable = function(){
  let target;
  $(this).each(function(i, e){
    $(e).mousedown(function (event) {
      event.preventDefault();
      target = $(e);
      $(e).data({
        down: true,
        move: false,
        x: event.clientX,
        y: event.clientY,
        scrollleft: $(e).scrollLeft(),
        scrolltop: $(e).scrollTop(),
      });
      return false;
    });
    $(e).click(function(event){
      if($(e).data('move')){return false;}
    });
  });
  $(document)
  .mousemove(function(event){
    if($(target).data('down')){
      event.preventDefault();
      let move_x = $(target).data('x') - event.clientX;
      let move_y = $(target).data('y') - event.clientY;
      if(move_x !== 0 || move_y !== 0){
        $(target).data('move', true);
      } else {
        return;
      }
      $(target).scrollLeft($(target).data('scrollleft') + move_x);
      $(target).scrollTop($(target).data('scrolltop') + move_y);
      return false;
    }
  })
  .mouseup(function(){
    $(target).data('down', false);
    return false;
  });
};
$('.sliderMod[data-drag]').mousedragscrollable();

$win.load(function(){
  sliderSet();
});

var frag_resize = false;
$win.on('orientationchange , resize', function(){
  if (frag_resize !== false) {clearTimeout(frag_resize);}
  frag_resize = setTimeout(function(){
    sliderSet();
  }, 300);
});