Dynamic slides loading about slider HOT 16 CLOSED

Jssor Slider works with certain number of slides. You can't add/remove slide dynamically.
But you can alter content of any slide dynamically.

<div u="slides" ...>
<div id="slide0"><!-- any content here --></div>
<div id="slide1"><!-- any content here --></div>
<div id="slide2"><!-- any content here --></div>
</div>

from slider.

Thank you for the answer. My question was precisely about what you are saying with a possibility of a future support. Would you consider adding a support for dynamically extending/shrinking container of slides?

from slider.

Sorry, I didn't realise you have a lazy loading mechanism through the jquery option $LazyLoading and html attribute src2 on the img. Could you correct me if I'm wrong?

My goal is to have a slider with N images. I'd like the webpage to load as fast as it can, so I do the first
<img u="image" src="/xoxoxox/gogog.jpg" />
and then
<img u="image" src2="/xoxoxox/gogog.jpg" />
for the rest of the images.

• Do I understand correctly, that the web page will be loaded with one image only, and then the rest of them will be loaded dynamically as the slideshow goes?
• And $LazyLoading will fetch the specified number of images proactively?

from slider.

Jssor Slider will load images with format on demand.
That's to say an image with lazy loading format will not be loaded until it comes into view.

Actually, $LazyLoading also controls the pre-loading of images in adjacent slides.
If the value of $LazyLoading is 0, it will load images in current slide only.
If the value of $LazyLoading is 1, it will load images in current slide and 1 prev slide and 1 next slide.
If the value of $LazyLoading is 2, it will load images in current slide and 2 prev slides and 2 next slides.
And so on...

Jssor Slider will not delay loading of image which is not with lazy loading format.

So, to achieve your goal, you can set $LazyLoading to 0.

from slider.

One part which I'm still missing is the purpose of src2 attribute of img html tag. Do I get it right that it is used in tandem with $LazyLoading, so to speak if all img 's have src tags, then not depending on the value of $LazyLoading, all of them will be loaded at once during the web page load and only if an img has src2 attribute instead of src, then $LazyLoading comes into play?

from slider.

Yes, exactly!

from slider.

Cool! Could you also shed a little light on $DisplayPieces for me? Do I get it right that the value of $DisplayPieces identifies how many slides will be shown at once in the container, such as here? And it is also capped by the total width of the container, such that if
slideWidth * $DisplayPieces > containerWidth
then $DisplayPieces value is altered to fit the container?

from slider.

By default, slide inherit size from 'slides container', the size of slide is the same as 'slides container'.

Also, you can set slide size manually by specify '$SlideWidth' and '$SlideHeight' options.
In this situation, slide size is different from 'slides container', and you have chance to display more than one slide in the 'slides container'.

Open 'demos-jquery\carousel-slider.source.html' you can see $DisplayPieces value is 4, $SlideWidth is 200, and width of 'slides container' is 809, and $SlideSpacing is 3.

from slider.

Thank you!!! This is an absolutely gorgeous project!

from slider.

Hi guy!
I also want to make dynamic slider with this awesome library but it seem does not support.
Do you have any update on this?

Thank

from slider.

@purepure You can dynamically fill html code and then initialize jssor slider.

from slider.

yes, it can be. But in my case, I use javascript to load list of image then display. There are about 5 lists, each list contains difference amount of image. When user select image list, it will display as selected. So it mean I have to initialize jssor everytime. Even I tried this way, but it still get error.

Is there any sample about this ?

from slider.

For now, you need to initialize it every time. I will improve this feature to allow adding/removing slide later.

Note that when jssor slider initialize, it will reformat the hierarchy of raw html elements in the slider1_container. It is not reusable then, you need to remove and then repopulate the whole slider1_container to initialize the second slider.

from slider.

I tried to re-init it every time but still get error. The list can repopulate success but cannot work (scroll,...). I am afraid I wrong somewhere. At least as you said, it can be dynamic

Thank

from slider.

Not only repopulate the slide list, you'd repopulate the whole slider element.

from slider.

got that point. I will try again. Thank

from slider.