Nachos Pillage Milwaukee
    Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

    jquery-simple-slideshowpublic

    jquery-simple-slideshow

    This is a simple jQuery-based slideshow. It will not require a pre-defined complex HTML structure. All that is needed is for 1 original to be added to the HTML. 2 Clones will be created at exactly the place of the original image, and will start iterating the images according to the desired config.

    Usage

    Example 1

    • 10 second display time
    • 1 second fade time
    • previous & next buttons
    • 3 images, all clickable to 3 links
    • random images

    Looks like:

    <img id="slideshow" src="path/to/initial/file.jpg" />
    <a href="#" id="prev">Previous</a>
    <a href="#" id="next">Next</a>
     
    <script src="jquery.min.js" /> <!-- path to jQuery -->
    <script src="jquery.simple.slideshow.js" /> <!-- path to slideshow script -->
    <script>
        $('#slideshow').simpleSlideshow({
            fadeTime: 10000,
            fadeSpeed: 1000,
            bindPrevious: $('#prev'), // bind button to previous image 
            bindNext: $('#next'), // bind button to next image 
            images: [
                'path/to/initial/file.jpg',
                'path/to/second/file.jpg',
                'path/to/another/file.jpg',
            ],
            links: [
                'http://www.mullie.eu',
                'http://www.twitter.com/matthiasmullie',
                'http://www.linkedin.com/in/matthiasmullie',
            ],
            random: true
        });
    </script> 

    Example 2

    • Image-specific controls
    • Image paths tossed in as data-attribute

    Looks like:

    <img id="slideshow" src="path/to/initial/file.jpg" data-images="path/to/initial/file.jpg,path/to/second/file.jpg,path/to/another/file.jpg" />
    <a href="#" class="controls">1</a>
    <a href="#" class="controls">2</a>
    <a href="#" class="controls">3</a>
     
    <script src="jquery.min.js" /> <!-- path to jQuery -->
    <script src="jquery.simple.slideshow.js" /> <!-- path to slideshow script -->
    <script>
        $('#slideshow').simpleSlideshow({
            bindSpecific: $('.controls'), // bind image-specific buttons 
        });
    </script> 

    Options

    Options can be passed in as a { key: value } object literal. Available options are:

    property default value description
    fadeTime 5000 The duration for which an image will be displayed, in milliseconds
    fadeSpeed 'normal' The animation time during which the image will fade out, in milliseconds
    bindPrevious jQuery element(s) that, when clicked, should display the previous image
    bindNext jQuery element(s) that, when clicked, should display the next image
    bindSpecific jQuery element(s) that, when clicked, should display a specific image. First element will be bound to first image, second element to second image, ...
    images Array of paths for image to be displayed. Paths can also be defined via the slideshow element's data-images attribute
    links Optional array of links to make images clickable, tied by index to the array of images. Paths can also be defined via the slideshow element's data-links attribute
    random false Randomize the images' display order

    Installation

    Install this package via npm:

    npm install jquery-simple-slideshow

    Or simply copy jquery.simple.slideshow.js into your project.

    License

    jquery-simple-slideshow is MIT licensed.

    install

    npm i jquery-simple-slideshow

    Downloadslast 7 days

    0

    version

    1.0.1

    license

    MIT

    repository

    github.com

    last publish

    collaborators

    • avatar