Draggable slider for touch devices

Question

var reachedLast = false;
var reachedFirst = false;
jQuery("#gbar").draggable({ 
axis: "x",
containment: "parent",
drag: function (event, ui) {
        
        var currentPosition = $('.bar').offset().left + ui.position.left;

        if (ui.position.left == $('.bar').width()-$("#gbar").width())
        {
            reachedLast = true;
            reachedFirst = false;
        } else if(ui.position.left == 0) {
            reachedLast = false;
            reachedFirst = true;
        }

        if (reachedLast) {
            $('.list-group li').each(function(idx) {
                if(currentPosition < ($(this).offset().left + ($(".slide_icon").find("li:eq("+idx+")").width())/2 - 50)){
                    $('.slider_content').find('li:eq('+idx+')').find('div').css('display','none');
                }
            });
        }
        else {
            $('.list-group li').each(function(idx) {
                if(currentPosition > ($(this).offset().left + $(this).width()/2 - 50)) {
                    $('.slider_content').find('li:eq('+idx+')').find('div').css('display','block');
                }
            })
        }
    }
});

How could I make my slider draggable for mobile devices? I also want this slider auto to scroll same as drag functionality, I am stuck somewhere.

Answer 1

You may also consider different logic to identify the Index. The following attempts to be more modular, where it can work for a variable bar width and list length.

I also added Touch Punch to help mobile devices.

jQuery(function($) {
  var idx = 0;
  var itemsCount = $('.list-group li').length
  var idxLen = $(".bar").width() / itemsCount;
  var prevpos;
  $("#gbar").draggable({
    axis: "x",
    containment: "parent",
    start: function(e, ui) {
      prevpos = ui.position.left || 0;
    },
    drag: function(event, ui) {
      var dir = (ui.position.left > prevpos ? "right" : "left");
      if (dir == "right") {
        if (ui.position.left > ((idx * idxLen) + idxLen)) {
          idx++;
        }
      } else {
        if (ui.position.left < ((idx * idxLen))) {
          idx--;
        }
      }
      console.log(dir, ui.position.left, idx);
      $(".list-group li").addClass("hidden").eq(idx).toggleClass("hidden");
    }
  });
});

.list-group {
  list-style: none;
  padding: 3px;
}

.list-group .hidden {
  display: none;
}

<link rel="stylesheet" href="https://code.jquery.com/ui/1.14.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<script src="https://code.jquery.com/ui/1.14.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js" integrity="sha512-0bEtK0USNd96MnO4XhH8jhv3nyRF0eK87pJke6pkYf3cM0uDIhNJy9ltuzqgypoIFXw3JSuiy04tVk4AjpZdZw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<div class="bar ui-widget-content" style="width: 200px;">
  <div id="gbar" class="ui-widget-header ui-corner-all" style="padding: 3px; width: 10px; text-align: center;">|</div>
</div>
<div class="slider_content">
  <ul class="list-group">
    <li>
      <div>Item 1</div>
    </li>
    <li class="hidden">
      <div>Item 2</div>
    </li>
    <li class="hidden">
      <div>Item 3</div>
    </li>
    <li class="hidden">
      <div>Item 4</div>
    </li>
    <li class="hidden">
      <div>Item 5</div>
    </li>
    <li class="hidden">
      <div>Item 6</div>
    </li>
    <li class="hidden">
      <div>Item 7</div>
    </li>
    <li class="hidden">
      <div>Item 8</div>
    </li>
    <li class="hidden">
      <div>Item 9</div>
    </li>
    <li class="hidden">
      <div>Item 10</div>
    </li>
  </ul>
</div>

Tested on Windows 11 in Firefox and Android 12 in Chrome.