Home / Premium Pro Plugins / Full Width Slider 2

Full Width Slider 2

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading...Loading...



DOWNLOAD

Full Width Slider 2 is simple to make use of jQuery picture slider optimized for full display screen width.

Options

– jQuery pushed.
design.
– Adjustable transition pace.
– Auto slideshow with pause on hover.
– Suitable with all main browsers (IE8 and above , Chrome, Firefox, Safari and Opera)
– Can add Title, Description and Hyperlink button to every slide.

New Strategies:

addSlide - Provides slide to the slider
begin - Begins the slider
restart - Restart the slider
destroy - Take away the slider

New choices:

cs              - Present slide; zero - first, 1 - second and so forth...
expandDuration - Preliminary peak animation period, milliseconds
linktext - Button Textual content
titleHTML - Customized HTML for the Title (ex. <h4>%title%</h4>)
descriptionHTML - Customized HTML for the Description (ex. <p>%desc%</p>)
linkHTML – Customized HTML for the hyperlink button (ex. <a href="%hyperlink%">%linktext%</a>)
beforeInit – Perform to run earlier than slider init
afterInit – Perform to run after slider init
slideStart – Perform to run on slide begin, returns the slide object
slideEnd – Perform to run on slide finish, returns the slide object

Instance with all settings:

<script kind="textual content/javascript">

    $(doc).prepared(perform() 

        // Create new slider occasion
        var my_slider = $('.instance').fws2();

        //  Set slider settings (non-obligatory) You possibly can fully ignore this block
        my_slider.settings(
            cs              : zero, // Present slide; zero - first, 1 - second and so forth...
            period        : 750, // Slide period; milliseconds
            hoverpause      : 1, // Pause on hover; 1 - Sure, zero - No
            pause           : 6000, // Pause earlier than go to subsequent slide; milliseconds
            arrows          : 1, // Show arrows; 1 - Sure, zero - No
            bullets         : zero, // Show bullets; 1 - Sure, zero - No
            expandDuration  : 750,  // Show arrows; 1 - Sure, zero - No
            linktext        : 'Learn Extra',  // Button Textual content (International setting)

            // Superior choices
            titleHTML       : '<h4>%title%</h4>',  // Customized HTML for the Title
            descriptionHTML : '<p>%desc%</p>',  // Customized HTML for the Description
            linkHTML        : '<a href="%hyperlink%">%linktext%</a>', // Customized HTML for the hyperlink button

            beforeInit      : perform() , // Perform to run earlier than slider init 
            afterInit       : perform() , // Perform to run after slider init 
            slideStart      : perform(slide) , // Perform to run on slide begin, returns the slide object
            slideEnd        : perform(slide)  // Perform to run on slide finish, returns the slide object
        );

        // Including slide
        my_slider.addSlide(
            picture       : 'img/slide_1.jpg',   // Picture supply
            title       : 'Slide 1',           // Title
            description : 'Description',       // Slide Description
            linktext    : '',                  // Button Textual content (Elective, will use the worldwide settings in any other case )
            hyperlink        : 'http://web site'     // Learn Extra URL hyperlink
        );

        // Begin the slider
        my_slider.begin();

    );

</script>

Brief instance with out variable, utilizing chaining:

<script kind="textual content/javascript">

        $(doc).prepared(perform() 

            $('.example1')
                .fws2( bullets: 1, arrows: zero )
                .addSlide(picture: 'img/slide_1.jpg', title: 'Slide 1', description: 'Description', hyperlink: 'http://web site')
                .addSlide(picture: 'img/slide_2.jpg', title: 'Slide 2', description: 'Description', hyperlink: 'http://web site')
                .addSlide(picture: 'img/slide_3.jpg', title: 'Slide three', description: 'Description', hyperlink: 'http://web site')
                .begin();

    );

</script>

Instance utilizing callback perform

<script kind="textual content/javascript">

    $(doc).prepared(perform() 

        var example_slider = $('.example2').fws2();

        example_slider.settings(
            afterInit: perform()
                    alert('Slider prepared!');
            ,
            slideEnd: perform (slide) 
                var title = slide.discover(".title").textual content();
                alert('That is ' + title);
            
        );

        example_slider.addSlide(picture: 'img/slide_1.jpg', title: 'Slide 1', description: 'Description', hyperlink: 'http://web site');
        example_slider.addSlide(picture: 'img/slide_2.jpg', title: 'Slide 2', description: 'Description', hyperlink: 'http://web site');
        example_slider.addSlide(picture: 'img/slide_3.jpg', title: 'Slide three', description: 'Description', hyperlink: 'http://web site');

        example_slider.begin();

    );

</script>

Instance customizing HTML

<script kind="textual content/javascript">

    $(doc).prepared(perform() 

        var example_slider = $('.example4').fws2();

            example_slider.settings(
                titleHTML        : '<h1><a href="%hyperlink%">%title%</a></h1>',
                descriptionHTML  : '<p><i class="fa fa-check" /> <span>%desc%</span></p>', 
                linktext         : 'Learn extra',
                linkHTML         : '<a href="%hyperlink%">%linktext% about %title%</a>'
            );

        example_slider
                .addSlide(picture: 'img/slide_1.jpg', title: 'Slide 1', description: 'Description', hyperlink: 'http://web site')
                .addSlide(picture: 'img/slide_2.jpg', title: 'Slide 2', description: 'Description', hyperlink: 'http://web site')
                .addSlide(picture: 'img/slide_3.jpg', title: 'Slide three', description: 'Description', hyperlink: 'http://web site')
                .begin();

    );

</script>

Keep updated!

Observe us on Fb or Twitter and get newest information about merchandise updates and upcoming plugins and scripts!

You can too comply with us on Instagram and shortly on YouTube with video tutorials on the best way to set up our plugins and scripts!

Changelog

February 22, 2016

– Bug repair the place autoslide wasn’t working if arrows had been set to zero.

February three, 2016

– Added alt title for the photographs.

January eight, 2016

– Added swipe occasions for cell units

December eight, 2015

– Javascript code has been rewritten.
– imagesloaded.js script is now non-obligatory.
– HTML has been eliminated. It’s now fully construct from the javascript.
– Google font hyperlink is faraway from the pinnacle as it’s not used.
– Slider is now initialized through the use of $(selector).fws2();

– New Strategies:

addSlide - Provides slide to the slider
begin - Begins the slider
restart - Restart the slider
destroy - Take away the slider

– New choices:

cs              - Present slide; zero - first, 1 - second and so forth...
expandDuration - Preliminary peak animation period, milliseconds
linktext - Button Textual content
titleHTML - Customized HTML for the Title (ex. <h4>%title%</h4>)
descriptionHTML - Customized HTML for the Description (ex. <p>%desc%</p>)
linkHTML – Customized HTML for the hyperlink button (ex. <a href="%hyperlink%">%linktext%</a>)
beforeInit – Perform to run earlier than slider init
afterInit – Perform to run after slider init
slideStart – Perform to run on slide begin, returns the slide object
slideEnd – Perform to run on slide finish, returns the slide object

April 10, 2014

– Slider now helps a number of situations on the web page.
– Added bullets navigation.
– Arrow / Bullets navigation may be turned ON/OFF now.
– Added choice to disable autoslide cease on mouseover.
– Slider now makes use of font-awesome as an alternative of pictures for the navigation arrows and bullets.
– Added keyboard left/proper arrow navigation.


DOWNLOAD

Check Also

banner-iosr-copy.png

Store Finder IOS Full Application – Swift 3

DOWNLOAD Retailer Finder is Full IOS Utility to go looking Retailer close to by you. ...

envato-inline-preview.png

Square Thief iOS Game Universal Swift Source Code

DOWNLOAD Premium Common sport. Will work on iPhones, iPad, iPad air, iPhone 6, iPhone 6+ ...