Full Width Slider 2 is straightforward to use jQuery image slider optimized for complete screen width.
Options
- jQuery pushed.
- Responsive design.
- Adjustable transition pace.
- Car slideshow with pause on hover.
- Compatible with all top browsers (IE8 and above , Chrome, Firefox, Safari and Opera)
- Can upload Title, Description and Link button to every slide.
New Methods:
get started - Starts the slider
restart - Restart the slider
destroy - Do Away With the slider
New options:
expandDuration - Preliminary peak animation period, milliseconds
linktext - Button Text
titleHTML - Customized HTML for the Title (ex. <h4>%name%</h4>)
descriptionHTML - Customized HTML for the outline (ex. <p>%desc%</p>)
linkHTML – Customized HTML for the link button (ex. <a href="%link%">%linktext%</a>)
beforeInit – Function to run ahead of slider init
afterInit – Serve As to run after slider init
slideStart – Serve As to run on slide get started, returns the slide item
slideEnd – Serve As to run on slide end, returns the slide object
Example with all settings:
<script sort="textual content/javascript"> $(report).ready(function() // Create new slider instance var my_slider = $('.example').fws2(); // Set slider settings (optional) You can completely ignore this block my_slider.settings(); // Adding slide my_slider.addSlide( image : 'img/slide_1.jpg', // Image source title : 'Slide 1', // Title description : 'Description', // Slide Description linktext : '', // Button Text (Optional, will use the global settings otherwise ) link : 'http://website' // Read More URL link ); // Get Started the slider my_slider.get started(); }); </script>Brief example without variable, the usage of chaining:
<script kind="textual content/javascript"> $(report).ready(serve as() $('.example1') .fws2(); </script>Example using callback function
<script type="textual content/javascript"> $(file).ready(function() var example_slider = $('.example2').fws2(); example_slider.settings(); example_slider.addSlide(image: 'img/slide_1.jpg', title: 'Slide 1', description: 'Description', link: 'http://website'); example_slider.addSlide(image: 'img/slide_2.jpg', title: 'Slide 2', description: 'Description', link: 'http://website'); example_slider.addSlide(image: 'img/slide_3.jpg', title: 'Slide 3', description: 'Description', link: 'http://website'); example_slider.start(); }); </script>Instance customizing HTML
<script sort="textual content/javascript"> $(file).ready(function() var example_slider = $('.example4').fws2(); example_slider.settings(); </script>not sleep thus far!
Apply us on Facebook or Twitter and get recent news about merchandise updates and upcoming plugins and scripts!
you can also apply us on Instagram and shortly on YouTube with video tutorials on learn how to install our plugins and scripts!
Changelog
February 22, 2016
- Malicious Program repair where autoslide wasn’t operating if arrows have been set to ZERO.
February 3, 2016
- Delivered alt name for the images.
January 8, 2016
- Brought swipe occasions for mobile devices
December EIGHT, 2015
- Javascript code has been rewritten.
- imagesloaded.js script is now optional.
- HTML has been got rid of. it is now completely construct from the javascript.
- Google font link is far from the top because it is no longer used.
- Slider is now initialized by utilizing $(selector).fws2();
- New Strategies:
start - Begins the slider
restart - Restart the slider
damage - Get Rid Of the slider
- New options:
expandDuration - Preliminary height animation length, milliseconds
linktext - Button Text
titleHTML - Customized HTML for the Name (ex. <h4>%name%</h4>)
descriptionHTML - Customized HTML for the outline (ex. <p>%desc%</p>)
linkHTML – Customized HTML for the hyperlink button (ex. <a href="%link%">%linktext%</a>)
beforeInit – Serve As to run before slider init
afterInit – Function to run after slider init
slideStart – Serve As to run on slide get started, returns the slide object
slideEnd – Function to run on slide end, returns the slide item
April 10, 2014
- Slider now supports more than one circumstances on the page.
- Brought bullets navigation.
- Arrow / Bullets navigation will also be grew to become ON/OFF now.
- Introduced strategy to disable autoslide prevent on mouseover.
- Slider now makes use of font-awesome in preference to pictures for the navigation arrows and bullets.
- Added keyboard left/right arrow navigation.
FULL DOWNLOAD
No comments:
Post a Comment