I'm developing a webpage for that contains Jssor slider. I'm using jssor.slider-27.5.0.min.js. The webpage also have daterange picker. I have button that generate Jssor slider based on selected dates.
At default, the webpage brings images for the past 30 days and show them as Jssor slider. At this point, the slider works fine. When the Jssor slider generator is clicked, the existing Jssor slider is removed using $("#jssor_1").html(""). Then another Jssor slider is created and correct image is shown on the webpage. However, I cannot change/drag pictures.
Can you please help me to resolve my issue?
thanks.
Simply clear inner html will break the dom hierarchy of elements, it doesn't work.
You can use $AppendSlides(slidesHtml[, slideIndex]), $RemoveSlides(slideIndices), $ReloadSlides(slidesHtml) to manage slides.
See https://www.jssor.com/development/api-methods-properties-events.html
Related
What does the jssor Javascript base its image width calculations on for the jssor_1 div id?
I am creating a jssor image slider using Blogger Code option (paid subscriber) to copy/paste in my website CMS. Created page here: http://lower-hudson-regional-information-center.echalksites.com/groups/41146/zlorem_ipsum_1/just_slides
In <1300 browser width (and phone sized) responsive modes I observe the image width appears to extend too far on the right overflowing its div container. Screenshot example: screenshot with right edge overflow
Only possible issue I have been able to identify is that something is causing the Jssor Javascript to calculate an image width for the jssor_1 div id that is skewing the display of the slider on the page.
I am hoping a Jssor Javascript and/or CSS guru might lend their expertise in identifying the cause of this issue with using my jssor slider in my website CMS.
You defined padding for the css rule 'social-content'.
Please move jssor slider out from <div class="social-content">
Can form fields be layered on top of the jssor slider?
I might want to use the content slider but have search form fields on top of the slider that don't change position even though the slider is changing pics.
I looked i think at all the jssor samples but didn't see one quite like as described above.
Thanks
I have just started using a library called JSSOR (for sliding elements) http://www.jssor.com/ and I'm wondering if there can be more than one element sliding on the same page.
I couldn't get it to work using a javascript library called marquee (not marquee the tag).
Yes, you can place multiple jssor sliders on one page.
Note that different slider uses different name. If the name of the first slider is slider1, you can name the second slider as slider2 then.
Btw, you can search jssor multiple on stackoverflow.
I check out a demo in jssor site using navigation arrows for thumbnail slider (http://www.jssor.com/demos/thumbnail-navigator-with-arrows.html), but I didn't find example code. Can someone explain how to add arrows to a thumbnail slider?.
Thanks, now it works using the thumbnail skin and ArrowNavigatorOptions from demos-jquery\thumbnail-navigator-with-arrows.source.html as you suggested.
is there a way to display several slides at once with the ionic slider (ion-slide-box) ?
Can you help me achive a slider like this one :
Thanks !
I suggest you try to use ion-slides, it uses Swiper API and introduced in ionic v1.2.0.
ion-slides
Ionic Slides in ionic v2
Swiper Demos
ion-slide-box works without any additional CSS. Just ionic.css. Have used it in my app. but as far as I see, it seems to be meant to only show one slide per page. Are you trying to modify CSS and get multiple slides to display per page? If so, I guess that's not the right approach.
This is the description given by Ionic for the ion-slide-box
The Slide Box is a multi-page container where each page can be swiped or dragged between:
See http://ionicframework.com/docs/api/directive/ionSlideBox/