jssor / slider

Touch swipe image slider/slideshow/gallery/carousel/banner mobile responsive bootstrap

Responsive Javascript Image/Text Slider/Slideshow/Gallery/Carousel

1. Live Demo
2. Create Slider Online Free
3. https://www.jssor.com/development
4. Support: Ask a question on StackOverflow

---

Example

<script src="jssor.slider.min.js"></script>
<div id="jssor_1" style="position:relative;top:0px;left:0px;width:980px;height:380px;overflow:hidden;">
    <div data-u="slides" style="position:absolute;top:0px;left:0px;width:980px;height:380px;overflow:hidden;">
        <div><img data-u="image" src="image1.jpg" /></div>
        <div><img data-u="image" src="image2.jpg" /></div>
    </div>
</div>
<script>
    var options = { $AutoPlay: 1 };
    var jssor_1_slider = new $JssorSlider$("jssor_1", options);
</script>

slider's Issues

Mouseover. Restart animations

Hi @jssor ,

My client asked me if is possible on event mouseover, the banner do animations again.

In really, today i build again the banner/slideshow on mouseover. But i think this is not the best solution. I want know if has a method to redo the animation of current slide

thanks!

firefox

firefox, does not work manual(hand) rewind slide

"u" attribute

What's the deal with the "u" attribute? The HTML5 conformance checker complaints about them.

Programmatically set ParkingPosition

Is there an easy way to programmatically change the ParkingPosition?

Attribute t3, r3, d3, du3

What are attribute t3, r3, d3, du3 for? Sorry this is not a real issue but I don't know where to ask.

Slider template requires inline styles

For better coding, slider template might support CSS styles defined into a separate stylesheet.
To read in javascript the styles that aren't defined inline into the html document, the plugin may use window.getComputedStyle() method.

For cross-compatibility with very old browsers versions, a snippet like this can be used:

    var getStyle = function(elem, property) {
        if (elem.currentStyle) {   // for old IE versions
            return elem.currentStyle.property;
        } 
        else if (window.getComputedStyle) {   // for W3C standard browsers
            if (window.getComputedStyle.getPropertyValue) {
                return window.getComputedStyle(elem).getPropertyValue(property);
            }
            else return window.getComputedStyle(elem)[property];
        }
        else return elem.style.property;  // for fallback
    }

The JQuery plugin version can use $(elem).css(property).

Replace ThumbnailTemplate by DIV tag

I have a questions about the jssor gallery.

how works the ThumbnailTemplate tag?

It can be replaced with div tag?

This is because I try to use a jssor in epub readers but does not work tag ThumbnailTemplate

Regards

av and dn class names appended to existing class name

I'm not sure whether or not you would consider this a bug, but I think changing it would be beneficial.

I prefer to avoid inline css. Instead I added a class to the prototype div which is used for the navigation buttons. However, when the button was active or pressed down, my css was being removed. I discovered that when the av or dn classes are added to the element, they are actually appended to the existing class name. For example, if I had a class of nav-prototype on the prototype div, when pressed, the class name became nav-prototypedn instead of the element now having two separate classes of nav-prototype and dn. With two separate classes, you could target each separately with css as opposed to the concatenation approach which essentially removes the previous class and adds some new class.

$ArrowNavigatorOptions > disable arrows if is first and/or if is last (loop:0)

Hi, thanks for this great plugin.
I try to disable prev arrow navigation if image is the first thumb and disable next arrow if thumb is the last. In case of Loop is set to "0".

var options = {
            $AutoPlay: false,                                   
            $AutoPlayInterval: 4000,                         
            $SlideDuration: 500,                              
            $DragOrientation: 3,
$ThumbnailNavigatorOptions:  {
                $Class: $JssorThumbnailNavigator$,           
                $ChanceToShow: 2,                              

                $Loop: 0,                                     
                $SpacingX: 3,                                  
                $SpacingY: 3,                                  
                $DisplayPieces: 9,                              
                $ParkingPosition: 204,                          
                $ArrowNavigatorOptions: {
                    $Class: $JssorArrowNavigator$,             
                    $ChanceToShow: 2,                              
                    $AutoCenter: 2,                                
                    $Steps: 3                                    
                }
            }
};

Ability to set retina (2x) images as slides

We'd like to add retina slides by putting up double resolution images as slides.
Using a html img with half the width and height does indeed render retina but sadly not in jssor slider.

I set the slider container, slider div's width and high to 800x400 px and set in options the $SlideWidth and $SlideHeight to 800 and 400.

I've uploaded a 1600 and 800 px image and it seems javascript does scale it and not having a retina look but blurred (yet right size).

We even have tried all the $FillMode settings - no result. What am I missing?

How to stop/pause at last slide?

Is it possible to stop at last slide when auto-play is enabled? I set "$Loop: false" it is only stop looping to next slide and reverse to first slide but I want to stop sliding at last slide and stay on that slide+title.

v16 release

Hi,
just wanted to ask if you plan on making a v16 release soon?
(i need it as a git tag and /archive/v16.zip cause i want to put it as a webjar, i added it yesterday, but it's v14 only)

thanks in advance
atanas

Sometimes one of the navigation arrows disappears on Chrome

In Chrome - Auto-play: One of the navigation arrows, if set, disappears when the transition ends and shows up when another transition begins.

Test case: Nested sliders - Auto play
The inner sliders have the following config for the arrow navigation:

$ArrowKeyNavigation: true, 
$ArrowNavigatorOptions: {               
    $Class: $JssorArrowNavigator$, //[Requried] Class to create arrow navigator instance
    $ChanceToShow: 2                  //[Required] 0 Never, 1 Mouse Over, 2 Always
}

Example: http://www.quinnco.com/index.php?new

Jssor slider doesn't work when using IE

I got invalid argument error at line 2 in jssor.slider.mini.js in ie8 browser...
Message: Invalid argument.
Line: 2
Char: 10039
Code: 0
URI: http://localhost/demo/assets/jssor/jssor.slider.mini.js

$PlayTo and $GoTo functions' behavior

In the documentation it's stated:
$PlayTo(slideIndex[, slideDuration])
//Play slider to position 'slideIndex' within a period calculated base on 'slideDuration'
$GoTo(slideIndex)
//Go to the specifed slide immediately with no play

I tried to use both functions, in order to add external navigation to the slider.
Expected behavior: while slider is playing, if a thumb it's clicked, the slider goes to the slide pointed out by the thumb and continues playing from there.

When using $PlayTo, the slider goes right ahead to the desired slide (this part works great), but after showing the desired slide, goes back and continues playing from the slide where it left off.

When using $GoTo, the slider continues to play one more slide, before jumping to the desired slide. This function, after "jump", continues playing from the desired slide - this part works fine.

Conclusion: I was expecting for a function which:

• makes the slider jump right ahead to the desired slide (like $PlayTo does)
• continues playing from the slide the slider just jumped to (like $GoTo does)

captions playin and touch

I have two questions about jssor slide.
1.
I use jssor slide with caption transitions.
I touch the screen When a slide is in and starting captions playIn, the captions playIn is stopped.
I can't find where the option do not stop the captions playIn.

On Playoutmode is 3, the captions play out immediately if they has no "b" data but at least one caption has "b" data, the captions palyOut follow the "b" data.
Jssor adviced me this is the correct logic. I understand.
But Is there any way to make captions playOut immediately even if any caption has "b" data?
Thanks.

About Jssor licensing for commercial purposes?

Hello there
your work is great
Just wanted to check the licensing of this slider?
Is it free to use even for commercial purposes?

Looking forward for your response. Have a great day ahead.!

List Slider

If you can get a version of the vertical scrolling carousel as in the example below for ''List Slider''.
http://dimsemenov.com/plugins/royal-slider/video-gallery/
Note as a vertical scrolling carousel when you click on the top slide.

Add Version 17.0 to Bower

Please can you add the latest version (17.0) to bower.

I believe the version, number in bower.json, needs to be changed from 16.0 to 17.0.

[FEATURE] Bower suppoer

please add support to install this from bower

Dynamic slides loading

Thank you for the project. It's very great! Are you expecting to add a support for dynamic image loading/deleting. In January on stackoverflow you said that the slider doesn't support changing the number of pictures it operates on dynamically. Would you consider adding such support?

Html Validation

Hi there, Since I am the first to report an issue here. Let me please thank you for the nice work before coming to the issue. I liked your slider +1

Now the issue is: Jssor uses a custom attribute 'u' in html tag, this throws error in html validator. Can you please set is to html conform attribute like "data-something" or is there a way to set it in the API.

Slider with responsive width and fixed height

Hi, thank you for sharing this nice slider! I was playing with it and I'm trying to setup a slider that has the same width of its container (eg. like your Full Width Slider example) but with a fixed height (basically, to cover the full screen). I see that the $SetScaleWidth() method works by setting the CSS scale factor of the container, so it's not useful for this purpose.

Is there some workaround for this issue?

Alternatively, I tried to change the CSS width/height of each slide's div/img on window resize, but it doesn't work because, when the plugin sets the offsets between each slide for playing the animation, it then uses the initial width, so the slides become overlapped..
It would be great to have an API like $SetSliderWidth() and $SetSliderHeight() that allows to reset those parameters or, even better, supporting percentage units to be fully responsive but the first one should do trick well. Anyway, thanks for your great work!

How to keep captions in end position

Coming from #53.
Caption elements in the slide come into view, with the transition applied. But just before the slide changes, caption elements animate it self out of view. How do I stop this end animation.

I have here example set up http://jsfiddle.net/g3fdft97/. The word "hello" and "world" comes into view with a simple transition from right. The slider is self has time interval of 3 sec. Just before the slide changes, "hello world" also fade away into right. But I wanted to keep the captions in the end position. How can I achieve it.
Also when the slider comes back again, captions should animate once again as normally to the end position.
Thank you

How to run caption animation only once.

Caption transition animation is applied repeatedly, when each slide duration is longer than the caption element animation. How can I stop playing the caption animation more than once, within a particular slide duration.

"u" attribute fails XHTML 1.0 validation

The "u" attribute fails XHTML 1.0 validation. What can I do if I need to implement this on a CMS that requires the validation?

Disable Previous and Next Arrow Navigator

I want to disable Previous Arrow Navigator on first slide and Next arrow on last slide . I have tried using jrror events but i didnot work. I need it urgent . Please help me to achieve this thing

Fade instead of slide?

Hi, I am trying out the code. It was a great plugin!

But I have a question, is it possible when I click on the navigation (left or right) or bullets, to use fade (or any other transitions) instead of slide left <-> right? Now I am looking at the fade only happen on autoplay (i.e. slideshow)

Thanks. :D

http://www.jssor.com/demos/full-width-slider.html

Resize works fine except when I maximise the screen in chrome, then the navigator arrow is missing at the right and the navigator at the bottom.

Arrow Navigation should use the transitions from $SlideshowOptions

When $SlideshowOptions/$Transitions are defined, it would be nice to use those transitions when using arrow navigation.

An option for NOT scaling thumbnail navigator

It would be nice to have an entry in the $ThumbnailNavigatorOptions to set if the thumbnail navigator should be scaled or not by the $SetScaleWidth function.

Typo? in README.me

In Feature section:
"jQuery plugin slider..."
and not "Query plugin slider..."

$PlayTo and $GoTo functions don't work when $SlideshowOptions is defined

I used the following options for the slideshow:

 $SlideshowOptions: {                               
                    $Class: $JssorSlideshowRunner$,                
                    $Transitions: [{ $Duration: 1500, $Opacity: 2 }],           
                    $TransitionsOrder: 1
}

Scale to certain maximum width without scaling of the image

Hi,

How do I have to configure the style of the container div and slides div to scale and center the container to a certain amout of pixels (e.g. 800px, 1024x) and not scale the photo inside. All photo's are loaded from flickr with a certain maximum width (dynamically based depending on the viewport width). The height is free. I already tried width a fixed width in the div's but without succes.

Thx

Please provide a method to read scale factor

Is there any way to read CSS scale factor! or way to achieve this.

Auto height with content slider.

First of all thanks for this great plugin and your hard work. I have checked all great 30 templates which you provided. Can you please add one more template of HTML content slider with auto height feature? I never seen open source plugin like Jssor Slider.

Many thanks.

Custom Theme

Hello @jssor
Thanks for make this 👍
One question,
Can I make custom theme?
and How to do that?
*) link for this documentation please

$GoTo function does nothing when the slider is paused

Is this a normal behavior?

$LazyLoading option not working

From documentation:
$LazyLoading optional 1 For image with lazy loading format (<IMG src2="url" .../>), by default it will be loaded only when the slide comes.But an integer value (maybe 1, 2 or 3) indicates that how far of nearby slides should be loaded immediately as well, default value is 1.

I tried this option for a nested slideshow, but I cannot get it to work. All the images have the src2 attribute (no src). Am I missing something? Is there any other setting necessary to make this work?

The current behavior is loading all the images, in the beginning, and even more, as the slideshow advances the images are loaded again and again.
I made a small fiddle, where you can see the behavior:
http://jsfiddle.net/R4djV/1/
The external thumb images are missing (but that's not important).

You could include the help in this repository

Hello:

You could add the help that exists in http://www.jssor.com/development/ to this repository ?

Greetings.

jQuery uncaught error

Hi,

I'm trying to configurate the slider from the 0 and I ran into some issues.

I hope you can tell me what is causing them.

I'm fallowing your documentation to configure it and I'm trying to make it responsive.

But in the process I get this error:
Uncaught TypeError: Cannot call method '$SetScaleWidth' of undefined

Could you please take a look at my test page and tell me why this is happening?

Here is the link:
http://www.turdidesigns.com/es/testing-page

Thank you,

$Loop does not work when calling $Next on last slide

Hi,

When calling $Next on the last slide, jssor loop to the first slide even when $Loop is set to false;
I think the problem is on the second line in the 'if'.
Since positionTo will be 0, and the min of 0 and anything else will be 0 (unless position could be negetive, which I don't think is possible).
Then Max 0 with 0 will give the first slide.

if (!_Loop) {
  positionTo = GetRealIndex(positionTo);
  positionTo = Math.max(0, Math.min(positionTo, _SlideCount - _DisplayPieces));
}

On the same matter, It will be nice to have a $IsLast function.
Thanks for the good work!

$LazyLoading option still not working

I double checked to be sure that is the last version of the slider.

Please see comments on: #14

Hide arrows and bullets when there is only one slide

Hi, this slider is the best I've ever seen, however I'm trying to hide arrows and bullets when there is only one slide (I've seen this as a default behavior on other sliders), how can I do this?

Worse performance if full width is used on mobile device

This slider library is great and has a very good performance on desktop browserns. It varies on mobile devices however.

On my Nexus 5 in Chrome for Android, it's very responsive unless I try full-width demos. It's very sluggish and hangs for short moments if I drag very slowly. I believe it has to do with the full-width setting, because other examples with the slider almost covering the entire screen work fine.

jQuery vs. No-jQuery has no noticable difference in performance.

The slider doesn't seem to use the null transform hack (transform: translateZ(0)), nor could I find the use of backface-visibility: hidden - wouldn't it improve performance to force hardware accelleration?

licensing information

Hey there....your work is awesome :) 👍
Just wanted to check the licensing of this slider?
Is it free to use even for commercial purposes?

Looking forward for your response. Have a great day ahead.!

Cheers.

Scale only images, not text ?

I was wondering If there was a known way to keep the text at the same size when using a responsive slider. Using the example sliders, I seemed only possible to rescale the entire content of a slide, including the text... which quickly makes said text very hard to read on your phone, as it gets tinier and tinier when the screen gets less and less wide. Here's what Code I have:

<div class="myContainer">
  <div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 1140px; height: 600px;">
    <!-- Slides Container -->
    <div u="slides" style="cursor: move; position: absolute; overflow: hidden; left: 0px; top: 0px; width: 1140px; height: 600px;">
      <div>
        <div style="margin: 0 auto; width:730px;">
          <img src="image.png" style="margin: 15px auto 15px; max-width:650px; width:100%; display:block" />
          <h2>Title</h2>
          <p>Lorem ipsum blah blah blah...</p>
        </div>
      </div>
    </div>

    <!-- Arrow Navigator Skin Begin -->
    <style>
      .jssora21l, .jssora21r, .jssora21ldn, .jssora21rdn
        {
          position: absolute;
          cursor: pointer;
          display: block;
          background: url(a21.png) center center no-repeat;
          overflow: hidden;
        }
      .jssora21l { background-position: -3px -33px; }
      .jssora21r { background-position: -63px -33px; }
      .jssora21l:hover { background-position: -123px -33px; }
      .jssora21r:hover { background-position: -183px -33px; }
      .jssora21ldn { background-position: -243px -33px; }
      .jssora21rdn { background-position: -303px -33px; }
    </style>
    <!-- Arrow Left -->
    <span u="arrowleft" class="jssora21l" style="width: 55px; height: 55px; top: 123px; left: 8px;"></span>
    <!-- Arrow Right -->
    <span u="arrowright" class="jssora21r" style="width: 55px; height: 55px; top: 123px; right: 8px"></span>
    <!-- Arrow Navigator Skin End -->
    <script>jssor_slider1_starter('slider1_container');</script>
  </div>
</div>
<script>
    jQuery(document).ready(function ($) {
        var options = {
            $ArrowNavigatorOptions: {
                $Class: $JssorArrowNavigator$,
                $ChanceToShow: 2
            }
        };                           
        var jssor_slider1 = new $JssorSlider$('slider1_container', options);

        //responsive code begin
        //you can remove responsive code if you don't want the slider scales
        //while window resizes
        function ScaleSlider() {
            var parentWidth = $('#slider1_container').parent().width();
            if (parentWidth) {
                jssor_slider1.$SetScaleWidth(parentWidth);
            }
            else
                window.setTimeout(ScaleSlider, 30);
        }
        //Scale slider after document ready
        ScaleSlider();
        if (!navigator.userAgent.match(/(iPhone|iPod|iPad|BlackBerry|IEMobile)/)) {
            //Capture window resize event
            $(window).bind('resize', ScaleSlider);
        }
        //responsive code end
    });
</script>

So what I am trying to achieve is keeping those h2 and p tags scaled properly while the image gets resized as all of these elements stay in the same 730px wide div. Is there a simple way to do this yet? I think in the case of html-content slides, it would be useful and make more sense to keep non-image element to the normal scale, as usual responsive behaviors do.

$ArrowNavigatorOptions.$Scale not working

transitions/captions stuck

First awesome work!

I developed a banner/slideshow editor to My client and in My test environment all works fine. But when i do a integration with his system, transition and caption transitions stay stucked. I can change slideshow by use next or by mouse, but auto transitions do not work. Caption stay outside div. Now this problems is drive me a crazy because i dont know what is the problem. I want know if there is a possibility to broken jssor events or how i can broke it for reproduction of the problem.

$Loop to start

Is it possible to have some way that $Loop just loops to the first element rather than to the next one that is x steps ahead.