-
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
Hi i am also looking for the same thing ..
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
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!
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
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_
).
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.
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
Asked: 2011-12-23 11:52:40 +0800
Seen: 286 times
Last updated: Apr 16 '19