-
FEATURED COMPONENTS
First time here? Check out the FAQ!
Hi
I there a ZK component available for jQuery carousel. If not what could be the alternative component that i can use
Thanks
i have updatet the sample. if i add a div to the slider then it works. but if I delete one div after the other from the slider the div will still be displayed in the slider. I can not empty the slider!
I need the slider for a selection of different criteria. The slider is displayed with different divs. The divs contain a click event. If a div is clicked then all existing divs should be deleted from the slider and replaced with new divs with different content
can you please update the zk fiddle example and post the updated link showing your problem? explaining the exact steps reproduce the issue: http://zkfiddle.org/sample/h8g5dg/3-update-bxslider
This will help to reply more exactly avoiding confusing responses.
If you're interested in dedicated support you can also contact us directly. https://www.zkoss.org/support
I add the following parameters to the slider
w:onBind="this.bxSlider = jq(this).bxSlider({
slideWidth: 200,
minSlides: 1,
maxSlides: 4,
slideMargin: 20
});"
after that i append a new Div to the slider. It is ok. But when i delete a div from slider then it does not work properly.
I want to add on the fly divs to the slider. Then delete all divs from the slider and refill it.
no problem, simply call the documented method: destroySlider();
After reading the 3rd party documentation your (more precise) question could have been: When/how do I call the destroySlider
method during ZK-component/widget detachment?
(This is a ZK forum so please try to keep your questions ZK specific. ;) to get better help)
Answer is here: http://zkfiddle.org/sample/h8g5dg/3-update-bxslider
w:onUnbind
would have been too late, as it is called after ZK deletes the DOM element (preventing proper cleanup by bxslider).
That's why you have to override the unbind_
method and call destroySlider before calling the original method ($unbind_
).
Here an example how items in the slider can be added, removed (simply by appending or detaching child components of the surrounding div, and reloading the slider at client side). http://zkfiddle.org/sample/h8g5dg/2-update-bxslider
The inline onClick code in this example can be can be called from an event listener in a java composer (just inline for simplicity of the example)
It is important to call the reloadSlider function on the bxSlider object as documented here: https://github.com/stevenwanderski/bxslider-4
I would like to use the slider but do not know how I can delete the slider and refill again. I have to change the content of the slider more often. I just can not manage it. I use MVC pattern. Please give me javascript-snippet!
The following is a simple zul page using the bxslider plugin (http://bxslider.com) but it is quite easy to use any other jq plugin in your page.
<?page title="ZK Carousel" contentType="text/html;charset=UTF-8"?>
<zk>
<style src="jquery.bxslider.css" />
<script src="jquery.bxslider.min.js" />
<script type="text/javascript"><![CDATA[
zk.afterMount(function() {
$("$slider1").bxSlider({
slideWidth: 200,
minSlides: 2,
maxSlides: 3,
slideMargin: 10
});
});
]]></script>
<window title="ZK Carousel" border="normal" >
<div id="slider1">
<div class="slide"><image src="images/foobar1.gif"></image></div>
<div class="slide"><image src="images/foobar2.gif"></image></div>
<div class="slide"><image src="images/foobar3.gif"></image></div>
<div class="slide"><image src="images/foobar4.gif"></image></div>
<div class="slide"><image src="images/foobar5.gif"></image></div>
<div class="slide"><image src="images/foobar6.gif"></image></div>
<div class="slide"><image src="images/foobar7.gif"></image></div>
<div class="slide"><image src="images/foobar8.gif"></image></div>
<div class="slide"><image src="images/foobar9.gif"></image></div>
</div>
</window>
</zk>
Hope that helps
/Costas
Asked: 2011-12-23 11:52:40 +0800
Seen: 286 times
Last updated: Apr 16 '19