bdwebteam / fs-slideshow

a fullscreen css3 slideshow

FS Slideshow

A minimal full screen slideshow jquery plugin intended for use in other projects as a boilerplate or just as is.

characteristics:

• easy to adjust
• supports only newer browsers
• css3 transitions
• only one slideshow per page
• manually trigger sliding
• play / pause

TODO

• add pause/play to default initialized buttons
• move more variables to options
• add loading icon
• firefox, ie10

requirements

• jquery

usage

• require jquery & fs-slideshow script
• add markup for the content:

    <ol class="fs-slideshow">
        <li>
            <img class="fs-bg" alt="Cairn" src="img/Cairn_by_Sylvain_Naudin.jpg">
            This is the first slide.
        </li>
        <li>
            <img class="fs-bg" alt="Green Plant" src="img/Green_Plant_by_Simon_Schlegl.jpg">
            This is the second slide.
        </li>
        <li>
            <img class="fs-bg" alt="H" src="img/H_by_Manuel_Sagredo.jpg">
            This is the third slide.
        </li>
    </ol>

• add markup for the buttons (optional):

    <div class="fs-prev">
        <a href="#">BACK</a>
    </div>
    <div class="fs-next">
        <a href="#">NEXT</a>
    </div>

• initialize plugin

    // on document load
    $(function() {
        $('.fs-slideshow').fsSlideshow();
    });

arguments

1. options (Object): Initialize slideshow with given options

    $('.fs-slideshow').fsSlideshow({
        shuffle: true,
        autoPlay: true
    });

2. slideIndex (Number): Show slide with index

    // show 3rd slide
    $('.fs-slideshow').fsSlideshow(2);

3. next (String): Show next slide

    $('.fs-slideshow').fsSlideshow('next');

4. prev (String): Show previous slide

    $('.fs-slideshow').fsSlideshow('prev');

5. play [, timeout] (String, Number): Show next slide with an interval of timeout (default 5000ms)

    $('.fs-slideshow').fsSlideshow('play');
    $('.fs-slideshow').fsSlideshow('play', 8000);

6. pause (String): Pause playback

    $('.fs-slideshow').fsSlideshow('pause');