0

Jquery Carousel

asked 2011-12-23 11:52:40 +0800

Tarun gravatar image Tarun
15

Hi

I there a ZK component available for jQuery carousel. If not what could be the alternative component that i can use

Thanks

delete flag offensive retag edit

11 Replies

Sort by ยป oldest newest

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

WongKamWai gravatar image WongKamWai
11 1

Hi i am also looking for the same thing ..

link publish delete flag offensive edit

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

cyiannoulis gravatar image cyiannoulis
1191 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

link publish delete flag offensive edit

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

andij62 gravatar image andij62
301 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

link publish delete flag offensive edit

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

andij62 gravatar image andij62
301 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!

link publish delete flag offensive edit

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

cor3000 gravatar image cor3000
4466 2 7
ZK Team

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

link publish delete flag offensive edit

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

andij62 gravatar image andij62
301 1 7

Perfect! Thank you.

link publish delete flag offensive edit

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

andij62 gravatar image andij62
301 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

link publish delete flag offensive edit

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

cor3000 gravatar image cor3000
4466 2 7
ZK Team

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

link publish delete flag offensive edit

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

andij62 gravatar image andij62
301 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.

link publish delete flag offensive edit

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

cor3000 gravatar image cor3000
4466 2 7
ZK Team

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

link publish delete flag offensive edit
Your reply
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

Follow
2 followers

RSS

Stats

Asked: 2011-12-23 11:52:40 +0800

Seen: 279 times

Last updated: Apr 16

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More