Responsive Mobile Friendly Slider jQuery Plugin - Bway Image Slider

Bway Image Slider is a simple, easy-to-use jQuery plugin for creating a responsive, touch-compatible image slider for both desktop and mobile websites.

Features:

• Auto adjusts the number of images to show based on the screen size.
• Supports touch events based on Hammer.js.
• Supports both vertical and horizontal layouts.
• Supports infinite / carousel mode.

How to use it:

1. Include the necessary jQuery library and jQuery Bway Image Slider plugin's script on your html document.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="js/jquery.bway.imageslider.js"></script>

2. Include the OPTIONAL hammer.js and jQuery hammer.js for touch events support.

<script src="/path/to/hammer.min.js"></script>
<script src="/path/to/jquery.hammer.js"></script>

3. Add your images together with the prev / next navigation buttons to your webpage.

<div id="example">
  <div class="viewport">
    <input type="button" class="buttons prev" value="">
    <div class="overview">
      <ul>
        <li><img src="1.jpg"></li>
        <li><img src="2.jpg"></li>
        <li><img src="3.jpg"></li>
        <li><img src="4.jpg"></li>
        <li><img src="5.jpg"></li>
        <li><img src="6.jpg"></li>
        <li><img src="7.jpg"></li>
        <li><img src="8.jpg"></li>
        <li><img src="9.jpg"></li>
      </ul>
    </div>
    <input type="button" class="buttons next" value="">
  </div>
</div>

4. Initialize the image slider.

$('#example').bwayImageSlider();

5. Apply your own CSS styles to the image slider.

#example1 {
  padding: 0;
  position: relative;
  overflow: hidden;
}
#example1 .viewport {
  position: relative;
  width: 100%;
  height: 150px;  /* you can define the height you want */
  overflow: hidden;
}

#example1 .buttons {
  display: block;
  position: absolute;
  line-height: 150px; /* in this case we use some height of viewport */
  width: 30px;
  top: 0; 
  text-align: center;
  z-index: 1;
  background-color: #FFF;
  border: 0;
  font-family: 'fontawesome';
}

#example1 .buttons i {
  font-size: 18px;
  color: #000;
  line-height: 150px;
}

#example1 .buttons:hover {
  background-color: #F3F3F3;
}

#example1 .overview {
  position: absolute;
  padding: 0 35px;
  margin: 0;
  left: 0;
  top: 0;
}

#example1 .overview ul {
  clear: both;
  list-style: none;
  height: 150px;
  padding: 0;
}

#example1 li {
  display: inline-block;
  float: left;
  margin: 0 7px;
}

#example1 .buttons.prev {
  left: 0;     /* if you're using 'x' axis */
}
#example1 .buttons.next {
  right: 0;    /* if you're using 'x' axis */
}

6. Configuration options.

$('#example').bwayImageSlider({

  // x = horizontal
  // y = vertical
  axis          : 'x',

  // intial slide
  initialCourse : 0,

  // animation speed
  speed         : 1500,

  // space between images
  itemMargin    : 10,

  // carousel mode
  loop          : false,

  // enable loader
  loader        : false,

  // enable keyboard navigation
  keyboard      : false,
  
});

Change log:

2016-05-16

• v1.0.6: Loader controlable. Since you have .loader-overlay in your container just use loader : true.

2016-03-21

• v1.0.5: bug correction

2016-03-16

• v1.0.3: includes current/total information

2016-01-06

• v1.0.2 Allows <a> or <img> as list elements

---

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