Simple Full Width Image Slider Plugin For jQuery
File Size: | Unknown |
---|---|
Views Total: | 3236 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
A super simple small jQuery plugin that lets you create a full width background image slider/carousel with fade transitions. Fully controllable via data-*
attributes.
How to use it:
1. Load jQuery library and the jQuery Simple Fullwidth Slider plugin in your web project.
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script> <script src="simplefullwidthslider.js"></script>
2. Add images and text into the slider following the html structure. You can pass the plugin options via data-*
attributes in the parent container.
<div class="slider" data-autoplay="0" data-items="1" data-easing="linear" data-duration="750" data-height="520"> <div class="single_slide" style="background-image: url('1.jpg'); ;"> <div class="slider_text"> </div> </div> <div class="single_slide active" style="background-image: url('2.jpg');"> <div class="slider_text"> </div> </div> <div class=" single_slide" style="background-image: url('3.jpg');"> <div class="slider_text"> </div> </div> <div class=" single_slide" style="background-image: url('4.jpg');"> <div class="slider_text"> </div> </div> <div class=" single_slide" style="background-image: url('5.jpg');"> <div class="slider_text"> </div> </div> </div>
3. Add the following CSS snippets into your CSS file.
body { overflow-x: hidden } .slider { list-style: none; display: block; width: 100%; overflow: hidden; position: relative; } .slider .single_slide { float: left; display: block; margin: 0; padding: 0; border-radius: 0px; overflow: hidden; opacity: 0.15; width: 1260px; height: 520px; cursor: pointer; -webkit-transition: opacity 800ms ease-in-out; transition: opacity 800ms ease-in-out; background-size: cover; background-position: 0% 0%; background-repeat: no-repeat; } .slider .single_slide.active { opacity: 1; cursor: default; -webkit-transition: opacity 800ms ease-in-out; transition: opacity 800ms ease-in-out; }
4. That's it. Click on the next/prev slide to cycle through thees images.
This awesome jQuery plugin is developed by dingo-d. For more Advanced Usages, please check the demo page or visit the official website.