Jquery Carousel

answered 2013-12-10 00:31:02 +0800

WongKamWai
11 ● 1

Hi i am also looking for the same thing ..

answered 2013-12-10 10:15:06 +0800

cyiannoulis
1201 ● 10

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

answered 2019-04-08 19:36:12 +0800

andij62
315 ● 1 ● 7

Hi all,

i have a question about this task! How can I delete the carousel after loading it and fill it with new sliders on the fly? Can someone help me please and give me the javascript-code?

Regards Andi

answered 2019-04-11 16:14:00 +0800

andij62
315 ● 1 ● 7

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!

answered 2019-04-11 16:54:35 +0800

cor3000
6280 ● 2 ● 7

updated 2019-04-11 16:58:00 +0800

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

answered 2019-04-12 21:03:40 +0800

andij62
315 ● 1 ● 7

Perfect! Thank you.

answered 2019-04-12 23:47:53 +0800

andij62
315 ● 1 ● 7

Now I have one more problem...

   w:onBind="this.bxSlider = jq(this).bxSlider({
        slideWidth: 200,
        minSlides: 1,
        maxSlides: 4,
        slideMargin: 20
      });"

if I delete a slider now it will still be displayed

answered 2019-04-15 12:43:15 +0800

cor3000
6280 ● 2 ● 7

updated 2019-04-15 12:44:40 +0800

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_).

answered 2019-04-16 01:14:43 +0800

andij62
315 ● 1 ● 7

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.

answered 2019-04-16 13:02:28 +0800

cor3000
6280 ● 2 ● 7

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