Dynamic Card Slider/Scroller Plugin - jQuery altSlider

altSlider is a simple customizable jQuery slider/scroller plugin to horizontally (or vertically) scroll through a collection of content blocks with mouse wheel.

More features:

• With a bottom scrollbar to indicate the current content block.
• Auto scrolls through the block collection at a given speed.
• Loads remote data sources via AJAX.
• Raw data is supported as well.
• Allows to specify the maximum number of blocks to show per view.
• Allows to customize the step size on each scroll.

How to use it:

1. Add jQuery library and the jQuery altSlider files (JavaScript and Stylesheet) to the web page.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous">
</script>
<link rel="stylesheet" href="altSlider.css">
<script src="altSlider.js"></script>

2. Create a placeholder element for the slider/scroller.

<div class="slider-placeholder"></div>

3. Call the function on the slider placeholder and define your own data to be displayed in the slider.

$(function () {
  $(".slider-placeholder").altSlider({
    rawData: [
      {
        "title": "Title 1",
        "body": "Body 1",
        "create_time": "2018-01-01 00:00:01",
        "img_src": "image 1",
        "src": "https://www.jqueryscript.net"
      },
      {
        "title": "Title 2",
        "body": "Body 2",
        "create_time": "2018-01-01 00:00:02",
        "img_src": "image 2",
        "src": "https://www.jqueryscript.net"
      },
      {
        "title": "Title 3",
        "body": "Body 3",
        "create_time": "2018-01-01 00:00:03",
        "img_src": "image 3",
        "src": "https://www.jqueryscript.net"
      }]
  });
});

4. If you want to load the data from a remote JSON file.

$(function () {
  $(".slider-placeholder").altSlider({
    url: 'data.json'
  });
});

5. Enable the autoscroll functionality and specify the transition delay in milliseconds.

$(function () {
  $(".slider-placeholder").altSlider({
    url: 'data.json',
    auto_scroll: 2000
  });
});

6. Specify the number of items to display on a slide.

$(function () {
  $(".slider-placeholder").altSlider({
    url: 'data.json',
    display_elements_count: 3
  });
});

7. Decide whether to display the bottom scrollbar.

$(function () {
  $(".slider-placeholder").altSlider({
    url: 'data.json',
    displayScroll: true
  });
});

8. Customize the styles of the scrollbar.

.scroll_bar {
  height: 3px;
  background-color: #EDE7F6;
}

9. Set the step size

$(function () {
  $(".slider-placeholder").altSlider({
    url: 'data.json',
    move_right_steps: 1
  });
});

10. Specify the reload interval.

$(function () {
  $(".slider-placeholder").altSlider({
    url: 'data.json',
    dynamicReload: 3000 // default: false
  });
});

11. Use vertical scrolling instead of horizontal.

$(function () {
  $(".slider-placeholder").altSlider({
    url: 'data.json',
    vertical: true, // default: false
    is_vertical: true // default: false
  });
});

Change log:

2018-05-18

• Customizable vertical scroll. Fixed bugs.

2018-05-05

• Added vertical scrolling.

---

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