jQuery Plugin For Swipeable List View - List Swipe

List Swipe is a mobile-first jQuery plugin for creating a swipeable list view that allows to reveal an action button when you swipe the row left or right on touch devices.

See also:

• jQuery Plugin For iOS-like Swipe To Delete - swipeTo

How to use it:

1. Put latest version of jQuery library and the jQuery List Swipe plugin's script on the html page.

<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="jquery-listswipe.js"></script>

2. Add custom actions buttons to the list view.

<div class="item-list example">
  <div class="item">
    <button class="action">Left Button</button>
    <div>First Item</div>
    <button class="action">Right Button</button>
  </div>
  <div class="item">
    <button class="action">Left Button</button>
    <div>Second Item</div>
    <button class="action">Right Button</button>
  </div>
  <div class="item">
    <button class="action">Left Button</button>
    <div>Third Item</div>
    <button class="action">Right Button</button>
  </div>
</div>

3. The example CSS to style the list view & action buttons.

.item-list { overflow: hidden; }

.item-list .item {
  position: relative;
  display: table;
  width: 100%;
  background: #FFF;
  margin-top: 5px;
}

.item-list .item > div {
  padding: 10px;
  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}

.item-list .item .action {
  position: absolute;
  width: 80px;
  height: 100%;
  top: 0;
  border: 0;
  color: #FFF;
  outline: none;
}

.item-list .item .action:first-child::before, .item-list .item .action:last-child::before {
  position: absolute;
  top: 0;
  content: '';
  width: 2000px;
  height: 100%;
}

.item-list .item .action:first-child { left: -80px; }

.item-list .item .action:first-child::before { right: 80px; }

.item-list .item .action:last-child { right: -80px; }

.item-list .item .action:last-child::before { left: 80px; }

.item-list .item .action, .item-list .item .action::before { background: #959595; }

4. Active the swipeable list view.

$('.example').listSwipe();

5. Customize the swipeable list view with the following options.

$('.example').listSwipe({

  // The item in the list that has the side actions
  itemSelector: '>', 

  // The width of action button
  itemActionWidth: 80, 

  // Whether there is an action on the left
  leftAction: true, 

  // Whether there is an action on the right
  rightAction: true, 

  // Percent threshold for snapping to position on touch end
  snapThreshold: 0.8, 

  // Snap animation duration
  snapDuration: 200, 

  // Close other item actions if a new one is moved
  closeOnOpen: true, 

  // Number of pixels in the Y-axis before preventing swiping
  maxYDelta: 40, 

  // Number of pixels in the X-axis before allowing swiping
  initialXDelta: 25 
  
});

---

This awesome jQuery plugin is developed by Turnerj. For more Advanced Usages, please check the demo page or visit the official website.