Full Width Responsive Banner Slider With jQuery - slider-plugin.js

A simple, jQuery powered, full-width image carousel / slider plugin that automatically resizes images based on the screen size. You can use the plugin as a responsive banner carousel for your website or web application.

How to use it:

1. Create the html for the full width banner carousel.

<div class="banner_box">
  <div class="index-banner" id="index-banner">
    <div class="index-banner-scroll">
      <ul>
        <li>
          <a href="#">
            <img src="1.jpg">
          </a>
        </li>
        <li>
          <a href="#">
            <img src="2.jpg">
          </a>
        </li>
        <li>
          <a href="#">
            <img src="3.jpg">
          </a>
        </li>
      </ul>
    </div>
    <div class="control">
      <span class="" style="opacity: 1;"></span>
      <span style="opacity: 1;" class="active"></span>
      <span style="opacity: 1;"></span>
    </div>
  </div>
</div>

2. The main CSS styles for the carousel slider.

.index-banner {
  position: relative;
  z-index: 1;
  height: 346px;
  overflow: hidden;
  position: relative;
  margin: 0 auto;
}

.index-banner ul {
  height: 346px;
  position: absolute;
  width: 50000px;
}

.index-banner ul li {
  float: left;
  height: 346px;
  overflow: hidden;
  position: relative;
  background: #000;
}

.index-banner ul li div {
  position: absolute;
  overflow: hidden;
  z-index: 999
}

.index-banner .control {
  position: absolute;
  height: 10px;
  padding: 5px 10px;
  bottom: 40px;
  text-align: center;
  z-index: 9999
}

.index-banner .control span {
  float: left;
  _display: inline;
  _zoom: 1;
  _font-size: 0;
  margin-left: 5px;
  cursor: pointer;
  height: 15px;
  width: 15px;
  background: #666;
  border-radius: 15px;
}

.index-banner .control span.active { background: #f00; }

.index-banner li {
  float: left;
  width: auto;
  height: 346px;
}

.index-banner {
  width: auto;
  height: 346px;
}

.index-banner-scroll {
  position: relative;
  overflow: hidden;
  width: 1920px;
  height: 346px;
}

.btn-group {
  text-align: center;
  margin-top: 10px;
}

.btn-group span {
  display: inline-block;
  width: 100px;
  height: 30px;
  line-height: 30px;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-right: 10px;
  cursor: pointer;
  user-select: none;
}

3. Include jQuery library and the jQuery slider-plugin.js plugin at the bottom of the webpage.

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="js/slider-plugin.js"></script>

4. Initialize the carousel slider with options.

$(".banner_box").slider({
  containerEl: $(".index-banner-scroll"),
  silderContainerEl: $("#index-banner ul"),
  itemEl: $("#index-banner ul li"),
  btnEl: $('.control span'),
  btnContainerEl: $('.control'),
  prev: $(".prev"),
  next: $(".next"),
  index: 0,
  resizeable: true,
  showButton: true
});

Change log:

2016-06-03

• JS update

---

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