Full Width Responsive Content Slider with jQuery - bridgeSlide

bridgeSlide is a responsive, flexible, customizable jQuery slider plugin which allows you to display as many items as possible in one slide.

How to use it:

1. Load jQuery library and the jQuery bridgeSlide plugin in the document.

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="jquery.bridgeSlide.min.js"></script>

2. Embed your Html elements into the slider.

<div id="bridgeSlide">
  <div class="items">
  
    <div class="item">
      <h4>Demo Item #1</h4>
      <h5>Demo description #1</h5>
    </div>
    
    <div class="item">
      <h4>Demo Item #2</h4>
      <h5>Demo description #2</h5>
    </div>
    
    <div class="item">
      <h4>Demo Item #3</h4>
      <h5>Demo description #3</h5>
    </div>
    
    ...
    
  </div>
</div>

3. Create a bottom navigation to slide through these Html elements.

<div id="pagination">
  <span class="left">&laquo;</span>
  <span class="right">&raquo;</span>
</div>

4. Call the plugin on the parent element and we're done.

$(document).ready(function() {
$('#bridgeSlide').bridgeSlide({
  width: 700,
  visibleItems: 3,
  itemMargin: 20
});
});

5. Options and defaults.

width: 960, // slider width
visibleItems: 4, // how many items in one slide
items: '.items',
item: '.item',
itemMargin: 'auto',
pagination: '#pagination',
paginationExtended: false,
paginationPrev: '.left',
paginationNext: '.right',
sliderStartAnimate: true,
sliderStartSpeed: 800,
sliderStartEasing: 'linear', // or swing
sliderSpeed: 500, // animation speed
sliderEasing: 'linear', // or swing
keyboardArrows: true,
touch: true // touch support

Change log:

2015-06-16

• bugfix

---

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