Carousel

シームレス型のスライダー

CSSに関しては一部CSSライブラリを採用しているので併用してください。

スクロールバーの有無、ドラッグの有無の機能を備えたカルーセル。

  • DEMO
  • scrollber / drag
  • scrollber
  • drag
  • 少要素テスト
  • Box 1
  • Box 2
  • Box 3
  • Box 4
  • Box 5
  • Box 1
  • Box 2
  • Box 3
  • Box 4
  • Box 5
  • Box 1
  • Box 2
  • Box 3
  • Box 4
  • Box 5
  • Box 1
  • Box 2
  • Box 3
  • Box 4
  • Box 5
  • Box 1
  • Box 2

使い方

カルーセルにしたい要素の親に+-sliderMod-+のクラスを付与するだけでカルーセル化します。
内部要素が親要素の幅以下（スクロールが発生しない場合）時と、スマホサイズの時はカルーセル化しません。

[data-scrollber="set"]属性を追加することでスクロールバーを追加します。
*-ul class="sliderMod" data-scrollber="set"-*

[data-drag="set"]属性を追加することでドラッグでのスクロールが可能になります。
*-ul class="sliderMod" data-drag="set"-*

カルーセル化は関数で実行しているので、必ず[sliderSet()]を実行してください。
基本はページ読み込み字の実行で大丈夫ですが、別途イベントに絡めることもできます。
  • HTML
  • CSS
  • Script
    
    
  • 
  
.sliderMod {
    width: 100%;
    margin: 0 0 24px;
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
  }
  .sliderMod[data-scrollber="set"] {padding: 0 0 24px;}

  .sliderMod-wrap {position: relative;}
  .slider-nav {
    opacity: 0;
    transition: .2s;
  }
  .slider-nav-btn {
    width: 32px;
    height: 32px;
    margin: auto;
    border-radius: var(--radius-round);
    background: var(--overlay);
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    position: absolute;
    top: 0;
    bottom: 0;
    transition: .2s;
  }
  .slider-nav-btn:hover {background: rgba(0,0,0,0.9);}
  .slider-nav-btn.prev {left: 0px;}
  .slider-nav-btn.next {right: 0px;}
  .slider-nav-btn.prev .ico-mui::before {content: '\e408';}
  .slider-nav-btn.next .ico-mui::before {content: '\e409';}
  .slider-scrollbar ,
  .slider-scrollbar-btn {
    height: 16px;
    border-radius: var(--radius-round);
  }
  .slider-scrollbar {
    width: 100%;
    background: #d0d0d0;
    position: absolute;
    bottom: 0;
    transform: scale(0.5);
  }
  .slider-scrollbar-btn {
    background: var(--txt-light);
    cursor: pointer;
  }
  .sliderMod-wrap:hover .slider-nav {opacity: 1;}
  .sliderMod-wrap:hover .slider-nav-btn.prev {left: 8px;}
  .sliderMod-wrap:hover .slider-nav-btn.next {right: 8px;}
  .moveing .sliderMod {user-select: none;}
  .moveing .slider-nav {opacity: 1;}
  .moveing .slider-nav-btn.prev {left: 8px;}
  .moveing .slider-nav-btn.next {right: 8px;}
var frag_slider = false;
  var frag_scroll = false;
  var frag_resize = false;

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

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

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

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

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

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

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

    let scrollbar_track = disp_width - tar.width(); // スクロールバー移動可能量
    let 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;
    $('.sliderMod-wrap').removeClass('moveing');
  });

  // リストドラッグ
  $.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.on('orientationchange , resize', function(){
    if (frag_resize !== false) {clearTimeout(frag_resize);}
    frag_resize = setTimeout(function(){
      sliderSet();
    }, 300);
  });