iView Slider (jQuery)

iView has been stopped!

iView has been stopped from update and support!
You can use our new powerful mightySlider plugin.

  Go to mightySlider  

What is iView?

iView is easy to use jQuery image slider with animated captions, responsive layout and HTML Elements like (Video, iFrame) slider. Easily add unlimited number of slides and captions. Use it as image slider, image gallery, banner rotator, banner ads, or even presentation.

This jQuery plugin uses unobstrusive javascript to transform a block of simple HTML markup into a georgous elegant slider, which can be completely customized using HTML5 data attributes. The markup is valid HTML5 and SEO optimzied, with all content always being available to search engines. When using this plugin, your page layout will be consistent even if javascript has been disabled.

This slider includes 35 transition effects which is completely configurable and compatible with all major browsers (including ie6 to ie9, Firefox, Chrome, Opera, Safari) and mobile platforms like iOS / Android.

Multiple customized slider instances can happily live on the same page, and the slider offers a simple API to control the slider’s behaviour from within your custom scripts.

To drastically reduce page loading times, preloading is available on a per slider basis, so that images will only be loaded right before the slider to be started.

Features

  • jQuery Capabilities.
  • Responsive down to mobile (applies for slider area and images).
  • Touch gestures navigation for iOS, Android and other touch devices.
  • Highly Flexible and Customizable.
  • Highly User Interface Design.
  • Custom per slide easing.
  • Multilanguage support.
  • 35 transition effects available.
  • Multiple transitions available, also can set a different transition per slide.
  • Multiple instances allowed in a single HTML page.
  • Custom per slide timeout.
  • Animated HTML captions with custom effects (fade, move top, move right…).
  • Slides uses only valid HTML5 markup (SEO optimized).
  • Works on iOS & Android devices.
  • Auto slideshow with optional pause on hover.
  • Easily resizable.
  • Animated preloader bar.
  • Keyboard support.
  • Extremely simple configuration.
  • Thumbnails or bullets for navigation.
  • Customizable transition timing function. (easing)
  • Compatible with external fonts (like Google fonts).
  • Integrated 3 beautiful animated and Cross-browser timers which is completely configurable.
  • Easily customizable via CSS file.
  • Block & slice sizes are configurable.
  • Captions can use any tag you want (SEO optimized).
  • Extended HTML documentation.
  • Any HTML content can be placed inside slide & caption. (except HTML5 video tag)
  • SEO optimized, captions can use any tag you want (“h1”, “h2”, “p”…).
  • Powerful, documented API — public methods, properties, callbacks (go to slide, play slideshow e.t.c.).
  • Unlimited slides support.
  • Compatible with all major browsers (including IE6 to IE9 , Chrome, Firefox, Safari and Opera)
  • Free support and upgrades.

Dont forget to follow us on twitter or like our page on facebook :-)
and take a look at our premium scripts too ;-)

Demo Download Fork the code on GitHub

Changelog

Version 2.0.1

2012-08-17 Hemn Chawroka
    * Fixed video stop bug.
109 replies
  1. Michael
    Michael says:

    Hi, very very good Slider, but i can’t download without Twitter/Facebook-Account. I would not create one for this to download. Could you provide an alternative download?

  2. Jimbob
    Jimbob says:

    Would love to try this, the “Share & Download” link doesn’t work, at least on Chrome for Mac. Please just give us a .zip file, I might consider liking it on FB then… ;-/

  3. Joseph Levin
    Joseph Levin says:

    Hemm,

    I really like your slider application. It’s great. At least at first glance. I can’t say fully whether I like it as I have not been able to actually try and implement it yet, since it took quite awhile to be able to actually download the thing. Therein lies the issue with essentially forcing people to “like” your app via Facebook and/or Twitter before having an opportunity to test it in action with one’s own media. I do appreciate your generosity in providing your slider free-of-charge (that is, after all, a truly wonderful thing); I will say that it is a little disingenuous and flies in the face of a generous act to require liking the app before being able to even download it, especially when people are having issues using the “share and get it” intermediary; I was not able to use Facebook to successfully download the app, and had to sign up for a Twitter account that I did not want, to eventually be able to download the slider from that route. A much better solution would be to provide a direct link, as some have suggested, then ask for folks to “like” your app from there. Assuming your app would live up to the technical demo you have shown (and I have no doubt that it would), you’d likely then, in addition to people “liking” your app, also likely have them paying some cash for it out of gratitude. Please accept what I’ve written only as constructive criticism. Take care & thanks again.

  4. Joseph Levin
    Joseph Levin says:

    Hemm,

    I appreciate your responsiveness and your willingness to listen to people that view your site and leave commentary. Both are somewhat rare traits these days!

    I am sure that future visitors to your site will appreciate being able to download the file directly.

    Thank you, and take care! I will let you know if I’m able to use your slider in any project(s).

  5. John Sanford
    John Sanford says:

    Gotta say this looks pretty awesome, thanks for sharing.

    Found a minor bug with the demo, since I’m not sure if would fit into the slider. When you close the video window while the video is still playing, it keeps playing in the background. I haven’t had a chance to implement this control quite yet, but I hope there is a way to attach to that window close event (clicking the X in the top right) so that people can implement their specific video stop() methods.

    Sharing this on GitHub or BitBucket might be a great way to get feedback, track issues, and maybe even get some people that want to help you extend your plugin.

    Thanks again for this great responsive slider.

    • Marcel Rossouw
      Marcel Rossouw says:

      I see Hemn hasn’t responded to this but I think is critical in being able to actually close (stop) the video if the slider carries on. What is the point in having the video there as an eg but carries on playing if you want to add other videos or normal images after.

      As I’ve mentioned before I would love to use this slider as a video gallery slider but the videos don’t stop.
      Would it be possible to add closing (stopping) the video together with what it currently does (animation reverts to videobgd)?

      • Marcel Rossouw
        Marcel Rossouw says:

        Hemn, I’ve managed to add 3 lines of code that upon clicking the X button on the video it stops the video but the only thing is it obviously doesn’t revert back to slider. Is there a way to add this in and let it as it will solve the issue with videos still playing in the background.

        The added lines are in the iview.js file line 359 and is:

        //Bind the video closer
        $(‘.iview-video-close’, iv.slider).click(function(){
        var video = $(this).parents(‘.iview-video-show’);

        var video = $(“#iframe”).attr(“src”);
        $(“#iframe”).attr(“src”, “”);
        $(“#iframe”).attr(“src”, video);

        video.animate({ top: ‘-‘ + iv.defs.height + ‘px’ }, 1000, ‘easeOutBounce’, function(){
        video.hide();
        iv.sliderContent.trigger(‘iView:play’);
        });
        });
        };

        I’m not sure if this added code should be in the *Bind Video Display* ?

        • Marcel Rossouw
          Marcel Rossouw says:

          Hemn, Thank you for your time and effort. May I ask is it just the iview.js file that has been updated or more? just want to know if I must look at reusing more than 1 file.

          With all these minor things we pick up on and it gets fixed by you, it just makes this one of the best sliders out there to use!

        • Marcel Rossouw
          Marcel Rossouw says:

          This works great, thanks again Hemn. The X (close) button or layer is behind any Youtube embedded video so you cannot close it. It definately shows up correctly with Vimeo videos but not Youtube videos using the Index.html example.
          Please advise.

          • Marcel Rossouw
            Marcel Rossouw says:

            CORRECTION – The (X) close button DOES show infront using Youtube videos in latest Google Chrome but not in IE9 or the latest Mozilla Firefox 14.0.1…

    • Marcel Rossouw
      Marcel Rossouw says:

      This has been fixed in the lastet download files. Also see my post about what youtube type code to use in order to have the X appear above the iframe used.

    • Hemn Chawroka
      Hemn Chawroka says:

      No it’s not a problem just set the width of the caption.
      Read documntation for more details.

  6. Olafson
    Olafson says:

    Yo buddy, dis shit So damn fresh to me!!!

    Only one extrem small question:
    ——————————————————————————-
    In your documentation is:
    but i cant find dis iview.encoded.js file in the download folder. did i need dis?

    Respect!

    • Hemn Chawroka
      Hemn Chawroka says:

      Thank you buddy!
      No it’s not needed you can use iview.pack.js if you want to use packed version of iView.

  7. Nuno
    Nuno says:

    Great slider :) Congratulations for your awesome job !!

    I have one question. Is it possible to know the current slide number? So I can make my own navigation elsewhere in the page. Thank you once again!

    • Hemn Chawroka
      Hemn Chawroka says:

      Thank you so much Nuno, yes of course you can do it. Simply add this callback method:

      onAfterChange: function(){
      alert("Slide number: " + this.defs.slide);
      }

      Like:

      $(document).ready(function(){
      $('#iview').iView({
      pauseTime: 7000,
      directionNav: false,
      controlNav: true,
      tooltipY: -15,
      onAfterChange: function(){
      alert("Slide number: " + this.defs.slide);
      }
      });
      });

      And you can find out how to know the current slide number. :-)

  8. ivory
    ivory says:

    Hi, thank you so much for the script.
    May I ask how to add link to the whole image per slide? TQ.

    • Hemn Chawroka
      Hemn Chawroka says:

      Thank you so much Ivory,
      Just create slides via “<a>” tag instead “<div>”.
      Don’t forget to add some CSS styles like:

      a.slides {
      display:block;
      width: 500px;
      height: 300px;
      }

  9. Steve
    Steve says:

    Great slider one of the best I have come across one small problem I am using the banner size 728×90, but I need to use the size 572×117 I have edited and changed sizes in the relevant css files but I wont change the width height has changed ok but is still 728 px wide have you any idea how I can use my desired width?

    Thanks

    Steve

    • Hemn Chawroka
      Hemn Chawroka says:

      Thank you Steve,
      You must change the width of these two CSS element selectors:

      1. #iview
      2. #iview .iviewSlider”
  10. Nuno
    Nuno says:

    Hello again :) Having a great time with your slider :)
    Would you advise on a “best-way” to reload the plugin with a different set of slides?
    For instance, I start with slides 1, 2 and 3… and, when I click a button, I want to load a new set of slides. How can we do that? Thanks once more :)

  11. Sam
    Sam says:

    Hi ! Thanks for this, it’s awesome !

    Is it possible to add a link not in a caption, but on the complete picture ? People are use to click anywhere on a picture to follow a link, i don’t want to loose them.

    • Hemn Chawroka
      Hemn Chawroka says:

      Thanks a lot Sam.
      Yes of course it’s possible. Just make slides with a link element instead div element and style them with “display:block” in CSS file.

  12. Nuno F Silva
    Nuno F Silva says:

    Hello again Hemn :)

    Is there a way to set the animation fx on the previous or next trigger ? For instance, I want to slides to come from left when I click previous and from right when I click next.

    Thanks,
    Nuno

    • Hemn Chawroka
      Hemn Chawroka says:

      Hello Nuno,
      Yes it’s possible but with some tricks and by the help of the “onBeforeChange” callback.

    • Hemn Chawroka
      Hemn Chawroka says:

      Thanks a lot Francisco,
      Nothing, just download it and have fun! :-)
      The documentation is available in the download file.

      • mackk2
        mackk2 says:

        Ok indeed,
        I just got how it work, thanks.
        I have a question so :
        Is there any way to speed up the transition effect?
        Like when i use “strip-left-fade” fx , more the number of strip is high less the animation is quick.

          • mackk2
            mackk2 says:

            Hmm, the animationSpeed seems to affect the fx speed but not “slide” speed.
            Like when strip is set to 800 (its a lot but its for the example) the processing is very slow. Is there nothing for that?

  13. Niklas
    Niklas says:

    Hi Hemn!
    What a smooth and nice slider!
    I was blown away when I saw this for the first time…
    Can’t believe that some people start criticize your work when it’s a freebie…

    Niklas

  14. Marcel Rossouw
    Marcel Rossouw says:

    HI Hemn,

    Honestly, one of the best sliders out there. Its great! I emailed you but thought might be easier here.
    In Firefox 14.0.1 using a iframe with a youtube video for some reason doesn’t show up. It works great in IE9 and latest Google Chrome. In Mozilla, all you see is a black area. Vimeo eg you provide works fine but not youtube links. Is this possibly a z-index problem for Mozilla?

    • Hemn Chawroka
      Hemn Chawroka says:

      Hi dear Marcel.
      I’ve tested it with youtube video in both video preview and caption, and i don’t see any problem with youtube video.

      • Marcel Rossouw
        Marcel Rossouw says:

        Hi Hemn, thanks for getting back to me. Its definately only in Mozilla Firefox 14.0.1. I’ve tried a few youtube links, Vimeo vids are fine. Please could you send a working youtube link (code), as I’ve tested a few. There is also a minor problem with the captions, in Chrome they go behind the video. Seems like its a Z-index problem but works 100% in IE9 & Firefox 14.0.1.

        I will send you an online link so you can see.

        Lastly, I’d like to use this slider for only videos. Is there a way to switch off the auto change to the next slide? Once the video is playing and you move the mouse away, it obviously slides.

    • Marcel Rossouw
      Marcel Rossouw says:

      TO USE THIS SLIDER AND YOUTUBE VIDEO LINKS TOGETHER you need to use the code below for the (X) button to appear ontop of the youtube iframe.

      Eg.
      http://www.youtube.com/embed/7DB94Z3CMO4?wmode=transparent

      Notice the “embed/” path aswell as the “?wmode=transparent” at the end of the link string.

      If you do not use this above code the video will appear but you won’t be able to close it with the width & height being set at 100% as you won’t see the (X) button.

    • Marcel Rossouw
      Marcel Rossouw says:

      Josh, you should start to look at only IE9 and beyond, IE10 will officially be out soon. Browser Compatibility in all things is just not going to be possible with HTML 5 and CSS 3.0 scripting anymore. People need to upgrade and move on!

      • Josh Dyck
        Josh Dyck says:

        Ya, in my dreams. Sadly I have computer illiterate clients that beg to differ on that. I tried making my sites for IE9 and up but I got boat loads of complaints from everyone and their uncle that said my sites looked horrible… I’ve been experimenting with chrome frame and hopefully that will allow me to use html5 and css3 more often. :)

    • Hemn Chawroka
      Hemn Chawroka says:

      Thanks a lot Hoko,
      Yes of course you can. For more information about the license go to license page.

  15. Alex
    Alex says:

    Hello. I love this slider. The best one i have ever seen, though, I can`t get the prevNav and Nextnav buttons to show. It only shows the words prev and next at both sides of the slide. I have been trying to figure out what is going on but can’t find the problem. Can you help me with this?

    • Marcel Rossouw
      Marcel Rossouw says:

      Hi Alex, depending on your route structure, you’ll probably need to put in an extra “../” in the css scripts as I had to. So in total for all images in the CSSof my website i have the following “../../../img/…….”

      • Alex
        Alex says:

        Thanks, I checked that out and that is not the case. It didn’t seem to be the problem anyway because the slider shows all other elements present in the CSS file and images in the img folder. It is strange though, I remember having used another slider before (from another coder), and had the exact same problem (nav buttons didnt show up), but never even tried to fix it because I didn’t need to for what I was using it for. Any other hint?

        • Marcel Rossouw
          Marcel Rossouw says:

          Hi Alex, 2nd thing could be that you’re trying to use all the images for this plugin under one folder namely ‘images’? I’m thinking there’s a reason for both ‘images’ and ‘img’ folders being used.

  16. Bjarne
    Bjarne says:

    Thanks for sharing this awesome and fleksible slider :)

    However it’s important to add wmode=transparent to iframes with youtube videos, otherwise the video is not hidden when you move to next slide, e.g. it’s a problem in Safari ..

    Chrome is the browser, where I think it looks most correctly.. I needed to add wmode=transparent to display video and the effects correctly in among others Safari.

    Also I have to specify the width og the captions, e.g. for IE, otherwise a part of the text is cutted/hidden..

    • Marcel Rossouw
      Marcel Rossouw says:

      Agreed, I have asked Hemn to kindly add this into the documentation or into the example pages.
      Youtube links naturally have a z-index of 1000000+ and is in their terms of use.

  17. Alex
    Alex says:

    Anyone having trouble with IE9?
    In my case it does not make the transition from slide 1 to slide 2 and gets stuck?
    I tried on 2 different computers, both vista, with same results. Any clues?

      • Yojance Rabelo
        Yojance Rabelo says:

        Sorry my previous message didn’t go through completely.

        So data-easing and data-transition can be applied to the actual background image and data-transition and data-speed to captions? Is that correct or can data-easing be used on captions too?

        Thanks

  18. Bjarne
    Bjarne says:

    Is it possible to hide captions incl. video elements inside captions until the slider is preloading?

    Sometimes if you refresh the page, you’ll see the caption on top of each other in the upper left corner, but only for very short time.., e.g. if the refresh the page here: http://iprodev.com/iview/index2.html

  19. Theo
    Theo says:

    In Firefox (v 15) the captions do not always render correctly. Part of the text is shown on a new line but the bottom half of the text is cut of.

  20. Raghavendra
    Raghavendra says:

    This is the only BEST plugin so for I have seen.I had been searching for such plugin since 6 months but I found this only now. I want to know how to make this to display full screen,if this could be done how to use Supersized jQuery Plugin, as I am new to java script I do not know how to code and use it, I request to please advise and guide me.
    Thanks

  21. Raghavendra
    Raghavendra says:

    This is not displaying in full in ie and firefox .Only one fourth of the webpage is displayed.Please advise me any special code is to inserted in the webpage.It works fine in chrome and safari.
    Thanks

  22. Emmanuel
    Emmanuel says:

    I’m trying to set a specific width to the images loaded in data-iview:image=”” as i’m loading bigger images then the size of the div. but i cant find the jquery script that is controlling the width.

    Where can i do this?

    Thank you for your help. Great script!

  23. Jake
    Jake says:

    Hi,

    Superb slider, easy to use and looks great.

    I have a question, is there a setting to switch off the timer? Or do I have to modify the js myself to do so?

    Thanks for this great creation.

    • Hemn Chawroka
      Hemn Chawroka says:

      Yes, sure. Just set “autoAdvance” option to false to disable autoplay timer, and for hiding the timer set “timerOpacity” option to “0“.

  24. Jake
    Jake says:

    Thanks Hemn for the quick reply! Really appreciate your effort. =)

    Can I ask another question please? Is there a way to switch off the animation too? I have problem showing animation on slower computers. I know there’s a setting to limit the number of strips and blocks.

  25. Amine
    Amine says:

    Hey Hemn, Congratulation for the great slide, it’s the best free slider I’ve ever seen

    I would ask you if you’re managing to make it as an extension for joomla, if not is it easy integrating it in joomla code.

    Thank you

  26. Amine
    Amine says:

    Hi Hemn

    First of all thank you for the great work, it’s th best free slider I’ve found till now
    I how a problem, it’s that I’m creating a website using Joomla, and I would like to know if you are managing to create your work as an extension, if not is it easy to insert it in joomla code as I’m away from developing.

    Thank you.

  27. David
    David says:

    Superb slider! Out of curiosity, is it based on the original Flex Slider, now taken over by Woo Themes?

    I was wondering how I might center the images be default in case some are smaller than the container. CSS didn’t seem to work, are the images “pasted” into canvas, allowing for the transition effects?

    Thanks!

    • Hemn Chawroka
      Hemn Chawroka says:

      Hi David,
      Thank you, but this is my original work and it’s not based on any other sliders.
      Flex Slider is just a carousel. iView is the slider that has very powerful features that they don’t have half of its.

      Images cannot be in center until next version. :)

    • Alex
      Alex says:

      David: Try this, create png image files the size of the container with your image in the center and transparent background to fit the size of the container.

  28. Castle
    Castle says:

    Hi Hemn,

    First, great slider! It’s an unique one.

    Just a question. Is it still being developed? Because there is no updates for months.

    Cheers

  29. Nikita Gavrilov
    Nikita Gavrilov says:

    Hi Hemn,

    First of all, thank you for you very avesome slider.

    I’m trying to create custom captions with jQuery animation (flying captions). In “onAfterChange” function, I need to get the index of the next slide, which is not fully apeared. I haven’t found any clue in iView API that may help me to do it. Can you tell me please if there is any other solutions?

    Thanks in advance

    • Nikita Gavrilov
      Nikita Gavrilov says:

      I made it myself by wrapping the code with setTimeout

      options.onAfterChange = function() {
      var iview = this;
      // Show Caption
      setTimeout(function() {
      var next_slide = iview.slides.filter(“:visible”);
      ….
      })
      }

      Thanks

  30. Castle
    Castle says:

    Hi Hemn,

    I think I found a bug. If you apply box-sizing: border-box to your CSS. It will break your captions container and text.

    Any idea how to fix that?

    Cheers

  31. Михаил Никоноров
    Михаил Никоноров says:

    Hi! There is a problem with the slider. A text inside captions moves to another line. You can fix the problem by putting “white-space: nowrap;” inside “.iview-caption {}”. Location of “.iview-caption {}”. construction is “css/skin X/style.css”.

    For example:

    css/skin 4/style.css

    .iview-caption {

    background: url(‘../../img/caption-bg.png’);

    color: #FFF;

    border-radius: 3px;

    white-space: nowrap;

    padding: 10px 15px;

    font-family: Verdana;

    font-size: 12px;

    text-shadow: #000 1px 1px 0px;
    }

Comments are closed.