Tabs-style Responsive Content Slider Plugin For jQuery - jqSlide

jqSlide is a lightweight, responsive, CSS3 animated jQuery content slider plugin which automatically switches between select-like slider and tabs-like slider based on the screen width.

How to use it:

1. Add the latest jQuery library and the jQuery jqSlide plugin to your web pages.

<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="js/jqSlide.js"></script>

2. Create a basic content slider like this:

<div id="slider">
  <h2> Slide 1 </h2>
  <p>
    Content 1
  </p>
  <h2> Slide 2 </h2>
  <p>
    Content 2
  </p>
  <h2> Slide 3 </h2>
  <p>
    Content 3
  </p>
</div>

3. Apply your own CSS styles to the slider.

.slide-navbar {
  float: left;
  padding: 10px 0;
  clear: both;
  display: block;
  margin: auto;
  overflow: hidden;
}

.slide-navbar > li {
  display: inline;
  background: #C0392B;
  padding: 11px;
  cursor: pointer;
  color: #fff;
}

.active-tab { background: #E74C3C !important; }

.slider-container {
  background: #E74C3C;
  overflow: hidden;
  position: relative;
  width: 200%;
  color: #fff;
  -webkit-transition: all 0.6s ease-in-out;
  -ms-transition: all 0.6s ease-in-out;
  transition: all 0.6s ease-in-out;
}

.slider-container > div {
  display: block;
  float: left;
}

.slider-wrapper {
  background: #E74C3C;
  width: 100%;
  float: left;
  overflow: hidden;
  position: relative;
}

.slider-container p { padding : 3%; }

.select-slider {
  display: none;
  width: 100%;
  height: 40px;
  background-color: #E74C3C;
  overflow: hidden;
  border-bottom: 1px solid #fdfdfd;
}

.select-slider select {
  width: 100%;
  background: transparent;
  padding: 5px 3%;
  border: none;
  height: 40px;
  cursor: pointer;
  outline: 0;
  font-size: 20px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.wrapper {
  margin: 0 auto;
  padding: 50px 5% 0;
  position: relative;
  overflow: hidden;
}

.main-wrapper {
  margin: 0 auto;
  max-width: 1280px;
  padding: 50px 5% 0;
  position: relative;
  overflow: hidden
}
/*
  Switching between select-slider and tab-slider
*/
@media screen and (max-width:768px) {

.select-slider { display: block; }

.tab-slider { display: none; }
}

4. Initialize the plugin and done.

$('#slider').jqSlide()

5. Set the default slide on initialize.

$('#slider').jqSlide({'defaultSlide': 2})

Change log:

2015-10-14

• CSS & JS update.

---

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