Full Width Slider 2

Full Width Slider 2 Created by Stachethemes. This templates have specific characteristics, namely: Full Width Slider 2 is easy to use jQuery image slider optimized for full screen .

You can use this Full Width Slider 2 on Javascript category for full, javascript, jquery, js, responsive, slider, slideshow, width and another uses.

Full Width Slider 2
© Copyright by Stachethemes

Main Features:

  • Video preview resolution: None
  • Software version: jQuery
  • High resolution: Yes
  • Compatible browsers: IE8, IE9, IE10, IE11, Firefox, Safari, Opera, Chrome, Edge
  • Files included: JavaScript JS, HTML, CSS

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

February 22, 2016

– Bug fix where autoslide wasn’t working if arrows were set to 0.

February 3, 2016

– Added alt title for the images.

January 8, 2016

– Added swipe events for mobile devices

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.