Tabs-style Responsive Content Slider Plugin For jQuery - jqSlide
File Size: | 6.23 KB |
---|---|
Views Total: | 8636 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.