Using Flux Slider jQuery plugin

How to use Flux slider plugin

Using Flux Slider jQuery plugin

Today I will make review (example of implementation) of fresh and cool slider plugin – Flux. This slider using CSS3 animation with great transition effects (like: bars, zip, blinds, blocks, concentric, warp). And, what is most great – now it can support 3D transitions too (bars3d, cube, tiles3d, Blinds3D effects). Of course, not all browsers support 3D transitions (I tested in Chrome – can confirm that it working here).

Here are list of supported browsers:

  • Chrome
  • Firefox 4
  • iOS
  • Opera 11
  • Safari

Firstly – you can download our package and check demo:

Live Demo
download in package

Lets start coding !


Step 1. HTML

Here are source code of our sample:

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8 />
        <title>Flux Slider example</title>
        <link rel="stylesheet" href="css/main.css" type="text/css" />
        <script src="js/jquery-1.5.2.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/flux.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/main.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div class="example">
            <h3><a href="#">Flux Slider example</a></h3>

            <div id="slider">
                <img src="data_images/pic1.jpg" alt="" />
                <img src="data_images/pic2.jpg" alt="" />
                <img src="data_images/pic3.jpg" alt="" />
                <img src="data_images/pic4.jpg" alt="" />
                <img src="data_images/pic5.jpg" alt="" />
                <img src="data_images/pic6.jpg" alt="" />
                <img src="data_images/pic7.jpg" alt="" />
                <img src="data_images/pic8.jpg" alt="" />
                <img src="data_images/pic9.jpg" alt="" />
                <img src="data_images/pic10.jpg" alt="" />
            </div>

            <hr />
            <div id="transitions">
                <ul id="trans2D" class="transitions">
                    <li><b>2D Transitions</b></li>
                    <li><a href="#" id="bars">Bars</a></li>
                    <li><a href="#" id="zip">Zip</a></li>
                    <li><a href="#" id="blinds">Blinds</a></li>
                    <li><a href="#" id="blocks">Blocks</a></li>
                    <li><a href="#" id="concentric">Concentric</a></li>
                    <li><a href="#" id="warp">Warp</a></li>
                </ul>
                <ul id="trans3d" class="transitions">
                    <li><b>3D Transitions</b></li>
                    <li><a href="#" id="bars3d">Bars3D</a></li>
                    <li><a href="#" id="cube">Cube</a></li>
                    <li><a href="#" id="tiles3d">Tiles3D</a></li>
                    <li><a href="#" id="blinds3d">Blinds3D</a></li>
                </ul>
                <ul id="controls">
                    <li><b>Controls</b></li>
                    <li><a href="#" id="start">Play</a></li>
                    <li><a href="#" id="stop">Pause</a></li>
                    <li><a href="#" id="next">Next</a></li>
                    <li><a href="#" id="prev">Prev</a></li>
                </ul>
            </div>
            <div id="warn" style="display:none"></div>
        </div>
    </body>
</html>

This page contain set of images (for slider), and different extra controls (this is not necessary of course, but it will demonstrate all possibilities): for selecting transitions effect for next image, and for control: Play/Pause/Next/Prev buttons.

Step 2. CSS

Here are used CSS file with styles of our demo:

css/main.css

body{background:#eee;margin:0;padding:0}
.example{background:#FFF;width:500px;border:1px #000 solid;margin:20px auto;padding:15px;-moz-border-radius: 3px;-webkit-border-radius: 3px}

/*customization of slider*/

#slider {
    padding:15px 0;
}
#slider .pagination {
    list-style:none outside none;
    padding:15px !important;
}
#slider .pagination li {
    cursor:pointer;
    display:inline-block;
    margin-left:0;
    background-color:#888;
    border-radius:10px 10px 10px 10px;
    height:8px;
    text-indent:10000px;
    width:8px;
}
#slider .pagination li.current {
    background-color:#000;
}
#transitions {
    overflow:hidden;
}
#transitions ul {
    float:left;
    list-style:none outside none;
    padding:0;
    width:33%;
}
#transitions ul#trans2D {
    text-align:right;
}
#transitions ul li {
    margin:0 10px;
}

#warn {
    font-weight:bold;
    text-align:center;
}

All styles of that slider – customizable. You can wrap whole gallery with border, apply any background color, change styles of pagination elements – anything what you want.

Step 3. JS

Here are all JS files:

js/main.js

$(function(){
    // if browser not support transitions at all - we will display some warn message
    if (! flux.browser.supportsTransitions) {
        $('#warn').text('Flux Slider requires a browser that supports CSS3 transitions').show();
    }

    window.mf = new flux.slider('#slider', {
        autoplay: true,
        pagination: true,
        delay: 5000
    });

    // binding onclick events for our transitions
    $('.transitions').bind('click', function(event) {
        event.preventDefault();

        // we will inform member is any 3D transform not supported by browser
        if ($(event.target).closest('ul').is('ul#trans3d') && ! flux.browser.supports3d) {
            $('#warn').text("The '"+event.target.innerHTML+"' transition requires a browser that supports 3D transforms");
            $('#warn').animate({
              opacity: 'show'
            }, 1000, '', function() {
                $(this).animate({opacity: 'hide'}, 1000);
            });
            return;
        }

        // using custom transition effect
        window.mf.next(event.target.id);
    });

    $('#controls').bind('click', function(event) {
        event.preventDefault();

        var command = 'window.mf.'+event.target.id+'();';
        eval(command);
    });
});

Initialization itself very easy – via calling its constructor: new flux.slider. As params – we pointing selector of our slider (‘#slider’), and set of params: autoplay, pagination, delay. We can also set another one param: transitions (as array) with all names of the transitions to use. Here are all another necessary files:

js/jquery-1.5.2.min.js and js/flux.min.js

This is default jQuery library and our new plugin. Available in our package.


Live Demo
download in package

Conclusion

Today I told you how to build slider using flux plugin. Sure that you will happy to use it. Good luck!

Enjoyed this Post?

If you enjoy our articles, feel free to share our tutorials with your friends.

20 thoughts on “Using Flux Slider jQuery plugin

  1. Wow!.. 3D is super…But it works only in Safari. Chrome and FF not working. How to add caption to the pics ??

    • Hi kumar,
      As I read in documentation – here are no support for adding captions/titles.
      But it allow to create custom transitions. And possible it will allow you to add code to display captions too.
      By default – it generating DIV with background image (our listed images). So as I see – we will need or change sources of this slider (to display custom titles) or make custom transition effect.

    • 2 lucapost
      Yes, of course, firstly what you should to create – duplicate and image set and controls. After – assign another ID for your second slider (not same – slider), And then – adjust JS to work with your second copied version too.

    • Commonly you can enable/disable pagination. But, whole html+css already opened, you can try to play with styles and make own necessary styles for each pagination element

  2. Hi Andrew! Thanks for this great tutorial, it helped me a lot, but I need some more help. I have the flux on my website now, but I don’t know where I should change the functions, if I only want the transition to be block. Would you be so nice to write it to me? Thanks a lot!!!

    • Hi Regina, please pay attention to line 29 of our code:
      window.mf.next(event.target.id);
      it turns slides using selected (by id) method, if you need only ‘block’, you can change it to:
      window.mf.next(‘blocks’);

    • Hi tcetin,
      I am not sure if the Flux plugin is restricted to use only JPG format. I suppose that it supports all image formats (png/gif/bmp)

  3. Dear I really love your BLOCK effect
    Can you please modify your code for just BLOCK style banner ? I dont want other styles apply on the same slider so can you please modify only BLOCK code with 1500X700 size banner so that i will emebed on my page. I dont have any idea about JS etc….
    Thanks

  4. Thank for great post. Just one question, it is possible to stop rotation on mouse over or/and next-prev click and continue on mouse leave div#slider

  5. Hello mate, thanks a lot for this tutorial,
    I followed it and it worked great, but I have a slight problem

    when I use transparent PNGs, I can see the images stacked up one on top of the other,
    is there a work around?

    Thanks in advance

    Arnaud

    • Hello Arnaud,
      I haven’t tried to use it for transparent PNG files, however it works good with non-transparent images (JPG and PNG). If you prepare any online example (and send me it’s URL to my email), I can have a look.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

     

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>