Jssor Slider Source Example
Please Download Jssor Slider and open 'demos-jquery\full-width-slider.source.html'
jssor slider when i addin (margin: 0 auto;) it centers but stops working
There is a mistake in the code, Please replace jssor_slider1.$ScaleWidth(scaleWidth); with jssor_slider1.$ScaleWidth(windowWidth); Note that 'margin: 0 auto;' will align element center to it's parent element only if the parent element is wider than the element. So, it will not work in case of a full screen slider. Here is a...
JSSOR - IE/Firefox issue with fade transition on images/elements with CSS transform
This is a bug, I have just fixed it and updated. Please download the latest.
Jssor create dynamic slider
When jssor slider initializes, the content in the slider1_container will be reformatted, so it will be ok when you create it dynamically first time. To create a new slider again dynamically, the inner elements in slider1_container is not reusable. You'd clear inner elements and recreate it again....
JSSOR Navigation Arrows Not Working
Please place the 2 arrows inside 'slider1_container'. <div id="slider1_container"> <!-- Slides Container --> <div u="slides" style="cursor: move; position: relative; overflow: hidden; left: 0px; top: 0px; width: 700px; height: 400px;"> <div><img u="image" src="@appRoot/images/Slider/camp1.jpg" /></div> <div><img u="image" src="@appRoot/images/Slider/camp2.jpg" /></div> <div><img u="image" src="@appRoot/images/Slider/camp3.jpg" /></div> </div> <!-- Arrow...
JSSOR Continuous slider displaying 6 from n logos
just fixed it myself by adding ... $SlideWidth: 165 :-)...
jssor thumbnail css transform error
Please set $HWA to false to disable hardware acceleration. var options = { ..., $ThumbnailNavigatorOptions: { ... $HWA: false, ... } }; I will disable hardware acceleration for thumbnails by default for later updates....
Jssor Slider: How to target specific slide with text/image link?
There are 2 ways, 1. use api call to play to specified slide. jssor_slider1.$PlayTo(2); //or jssor_slider1.$GoTo(2); 2. customize thumbnail navigator with your own format. Please see 12 thumbnail navigator skins in the package. Note that you can compose your thumbnail in any format (html, text, image or combination)...
Jssor - Can I use your slider for commercial use? [closed]
Yeah for sure. Jssor Slider is definitely free!
How to add arrows for thumbnail jssor navigation slider
Thanks, now it works using the thumbnail skin and ArrowNavigatorOptions from demos-jquery\thumbnail-navigator-with-arrows.source.html as you suggested.
Jssor Slider - Text hyper link to a particular slide?
Make the jssor_slider1 variable global, you can access the instance anywhere. Also, jssor_slider1.$PlayTo(2); is resonable as well. <script src="js/slider-master/js/jquery-1.9.1.min.js"></script> <script src="js/slider-master/js/jssor.slider.mini.js"></script> <script> var jssor_slider1; jQuery(document).ready(function($) { var options = { $ArrowNavigatorOptions: { $Class: $JssorArrowNavigator$, $ChanceToShow: 2 } }; jssor_slider1 = new $JssorSlider$('slider1_container', options); }); </script> ...
Jssor Slider how to add arrows to thumbnail image gallery
javascript,jquery,html,css,jssor
Thumbnail navigator is also a kind of slider, you can add arrow navigator for thumbnail navigator. var options = { ..., $ParkingPosition: 360, //[Optional] The offset position to park thumbnail $ThumbnailNavigatorOptions: { ..., $ArrowNavigatorOptions: { $Class: $JssorArrowNavigator$, $ChanceToShow: 2, $AutoCenter: 2, $Steps: 6 //[Optional] Steps to go for each navigation...
Jssor - how to add slides dynamically?
You are doing in a right way. All you need is to check slides (you added dynamically) are correct or not. To check html created dynamically, you can copy it out and test it in a standalone html file to see if the slider works....
jassor Increase the width and height of the nested slider
Please change the size of 'outer container' and 'slides' container. Btw, jssor slider will always keep aspect ratio while scale. Reference: http://www.jssor.com/development/tip-arrange-layout-adjust-size.html...
Slider doesn't autostart in Explorer 11
slider,internet-explorer-11,jssor,autostart
A semicolon is missing in your html code. Please replace <div id="slider1_container" style="position: relative; top: 0px; left: 0px width: 332px; height: 260px; "> with <div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 332px; height: 260px; "> ...
Jssor - Click on thumbnail show that photo in Slider
Given the 3rd thumbnail was clicked, please use the following code to display the 3rd slide. jssor_slider1.$GoTo(2); //or jssor_slider1.$PlayTo(2);...
Jssor Slider: How to target specific Child Slide
var nestedSliders = []; $.each(["sliderh1_container", "sliderh2_container", "sliderh3_container", "sliderh4_container"], function (index, value) { var sliderhOptions = { $PauseOnHover: 0, //[Optional] Whether to pause when mouse over if a slider is auto playing, 0 no pause, 1 pause for desktop, 2 pause for touch device, 3 pause for desktop and touch...
jssor gallery - a couple of questions
re: transitions As there are infinite transitions, you need to copy transition codes that you need. re: move css For now, you can move inline styles to css file or css block (with class name <div class="yourclassname" ...). And I will optimize this feature for next version. re: custom attributes...
JSSOR Slider Number Bullet List
Open 'skin\bullet-01.source.html', the bullet navigator looks as below, <!-- Bullet Navigator Skin Begin --> <!-- jssor slider bullet navigator skin 01 --> <style> /* bullet css here */ </style> <!-- bullet navigator container --> <div u="navigator" class="jssorb01" style="position: absolute; bottom: 16px; right: 10px;"> <!-- bullet navigator item prototype --> <div...
JSSOR slider: Remove inline style from html
What is "div u=" please? Re: There are so many elements in the slider, the 'u' attribute is customize attribute, jssor js library read 'u' attribute to identify the usage of an element. Is "u" a class here? How does that translate to a CSS selektor? Re: 'u' is not...
override font-size in jssor slider when scaled down
Ended up using cycle2 plugin. Turned out to be pretty flexible and was able to restyle contents with media queries without any issues whatsoever.
Remove the image tag when image is not uploaded to Channel Advisor. No jQuery method please
javascript,image,tags,channel,jssor
Try ... <img src="{{THUMB(ITEMIMAGEURL1)}}" id="img1"> <img src="{{THUMB(ITEMIMAGEURL2)}}" id="img2"> <img src="{{THUMB(ITEMIMAGEURL3)}}" id="img3"> <img src="{{THUMB(ITEMIMAGEURL4)}}" id="img4"> <img src="{{THUMB(ITEMIMAGEURL5)}}" id="img5"> <img src="{{THUMB(ITEMIMAGEURL6)}}" id="img6"> <img src="{{THUMB(ITEMIMAGEURL7)}}" id="img7"> <img src="{{THUMB(ITEMIMAGEURL8)}}" id="img8"> <img src="{{THUMB(ITEMIMAGEURL9)}}" id="img9"> <img src="{{THUMB(ITEMIMAGEURL10)}}"...
Jssor (Slider Cluster): How to disable AutoPlay?
Please remove following code, //slider cluster controller code begin function SliderCluster(mainSlider, autoPlayInterval) { var _Self = this; var _NestedSliders = []; var _NestedSliderCurrent; var _CaptionInCounter = 0; function OnChildSliderStateChange(currentIndex, progress, progressBegin, idleBegin, idleEnd, progressEnd) { if (progress == idleBegin) { if (!(++_CaptionInCounter % 4)) { _NestedSliderCurrent && _NestedSliderCurrent.$Pause(); mainSlider.$Play(true); }...
get the added id from the slide
Assuming you want the slide corresponding to slideIndex or fromIndex. jssor_slider1.$On($JssorSlider$.$EVT_PARK, function (slideIndex, fromIndex) { var oldSlide = $('div[debug-id="slide-' + fromIndex + '"]').attr('id'); var newSlide = $('div[debug-id="slide-' + slideIndex + '"]').attr('id'); }); ...
Jssor Slider: Captions overlap for a short time before slideshow starts
It looks as you stated while page is loading. You can use no jquery version to run jssor slider immediately without waiting for loading. Or you can show only one slide and hide (style="display: none;") other slides at the beginning. <!-- Slides Container --> <div u="slides" style="cursor: move; position: absolute;...
JSSOR slider not resizing properly in iOS when rotating device orientation
jquery,ios,resize,device-orientation,jssor
Please handle orientationchange event function ScaleSlider() { var parentWidth = jssor_slider2.$Elmt.parentNode.clientWidth; if (parentWidth) jssor_slider2.$ScaleWidth(Math.min(parentWidth, 1024)); else window.setTimeout(ScaleSlider, 30); } ScaleSlider(); $(window).bind("load", ScaleSlider); $(window).bind("resize", ScaleSlider); $(window).bind("orientationchange", ScaleSlider); ...
Jssor - is it possible to add a caption to every image in thumbnail navigator?
Yes for sure. Thumbnail can be in html format, you can put anything in the thumbnail. <div u="thumb"> <img src="img/slider/02.jpg" /> <!. caption.! > </div> ...
JSSOR - Is it possible to fade in/out bullets/thumbnails when sliding?
Given you have a bullet navigator element as follows, <div u="navigator" class="jssorb03" ...> ... </div> You can make it fade out while swipe start, and fade in while swipe end. function SwipeStartEventHandler(position) { if(Math.floor(position) == position) $(".jssorb03").fadeOut(); } function SwipeEndEventHandler(position) { if(Math.floor(position) == position) $(".jssorb03").fadeIn(); } jssor_slider1.$On($JssorSlider$.$EVT_SWIPE_START, SwipeStartEventHandler); jssor_slider1.$On($JssorSlider$.$EVT_SWIPE_END,...
Issues when adding 2 Jssor sliders
To combine multi sliders in one page, please use different name. For example, the name of the first slider is 'slider1', please make the second named 'slider2'. So, please open thumbnail-07.source.html, replace all 'slider1' with 'slider2'....
JSSOR - $Loop option doesn't seem to work
the $Loop option controls the behavior of carousel. If value of $Loop is 0, when drag or click next button, it won't go forward. for your approach, please capture $JssorSlider$.$EVT_STATE_CHANGE event. //Each slide will go through progress of progressBegin, idleBegin, idleEnd, progressEnd. Capture playing state change event then jssor_slider.$On($JssorSlider$.$EVT_STATE_CHANGE, function(slideIndex,...
jssor slider responsive code works but doesn't restore when browser width is full
Please scale the slider no more than 640 in width. var jssor_slider1 = new $JssorSlider$("slider1_container", options); function ScaleSlider() { var parentWidth = $("#slider1_container").parent().width(); if (parentWidth) { jssor_slider1.$ScaleWidth(Math.min(parentWidth, 640)); } } ScaleSlider(); //Scale slider while window load/resize/orientationchange. $(window).bind("load", ScaleSlider); $(window).bind("resize", ScaleSlider); $(window).bind("orientationchange", ScaleSlider); ...
Jssor stacking slides on load
As all content is overlapped in 'slides container' before initialization of jssor slider. It looks stacked. And it will be well formatted after initialization. Please add css 'position: absolute; top: 0px; left: 0px;' for every slide to fix this issue manually. <div class="banner1" style="position: absolute; top: 0px; left: 0px;"> ...
In JSSOR, how do you add additional slides to the full width slider?
It looks an enclosing '' is missing for slide #3. I guess it would be OK to replace, <!-- What should be Slide #4, but isn't working --> with </div> <!-- What should be Slide #4, but isn't working --> ...
jssor slider width issues
I believe you're looking for this line: <div id="sliderh1_container" class="sliderh1" style="position: relative; top: 0px; left:0px; width: 600px; height: 300px;"> EDIT Here is one example of a slider that I have on a website. <div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 285px; height: 285px; "> <!-- Slides Container -->...
Jssor - Z-index of Transition Effects
javascript,css,slideshow,css-transitions,jssor
remove following lines in framework.css (better not specify such css for all div in framework.css) div { overflow: hidden; display: block; position: relative; } and in style.css, replace .homePageWrapper .landingImageWrapper { border-radius: 50%; border: 12px solid rgb(255, 255, 255); border-image: none; width: 312px; height: 312px; margin-right: auto; margin-bottom: 35px; margin-left:...
Blank slider placeholders
javascript,asp.net-mvc,highcharts,jssor,dotnethighcharts
The 'slides' container was duplicated in old version of jssor slider, it leads duplicate slide elements. This bug has been fixed a few days ago....
Text overlay when loading the page
You can display only one slide and hide all other slides (by specifying style="display: none;") at the beginning. <div u="slides" ...> <div> <a> <img src="image.jpg"/> <p>Some texts</p> </a> <div> <div style="display: none;"> ... <div> </div> Or you can use jssor slider no-jquery version, it will initialize jssor slider immediately without...
jssor sliders swipe in the same time
var jssor_slider1 = new $JssorSlider$(...; //set $AutoPlay: false for the second slider var options2 = { ..., $AutoPlay: false, ... } var jssor_slider2 = new $JssorSlider$("slider2_container", options2); function OnPositionChange(position) { //let jssor_slider2 go to the same position as jssor_slider1 jssor_slider2.$GoTo(position); } //listen $JssorSlider$.$EVT_POSITION_CHANGE on jssor_slider1 jssor_slider1.$On($JssorSlider$.$EVT_POSITION_CHANGE, OnPositionChange); To make slider1...
Jssor slider navigator arrows not working outside of the slider in Safari
Keep size of 'slides container' original, and then make the size of 'outer container' bigger. In this manner, you will see arrows beside. And then adjust position (style="...top: ...px; ...left: ...px;...") of 'slides container', you can make 'slides container' center to 'outer container'. See slider with arrows outside....
JSSOR Slider is not working with dynamic data
Please replace <!-- Slides Container --> <div u="slides" style="cursor: move; position: absolute; overflow: hidden; left: 0px; top: 0px; width: 676px; height: 375px;"> <div id="HomeImgSliders"></div> </div> with <!-- Slides Container --> <div id="HomeImgSliders" u="slides" style="cursor: move; position: absolute; overflow: hidden; left: 0px; top: 0px; width: 676px; height: 375px;"> </div> and replace...
any way to add a box-shadow to images in a jssor slider?
javascript,html,css,css3,jssor
<style> .shadow { padding:0px; margin:0px; border:medium solid black; box-shadow: 10px 10px 5px #888; } </style> <script> jQuery(document).ready(function ($) { var options = { $AutoPlay: true, $DragOrientation: 3 }; var jssor_slider1 = new $JssorSlider$("slider1_container", options); //you can add shadow for outer container after jssor slider initialized. $("slider1_container").addClass("shadow"); //or you can add...
jQuery Jssor Image Slider Width Issue
Please replace jssor_slider1.$ScaleWidth(Math.max(Math.min(parentWidth, 800), 300)); with jssor_slider1.$ScaleWidth(Math.max(Math.min(parentWidth, 1340), 300)); It will scale the slider width to maximum 1340px and minimum 300px....
Jssor slider variable width based on window width
You are doing right to move inline styles to css block and specify different size for various media screen. Please note that, in the way you mentioned, jssor slider will keep initial size, it will not scale according to window resize. btw, what is the following stand for? big ->...
A few problems regarding JSSOR Slider
re 1: thumbnails offset you'd adjust css of the thumbnail skin. re 2: center slider use 'margin: 0 auto;' to center element <div id="slider1_container" style="...;margin: 0 auto;..."> re 3: display pieces of please set $DisplayPieces to 4 $ThumbnailNavigatorOptions: { //[Optional] Options to specify and enable thumbnail navigator or not $Class:...
Jssor (nested slider): how to disable AutoPlay?
There is no 'auto play' for the main slider and 3 child sliders by default. It is controlled by manual API call. By removing following code, you will get what you want. function OnMainSliderPark(currentIndex, fromIndex) { $.each(nestedSliders, function (index, nestedSlider) { nestedSlider.$Pause(); }); setTimeout(function () { nestedSliders[currentIndex].$Play(); }, 2000); }...
Jssor Customizable
Given you have 4 sliders and 4 buttons (buttons are your own outside slider), make 1 slider visible and the other 3 hidden. Detect click of buttons and switch slider to display. Position of navigator is adjustable. Note that 'slides' container and navigator container are in the 'outer container'....
Jssor Thumbnail Navigation Doesn't Slide/Drag
javascript,jquery,slider,jssor
I checked your slider, there are totally 9 slides. In the $ThumbnailNavigatorOptions, you set $DisplayPieces: 10. That's to say, the total 9 thumbnails are all displayed already, there is no chance to drag to display more. Please set $DisplayPieces: 8, thus you can get 8 displayed and another one hidden,...
JSSOR Full Width Slider images get artifacts when transitioning
I solved my problem by using another plugin. Others in my situation might want to try http://responsiveslides.com for another plugin.
problems JSSOR Slider
There are 3 ways to reduce the impact, please kindly have a try. 1. Set $AutoPlay option to false and then make it auto play by api call (jssor_slider2.$Play();) after the first scale. function ScaleSlider() { var parentWidth = jssor_slider2.$Elmt.parentNode.clientWidth; if (parentWidth) jssor_slider2.$ScaleWidth(Math.min(parentWidth, 960)); else window.setTimeout(ScaleSlider, 30); } ScaleSlider(); //...
Jssor force slide from an external html element
jssor_slider1 = new $JssorSlider$("slider1_container", options); //call $PlayTo when a button is clicked jssor_slider1.$PlayTo(3); reference: http://www.jssor.com/testcase/api-play-pause-goto-playto-test.source.html http://www.jssor.com/development/reference-api.html...
How to bound images with border-image?
Please remove the following lines #sld { padding-top: 10px; padding-bottom: 10px; } And add box-sizing as below #sld img { border: 20px solid #f4be52; border-image-source: url('http://codeitdown.com/samples/wooden_frame.jpg'); border-image-slice: 50 65; box-sizing: border-box; } ...
Get and set index of jssor in javascript programatically
javascript,html,indexing,jssor,selectedindex
//detect url to check index to show at the begninning. var indexToShowAtTheBeginning = 1; var options = { ... $StartIndex: indexToShowAtTheBeginning, ... }; Also, you can change index at runtime in following manner, jssor_slider1.$GoTo(index); or jssor_slider1.$PlayTo(index); ...
Jssor slider does not start automatically
You are setting the width of the slider 70% of the available width. //calculate slider width as 70% of available width var sliderWidth = availableWidth * 0.7; So I changed that to : var sliderWidth = availableWidth * 1; Or much better : var sliderWidth = availableWidth; Check this plunker:...
Jssor with jquery only displays first picture
<!-- it works the same with all jquery version from 1.x to 2.x --> <script type="text/javascript" src="../js/jquery-1.9.1.min.js"></script> <!-- use jssor.slider.mini.js (39KB) or jssor.sliderc.mini.js (31KB, with caption, no slideshow) or jssor.sliders.mini.js (26KB, no caption, no slideshow) instead for release --> <!-- jssor.slider.mini.js = jssor.sliderc.mini.js = jssor.sliders.mini.js = (jssor.core.js + jssor.utils.js +...
Jssor Slider - Relative dimensions cause error in IE11
Jssor Slider requries width/height specified in pixels. See the documentation for details - http://www.jssor.com/development/reference-ui-definition.html. If there's a constraint and the dimensions cannot be specified in pixels, you can use jQuery to compute the absolute values. Example: var $container = $("#" + containerId); var containerWidth = $container.width(); var containerHeight = $container.height();...
JSSOR slider will not stay positioned properly
the post you referred is full screen slider, you may just need a full screen slider. download jssor slider and open 'demos-jquery\full-width-slider.source.html'...
Embedding JSSOR slider
javascript,jquery,css3,slider,jssor
I had a look at your page, and I found you placed the 'jssor.slider.mini.js' in root folder. So, the correct reference path is, <script src="/jssor.slider.mini.js"></script> or <script src="jssor.slider.mini.js"></script> Btw, the 'jssor.slider.min.js' and 'jssor.slider.mini.js' are the same, you need only one. Please remove the following line, <script src="js/jssor.slider.min.js"></script> Edit: And you...
JSSOR slider: Image Gallery demo keeps showing highlight image on mobile
For mobile device, the mouse over/out behavior is different from desktop. Please use :active instead of :hover for mobile device. So, please replace all ':hover' with ':active' in the thumbnail navigator skin css. Re Edit 3: Given a thumbnail prototype and a thumbnail source as below, <!-- prototype --> <div...
JSSOR Slider Min-Height change needed
//responsive code begin //you can remove responsive code if you don't want the slider scales while window resizes function ScaleSlider() { var parentWidth = jssor_slider1.$Elmt.parentNode.clientWidth; if (parentWidth) { //for example minHeight is 300; var minHeight = 300; var newWidth = parentWidth; var newHeight = jssor_slider1.$OriginalHeight() / jssor_slider1.$OriginalWidth() * newWidth; if...
How to multiply (double) arrows in Jssor Slider
Yes, you can add arrows for thumbnail navigator. See slider with 4 arrows demo Reference http://www.jssor.com/demos-jquery/thumbnail-navigator-with-arrows.source.html...
jssor full height or full screen slider / possible?
please use following code to scale slider to full screen, //responsive code begin //you can remove responsive code if you don't want the slider scales while window resizes function ScaleSlider() { var windowWidth = $(window).width(); if (windowWidth) { var windowHeight = $(window).height(); var originalWidth = jssor_slider1.$OriginalWidth(); var originalHeight = jssor_slider1.$OriginalHeight();...
Jssor - How to display multiple thumbnail navigator on the same container
javascript,jquery,html,css,jssor
Please follow steps below to work it out. make a main slider with thumbnail make child sliders with thumbnail place each child slider in each slide of main slider. Btw Please let me know the thumbnail skin for main slider, and the thumbnail skin for child slider, I will work...
images from database not getting loaded in Jssor Slider
javascript,image,slider,loading,jssor
According to your code $('#slides').append(slideData), please add id attribute to 'slides' container. <div id="slides" u="slides" ...
JSSOR Slider - How stop thumbnail navigator onHover?
It is a bug, i fixed it just now. Please download the latest version. You can set $PauseOnHover: 12 (means freeze on mouse over) for thumbnails. $ThumbnailNavigatorOptions: { ..., $PauseOnHover: 12, ... } Reference: http://www.jssor.com/development/reference-options.html...
how to create rtl tab slider with Jssor Slider Plugin
jquery,tabs,slider,right-to-left,jssor
Please set $StartIndex to 4 (the last index of your slides), and set $AutoPlaySteps to -1. var options = { ... $StartIndex: 4, //if you have 5 slides, the last index is 4 then $AutoPlaySteps: -1, ... }; ...
Jssor slide out each caption
transition,slide,jssor,caption
't3' is for play out as well as 't2', but 't3' plays after 't' immediately. And you can set 'd3' to 3000 to specify the delay (3s). <div u=caption t="yourfadetransitionname" t3="yourfadetransitionname" d3="3000" ... Reference: http://www.jssor.com/development/slider-with-caption-jquery.html...
Jssor - Uncaught TypeError: Cannot read property 'currentStyle' of undefined
The following lines are not necessary, please remove it. var _CaptionTransitions = []; $CaptionSliderOptions: { //[Optional] Options which specifies how to animate caption $PlayInMode: 1, //[Optional] 0 None (no play), 1 Chain (goes after main slide), 3 Chain Flatten (goes after main slide and flatten all caption animations), default value...
Jssor Slider Bullet display at the top when using linked css
Jssor slider will duplicate 'outer container' and 'slides' container while initialize. And it will remove id attribute from duplication. Duplicate 'outer container' is to scale the slider. Duplicate 'slides' container is for slideshow purpose. I see. Please replace <div id="slider_container" with <div id="slider_container" class="slider_container" And replace div#slider_container { with div.slider_container...
JSSOR gallery: Captions on Image Gallery w Vertical bar?
<script> ... var _CaptionTransitions = []; _CaptionTransitions["CLIP|LR"] = {$Duration: 900, $Clip: 3, $Easing: $JssorEasing$.$EaseInOutCubic }; var options = { ... $CaptionSliderOptions: { //[Optional] Options which specifies how to animate caption $Class: $JssorCaptionSlider$, //[Required] Class to create instance to animate caption $CaptionTransitions: _CaptionTransitions, //[Required] An array of caption transitions to play...
How to remove beginning of filename in PHP?
This only take effect if the file name actually starts with a number: $str = preg_replace('/^\\d+-/', null, $fileName); Files which do not start with #{number}- will not be affected by this tailoring process. For your sorting problem. Put a filling 0 before. So use 01, 02, ... and so on...
jssor slider missing content in IE but ok in Chrome
Please specify position, top and left for the element. <div style="position: absolute; top: 0px; left: 0px; color:white;font-size:200%;">THIS TEXT WILL SHOW UP IN IE 11</div> ...
Using JJSOR with large gallery
First approach, please try lazy loading. To make lazy loading work, please simply replace <img src="url" with <img src2="url" Second approach, as you mentioned above, you 6 categories of images. Load the first category at the beginning and load others on demand. And follow the following steps to recreate the...
JSSOR Slider not visible
javascript,jquery,html,css,jssor
width of slides container should be 200px instead of 200. Please replace <div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 200; height: 112px; with <div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 200px; height: 112px; ...
Update URL with image names in slider
Jssor or any slider plugin should be fine if you are comfortable with the kind of effects offered by it. Coming to second part of your question. You can store all the image names in some js array in same order as html. Then write an event handler for slider1.$On($JssorSlider$.$EVT_PARK,function(slideIndex,fromIndex){});...
Jssor Slider 2 sliders combination
No need to combine 2 sliders. Please try to set $ParkingPosition value for the carousel slider. $ParkingPosition indicates position of the current slide. var options = { ..., $ParkingPosition: 50 //50px offset } ...
jssor slider error in bullet navigation
javascript,jquery,html,css,jssor
Please download jssor.slider.fullpack.zip, unzip it and find 'skin\bullet-01.source.html'. The bullet navigator skin looks like, <!-- Bullet Navigator Skin Begin --> <!-- jssor slider bullet navigator skin 01 --> <style> /* .jssorb01 div (normal) .jssorb01 div:hover (normal mouseover) .jssorb01 .av (active) .jssorb01 .av:hover (active mouseover) .jssorb01 .dn (mousedown) */ .jssorb01 div,...
JSSOR Slider: Text and images not showing on Internet Explorer, including IE 11
jquery,css,internet-explorer,slider,jssor
I noticed you specify width in 'rem' manner. Please specify size of elements in pixel, <div class="hero-slider-container" id="hero-slider-container"> <div class="contain-slides" u="slides"> ...
jssor slider, how to set duration for each slide on autoplay?
I have just added this feature, please download the latest version. Now you can set $$AutoPlayInterval option, and also, you can set idle time for each individual slide as follows, <div u="slides" ...> <div><img u="image" src="image_url_1" /></div> <div idle="2000"><img u="image_url_2" /></div> <div idle="3000"><img u="image" src="image_url_3" /></div> </div> ...
How can I make JSSOR Slider have clickable images without breaking slide functionality?
Jssor Slider will stop 'click' event from firing if there is successful drag operation. But I am not sure if the fancy box will capture the 'click' event before jssor slider. So, please open your fancy box programmatically in following manner, <script> jQuery(document).ready(function ($) { var options = { $AutoPlay:...
Jssor: add vertical scrollbar when page is to long
var options = { $AutoPlay: true, //[Optional] Whether to auto play, to enable slideshow, this option must be set to true, default value is false $DragOrientation: 1 //[Optional] Orientation to drag slide, 0 no drag, 1 horizental, 2 vertical, 3 either, default value is 1 (Note that the $DragOrientation should...
How to make caption with fixed width on full width responsive jssor slider
Everything in Jssor Slider should be scaled along with the slider. What you can do is to create your own animation and place it above the slider....
issue in loading array of images from database into jssor slider on Page show event
database,dynamic,data,slider,jssor
You can populate list of images and then initialize jssor slider. Make sure that you get slides html code populated before you initialize jssor slider. For example, //call the following method when the ajax call returns function OnDataReady(data) { //analyze data and fill the <div u="slides' ...> element with correct...
How to set default tab in jssor “tab slider text” jquery demo example
To display #2 table at the beginning, please set $StartIndex value as 1. var options { ..., $StartIndex: 1, ... } ...
jssor - [an error occurred while processing this directive] message
There was an issue in my code, some # in comments that created the error. All good now!
Unable to figure out how to use navigator with Jssor Slider
<div id="bj3dd" style="left: 0px; top: 0px; width: 600px; height: 300px;"> <div data-slides="" u="slides" style="width: 600px; height: 300px;"> <div> <img u="image" src="http://www.jssor.com/img/photography/002.jpg"> <img u="thumb" src="http://www.jssor.com/img/photography/002.jpg" style="width:50px;height:50px;"> </div> <div> <img u="image" src="http://www.jssor.com/img/photography/003.jpg"> <img u="thumb" src="http://www.jssor.com/img/photography/003.jpg"...
How to use jssor carousel to build client carousal
Please set $SlideEasing option as follows, var options = { ... $SlideEasing: $JssorEasing$.$EaseLinear, ... }; ...
Weird behaviour of jssor slider when deployed as cloud service on chrome
css,jssor,azure-cloud-services
I tried the above suggestion but it set the image to less than a half of the screen so I tried: jssor_slider1.$ScaleWidth(Math.min(bodyWidth, 2100)); 2100px is the resolution of the largest monitor I have tried this on, the problem only seems to exhibit when it is deployed to azure and not...
Q: Jssor account for body padding in Scalewidth
As there is 10 + 10 = 20 padding in width, if (bodyWidth) jssor_slider1.$ScaleWidth(Math.min(bodyWidth - 20, 619)); ...
JSSOR conflict with Ajax?
There is no conflicts with ajax call. You can initialize jssor slider when the ajax call returns. var jssor_slider1; function getImages(n, type){ $.ajax({ url: "./r/"+type+"/"+n+"/img", success: function(data){ //you can optionally pause the slider if it exists already. if(jssor_slider1) jssor_slider1.$Pause(); //empty slider1_container and repopulate html code in slider1_container again, and then...
Jssor Images Too Zoomed In
javascript,jquery,slider,jssor
Just added a max-width and max-height to my CSS, like this: <style> #slider1_container img { max-width:100%; max-height:100%; } </style> ...
How to slide to Right in JSSOR plugin
Good to know the requirements and thanks for the good question. I have just fixed $JssorSlider$.$EVT_STATE_CHANGE event trigger and updated downloads. Please download the latest version. Please set $AutoPlay to false and use api call to reach your goals. <script> jQuery(document).ready(function ($) { var options = { $AutoPlay: false, $DragOrientation:...