Discussion on CardSlider - jQuery 3D Card-Style Image Slider


hkeyjun supports this item


18 comments found.

Looks great GLWS! Be good to see a WP version of this :)

Thanks :)

Very nice good luck with sales.

Thanks! :)

That is something I am looking for

HI hkeyjun,

nice, very nice.

Is it possible when under 995px the img come the bg to change the orientation of the img to get it more strait.

Sorry for my english and i hope you will understand my question.


Hi, yes. You can also change the angle of the images with css media query. It is controled by css like “transform: translateY(-50%) rotateX(58deg) rotateZ(31deg);”. Thanks!

Hi hkeyjun, two last question for you before i buy your slider.

The first one is the slider is responsive as i saw it ,but the height remain the same, so is it possible to get the height responsive not with css (media queries) ?

And the second question is, can we add two slider on the same page but with different size.?

Hi claudeabandonato, 1) yes, if you do not want to use media queries, you can change the height according to the slider width by add an event handler on window resize event with few lines code. If needed i can make the demo for you. 2) yes,it is easy to be done. Thanks :)

Very nice waiting for WP version!!!

Hi this is really nice – do you have plans for a WP version soon?

Sorry, there is no plan for make the wordpress version now.

The 3d effect doesn’t work in Chrome for me. Should this be the case?

Hi aethernaut, can you tell me what’s the os and chrome version. Thanks :)

Hi hkeyjun – I updated Chrome and the issue has fixed itself. I was on an older version than first thought. :)

Yes i would love to see a wordpress plugin..looks great guys


Is it possible to have the cardslider not to take up full screen? I just want to put my 3d images at the bottom of my page as slider

Please advice

Sorry for reply so late, 1. yes, you can use it in a not fullscreen container. 2. the 3d effect is used css, it you want you can just copy the needed css and use it to make 2d image into 3d. Thanks:)


it is possible to make the 2d image into 3d and do not want the slider function?

hy, i am looking for a goto()-method. not only prev() and next(), but also direct to a slide with specific id/class or at least identified by number. is this possible somehow with your plugin already? thanks :)

Hi,you do not need the ‘loaded callback’, do it like this
        //Get CardSlider instance
        var cardSliderObj = $('#demoslider').data('cardSlider');

        //Here !!!

hy, i tried it like this but it doesn’t work. but if i call the goTo like 2 seconds delayed, it changes the slide… that’s why i thought of the callback.

is any kind of startSlide-option available? thanks :)

That’s because the functon will be cancel when a slide is animating-in. Sorry there is no such a callback now. I will try on it!

Hey! What changed in the 11 January 16 updated? Thanks!

Hi, i have added the change log to the ‘Item Details’ page: 2016, Jan 11 v1.0.1 - Fixeded: small css change, fixed when uer apply css transition to all ‘a’ tag may cause the slider flicker and not work correctly.

Thanks :)

Great update thanks :) And amazing slider, thanks for making it!!

Glad you like it, thank you very much !!!

hi, Can this work in Wordpress via raw html and raw js in Visual Composer?

Hi,yes. In cardslider.css line:480

.cs-slide > .cs-media {
    left: 0;
    width: 100%;
    pointer-events: none;
You just need remove
    pointer-events: none;

Working Great!

One last thing,

What is the correct placement and syntax for: There 8 options that you can config : “autoPlay”, “pauseOnHover”, “interval”, “nav”, “dots”,”shadow”, “shadowAnimation”, “card3d”. And tow API for control the slider : “prev()” , “next()”.

In my case I want to remove the dots but do not see the exact syntax or where to place.


figured it out. disregard. :)

Very nice! will this work on a WP pages? or how can I easily embed this on to a WP hero banner? Thanks!

Hi,this is a jQuery plugin if you want you can make it work wordpress by follow these tutorials on how to add javascripts and styles to wordpress http://gabrieleromanato.name/inserting-and-using-jquery-plugins-in-wordpress/ https://premium.wpmudev.org/blog/adding-scripts-and-styles-wordpress-enqueueing/ . Or try use https://wordpress.org/plugins/css-javascript-toolbox/ Thanks

Here I was trying to fit in my site and did not work, but in the demo worked, so after breaking my head a little I found that using the Material Design Lite does not work, but still could not find the reason. Any idea?

The 3D effect works, but without any animation or slider change.

Hi,can you give your demo url, so i can try find out what wrong with the page. Thanks ! My email: hkeyjun@gmail.com

I do not put online yet, should do that in a 2 or 3 days, then send you the link, ok? To tell the truth only the 3D effect has make me happy, but if it works totally in Material Design Lite better :)

Hi Hkeyjun,

We have successfully installed the plugin in Wordpress. However, in some cases (I can’t determine why), the plugin does not display image or text. It displays only the background color. Can you please help us understand what is causing such behavior?

Hi, can you give me your demo url? So, i can help to find the problem! Thanks!

http://pingar.com/ If there is anything else that you need please feel free to write me an email.

I just want to mention that simagald is in my team, but I was the one who purchased the plugin.

Awesome! Like this stuff. Thx a lot!

Hi Hkeyjun,

just a little bug I’ve found. I’ve did a media query css on a website for smartphone size of 480px. In this case, the transparency of the cards is nearly 100% so the full card shadow is visible. If I turn the phone to a size of > 900px the effect is gone and everything is in proper state. Any idea?