WorldWideScripts.net Delivering the best Add-Ons in more than 37 languages.

中文(简体), English, हिन्दी/हिंदी, Español/Castellano, العربية, Русский язык, Français, 中文 (台灣), বাংলা, Bahasa Indonesia, اردو, Português, Deutsch, Bahasa Melayu (بهاس ملايو‎), 日本語 (にほんご), فارسی, Italiano, తెలుగు, Türkçe, ગુજરાતી, Język polski/polszczyzna, Tiếng Việt, ಕನ್ನಡ, Українська мова, ไทย
JavaScript / Sliders

Full Width Slider 2

— Add-On to WorldWideScripts.net

Subscribe to our feed to stay up to date!

New! Follow us as you want it!


Full Width Slider 2 - CodeCanyon Item for Sale

Ads

Ad: Bluehost hosting

Full Width Slider 2 is easy to use jQuery image slider optimized for full screen width.

Features

- jQuery driven.
- Responsive design.
- Adjustable transition speed.
- Auto slideshow with pause on hover.
- Compatible with all major browsers (IE8 and above, Chrome, Firefox, Safari and Opera)
- Can add Title, Description and Link button to each slide.

New Methods:

addSlide - Adds slide to the slider
start - Starts the slider
restart - Restart the slider
destroy - Remove the slider

New options:

cs - Current slide; 0 - first, 1 - second etc...
expandDuration - Initial height animation duration, milliseconds
linktext - Button Text
titleHTML - Custom HTML for the Title (ex. <h4>%title%</h4>)
descriptionHTML - Custom HTML for the Description (ex. <p>%desc%</p>)
linkHTML – Custom HTML for the link button (ex. <a href="%link%">%linktext%</a>)
beforeInit – Function to run before slider init
afterInit – Function to run after slider init
slideStart – Function to run on slide start, returns the slide object
slideEnd – Function to run on slide end, returns the slide object

Example with all settings:

 <script type="text/javascript"> $(document).ready(function() { // Create new slider instance var my_slider = $('.example').fws2(); // Set slider settings (optional) You can completely ignore this block my_slider.settings({ cs : 0, // Current slide; 0 - first, 1 - second etc... duration : 750, // Slide duration; milliseconds hoverpause : 1, // Pause on hover; 1 - Yes, 0 - No pause : 6000, // Pause before go to next slide; milliseconds arrows : 1, // Display arrows; 1 - Yes, 0 - No bullets : 0, // Display bullets; 1 - Yes, 0 - No expandDuration : 750, // Display arrows; 1 - Yes, 0 - No linktext : 'Read More', // Button Text (Global setting) // Advanced options titleHTML : '<h4>%title%</h4>', // Custom HTML for the Title descriptionHTML : '<p>%desc%</p>', // Custom HTML for the Description linkHTML : '<a href="%link%">%linktext%</a>', // Custom HTML for the link button beforeInit : function() {}, // Function to run before slider init afterInit : function() {}, // Function to run after slider init slideStart : function(slide) {}, // Function to run on slide start, returns the slide object slideEnd : function(slide) {} // Function to run on slide end, returns the slide object }); // 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 }); // Start the slider my_slider.start(); }); </script> 

Short example without variable, using chaining:

 <script type="text/javascript"> $(document).ready(function() { $('.example1').fws2({ bullets: 1, arrows: 0 }).addSlide({image: 'img/slide_1.jpg', title: 'Slide 1', description: 'Description', link: 'http://website'}).addSlide({image: 'img/slide_2.jpg', title: 'Slide 2', description: 'Description', link: 'http://website'}).addSlide({image: 'img/slide_3.jpg', title: 'Slide 3', description: 'Description', link: 'http://website'}).start(); }); </script> 

Example using callback function

 <script type="text/javascript"> $(document).ready(function() { var example_slider = $('.example2').fws2(); example_slider.settings({ afterInit: function(){ alert('Slider ready!'); }, slideEnd: function (slide) { var title = slide.find(".title").text(); alert('This is ' + title); } }); 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> 

Example customizing HTML

 <script type="text/javascript"> $(document).ready(function() { var example_slider = $('.example4').fws2(); example_slider.settings({ titleHTML : '<h1><a href="%link%">%title%</a></h1>', descriptionHTML : '<p><i class="fa fa-check" /> <span>%desc%</span></p>', linktext : 'Read more', linkHTML : '<a href="%link%">%linktext% about %title%</a>' }); example_slider.addSlide({image: 'img/slide_1.jpg', title: 'Slide 1', description: 'Description', link: 'http://website'}).addSlide({image: 'img/slide_2.jpg', title: 'Slide 2', description: 'Description', link: 'http://website'}).addSlide({image: 'img/slide_3.jpg', title: 'Slide 3', description: 'Description', link: 'http://website'}).start(); }); </script> 

Stay up to date!

Follow us on Facebook or Twitter and get latest news about item updates and upcoming plugins and scripts!

You can also follow us on Instagram and soon on YouTube with video tutorials on how to install our plugins and scripts!

Changelog

December 8, 2015

- Javascript code has been rewritten.
- imagesloaded.js script is now optional.
- HTML has been removed. It is now completely build from the javascript.
- Google font link is removed from the head as it is no longer used.
- Slider is now initialized by using $(selector).fws2();

- New Methods:

addSlide - Adds slide to the slider
start - Starts the slider
restart - Restart the slider
destroy - Remove the slider

- New options:

cs - Current slide; 0 - first, 1 - second etc...
expandDuration - Initial height animation duration, milliseconds
linktext - Button Text
titleHTML - Custom HTML for the Title (ex. <h4>%title%</h4>)
descriptionHTML - Custom HTML for the Description (ex. <p>%desc%</p>)
linkHTML – Custom HTML for the link button (ex. <a href="%link%">%linktext%</a>)
beforeInit – Function to run before slider init
afterInit – Function to run after slider init
slideStart – Function to run on slide start, returns the slide object
slideEnd – Function to run on slide end, returns the slide object

April 10, 2014

- Slider now supports multiple instances on the page.
- Added bullets navigation.
- Arrow / Bullets navigation can be turned ON/OFF now.
- Added option to disable autoslide stop on mouseover.
- Slider now uses font-awesome instead of images for the navigation arrows and bullets.
- Added keyboard left/right arrow navigation.


Download
Other components in this categoryAll components of this author
CommentsFrequently asked questions and answers

Properties

Created:
16 November 12

Last Update:
8 December 15

High Resolution:
Yes

Compatible Browsers:
IE8, IE9, IE10, IE11, Firefox, Safari, Opera, Chrome

Files Included:
JavaScript JS, HTML, CSS

Software Version:
jQuery

Keywords

eCommerce, eCommerce, All Items, full, javascript, jquery, js, responsive, slider, slideshow, width