Using Flux Slider jQuery plugin

Using Flux Slider jQuery plugin

26 2377
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

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

Conclusion

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

SIMILAR ARTICLES

Practice with Text Shadows

0 254
Responsive HTML Email Template

0 468

26 COMMENTS

  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.

  2. Hello,

    nice tutorial, just wanted to ask you if there’s a way to turn the pagination into small images.

    thanks in advance

    • 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

  3. 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)

  4. 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

  5. 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

  6. 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.

  7. Hey Andrey,
    this is a really nice slide show, thank you for the tutorial.

    I have two questions for you

    I’ve read others comments and tried to implement multiple transitions but didn’t got it right:
    transitions: ['cube' (let say i want some more here)]

    Is there a way to make it responsive? What would be your approach?

    • hharrr ok. Just paid me a visit on google to find out the way to build an array
      transitions:['cube', 'bars3d', 'etc']

      but the responsive (fluid, scalable) question still stand please.

      • Hi Dominic,
        In order to make it responsive, you need to get rid of all limits (of the ‘width’ param). Try to comment it, or make it in % (for example – 100%)

  8. Hi,

    fluxsilder gives me two divs at runtime. Both have class=fluxslider attached to it.

    how to avoid 2nd div .

    Thanx.

    • Hi HJ,
      I am not sure about it. You should get two divs with images (.image1 and .image2), but not two divs with the same class .fluxslider

  9. Hello Arnaud,

    Could you please show me how to write the code to change the delay integer so it higher then 4000. I tried …. delay: 5000

    sure I have it wrong. Great job on the slider!

    Thanks, Shane

Leave a Reply