jssor / slider Goto Github PK
View Code? Open in Web Editor NEWTouch swipe image slider/slideshow/gallery/carousel/banner mobile responsive bootstrap
Home Page: https://www.jssor.com
License: MIT License
Touch swipe image slider/slideshow/gallery/carousel/banner mobile responsive bootstrap
Home Page: https://www.jssor.com
License: MIT License
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!
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).
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.!
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)
.
What's the deal with the "u" attribute? The HTML5 conformance checker complaints about them.
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?
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
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.
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?
In Feature section:
"jQuery plugin slider..."
and not "Query plugin slider..."
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.
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
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.
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:
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
Is this a normal behavior?
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.
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?
I double checked to be sure that is the last version of the slider.
Please see comments on: #14
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.
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!
Is there an easy way to programmatically change the ParkingPosition?
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.
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.
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,
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.
What are attribute t3, r3, d3, du3 for? Sorry this is not a real issue but I don't know where to ask.
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
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.
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
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
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?
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.
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
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
Is there any way to read CSS scale factor! or way to achieve this.
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.
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!
please add support to install this from bower
Hello @jssor
Thanks for make this ๐
One question,
Can I make custom theme?
and How to do that?
*) link for this documentation please
I used the following options for the slideshow:
$SlideshowOptions: {
$Class: $JssorSlideshowRunner$,
$Transitions: [{ $Duration: 1500, $Opacity: 2 }],
$TransitionsOrder: 1
}
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?
Hello:
You could add the help that exists in http://www.jssor.com/development/ to this repository ?
Greetings.
firefox, does not work manual(hand) rewind slide
When $SlideshowOptions/$Transitions are defined, it would be nice to use those transitions when using arrow navigation.
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.
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.
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
}
}
};
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.