CodeCanyon

Full Width Slider 2

Full Width Slider 2

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.

by
by
by
by
by
by