Press "Enter" to skip to content

Fullscreen Responsive Horizontal Content Slider | jQuery.bridgeSlide

BridgeSlide is a responsive, flexible, and customizable jQuery slider plugin that allows you to display as many elements as possible in a single slide.

responsive full screen image slider, fullscreen slider jquery, responsive full page slider jquery

How to make use of it:

1. Load the jQuery library and jQuery bridgeSlide plug-in into the document.

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

2. Include HTML elements in 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 the bottom navigation to scroll 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.

$(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

full width responsive content slider, jQuery.bridgeSlide Plugin/Github


See Demo And Download

Official Website(LukaGiorgadze): Click Here

This superior jQuery/javascript plugin is developed by LukaGiorgadze. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.