Discussion on CCSlider - jQuery 3d Slideshow Plugin

Discussion on CCSlider - jQuery 3d Slideshow Plugin

Cart 2,299 sales

cosmocoder supports this item


346 comments found.

Hello I am interested in purchasing your plugin. I would like to know if I can use it in my HTML5 page? Or does this plugin only work on wordpress page?

Thanks for your interest!

This particular item is the jQuery plugin version so it will work in any HTML page. There is a separate WP plugin version of CCSlider.

Many thanks for your reply, I think I didn’t explain myself properly. It is the background of the whole page, I want to change to white from your original colour.. Could you be so kind as to tell me how to do that.

Many Thanks

You should not be using the css code used in the slider demos, but instead embed the slider into your own page. In the demos the background is applied to the `html` element.

Many thanks for explaining that, I will give it a try.

I have just recently purchased ccslider-jquery 3d slideshow plugin. It is a really good design. I have one question, I would like to change the background to white, sadly my knowledge on coding is very limited. Could you direct me to where I need to look to change the colour.

Many Thanks.

Thanks for purchasing!

If you are trying to change the background of the slider container, then you need to target the id or custom class that you have applied to it. If you have not applied any and there is only one instance of CCSlider in your page then you can use the default classname that is applied to the slider container:

.ccslider {
    background-color: #fff;

hello wil i be able to import this html files into my google sties website? thanks

I have no experience with Google Sites, but if it allows using/embedding custom html, css and js files and any custom code then you should be able to use the slider there.

Yes it’s allow custom HTML etc.

Good luck with your sales

Hi I have now bought the CCSlider and paid via PayPal. After the download I wanted to install the plugin and am shocked to see that this is NOT the Wordpress version that I actually wanted to buy.

Is there any way I can change this? Many thanks and regards Mike Bangle

Please purchase the WP plugin version here first – And then request for a refund for the jQuery plugin version, and I will approve it.

Thank you very much. I have now made the purchase and if I find it refunded, I will do it right away.

I have another pre sales question I noticed on your demo4 slider you have thumbnails can those thumbnails be placed on the left.right,top also?

By default the thumbnails are put at the bottom. You can try to use custom css to change their position.

I have a pre sales question am I able to change the font style to like cambriai italic or any other type of font families?

You can use whatever font family you want with your custom css.

i bought this and found out it cant do portrait photos (like from mobile) how can i get it to do this? right now it just stretches them out to landscape :(

Are you trying the 3d mode? If so did you specify the imageWidth and imageHeight params when initializing the plugin?

Yes, 3d mode. I did not since there is a mix between the portrait and landscape images. Is this not supported?

Those params are required when using 3d mode. You can try setting the imageWidth to the maximum width of your images and similarly for imageHeight.

I am looking for a software that allows to integrate the files into the slideshow automatically without doing it one by one. If CCSlider does not allow it, can I be refunded?

Sorry to hear that CCSlider is not suiting your needs, but if the only reason for you not liking it is that it can’t scan your images, then that is not a viable reason for getting a refund as the slider was never described to have this feature and it works perfectly otherwise.

Ok thanks !

Hello, I bought the CCSlider – jQuery 3d Slideshow Plugin, my question : I,ve got a folder whith 76 images .png, Should I build my picture-by-picture gallery, or can I do it automatically with all the pictures in the folder?

This is a jQuery plugin and doesn’t have the capacity to scan for images in a folder so you have to manually reference all your images in the html file when initializing the slider. If you have a Wordpress site however, then you can use the WP plugin version of the slider, which will allow you to bulk upload all your images to be used as slide items.

Hello, I love these 3d effects. The plugin is not working on jquery 3 (I need jquery-3.2.1.min.js for the rest of my plugins on the page) Can you please post an updated version? Thank you, will love to leave feedback once this issue is resolved.

Thanks for purchasing!

The plugin is compatible with the latest jQuery version (v3.4.1 at the time of writing). I assume you are using the $(window).load() call of jQuery to check for when the images are loaded and then initialize the plugin. If so then you just need to change that to use the onload event like this: $(window).on('load', callback)


please go to :

when i put the images to 2000px and the slider to 2000px when i load the page… i see the images passing from 2000px to ??px

the slider seems to be the master of a static height

in css i put widht : 100% and height : 2000px

only the 3 images goes to 2000px but not the slider and then the 3 images get smaller at a static slider height


First of all, you need to fix the reference order of scripts in your page, jQuery should be loaded first and then all the scripts. Right now the jQuery easing plugin is being loaded before jQuery itself.

Also you did not set the loading state of the slider correctly so that the images don’t show while the page is being loaded. Check the provided demos and the documentation to see how this is to be done.

As to the slider height, it will be set automatically by the plugin. The plugin determines the aspect ratio to use based on the size of the largest image in the list of images provided to the slider, and thereafter when the window is resized it automatically resizes itself maintaining that aspect ratio.


can you go to this test page on a desktop please

the 3 images are showing but not sliding thanks

i have this cslider on another site and it is working

The slider is not working because you have not included jQuery in the page

thanks i don’t understand your answer.. i will give you details in case.. i have <script src=”js/jquery.ccslider-3.0.2.min.js”></script> <link rel=”stylesheet” href=”css/ccslider.css” /> at the top of the page

i have </script>

    $(window).load(function() {
            effectType: '2d',
            effect: 'fadeZoom',
            _3dOptions: {
                imageWidth: 1000,
                imageHeight: 1000,
                innerSideColor: '#444',
                transparentImg: false,
                makeShadow: true,
                shadowColor: 'rgba(6,6,6,6)',
                slices: 2,
                rows: 4,
                columns: 4,
                delay: 1000,
                delayDir: 'first-last',
                depthOffset: 100,
                sliceGap: 20,
                easing: 'easeInOutCubic',
                fallBack: 'fadeSlide',
                fallBackSpeed: 1000
            animSpeed: 7000,
            startSlide: 0,
            directionNav: true,
            controlLinks: false,
            controlLinkThumbs: false,
            controlThumbLocation: 'Images/images2/',
            autoPlay: true,
            pauseTime: 0,
            pauseOnHover: false,
            captions: false,
            captionPosition: 'bottom',
            captionAnimation: 'fade',
            captionAnimationSpeed: 1500,
            beforeSlideChange: function (index) { },
            afterSlideChange: function (index) { }

at the top of the page

and i have this has html code

You didn’t include the main dependency of the plugin which is jQuery itself. Check the provided demos and you will see the jQuery script being referenced in the html.


i want to change the slider height but the <script src=”js/jquery.ccslider-3.0.2.min.js”></script> is stoping me to do it

if I erase this link i can manage to make the slider bigger but with this .js i can’t


You need to set both width and height of the slider container through css. If you use 3d mode then you also need to pass values to the imageHeight and imageWidth parameters.


when i put 3 or more pictures with 2d effect

a third picture goes underneath the others overlaping

can you give me the trick to make it slide side by side without overlaping


I need a link to your page to inspect the problem.

hi i am not able to show the left and right arrow so that the clients can skip or come back from pictures to pictures


I need a link to your page to inspect the problem.


i need to set the height more than what it is

i need that the width is 100%

but i need to put the heiht has I want


The imageWidth and imageHeight properties only apply for 3d mode animations. As I mentioned in my last comment, you will need to target the slide images through css and change their size so that they fill out your slider container.

thanks no need to say again as I said in my last message everything worked! i only wanted to know about those two numbers


Good to know that you got it working.

Just purchased and have an issue when installing. When attempting to use this straight out of the box, I get a “find… tooltip” is not a function. Then, after cube’s first slide spins, it stops, gives a b.easing error and stops completely. How do I get this working?

You can prevent the toggling by checking if the div.slider-timer element has the pause class applied or not. When the slider is autoplaying then that element will have the play class.

That did the trick! One more anomaly. On mobile (android, chrome), the cube’s “splits” are visible when on the slides. I took the sidecolor down to a light color, but would rather show off the cubes’ sides moreso. Is there a way to make the splits go away when slide has settled?

Those “splits” are unfortunately sometimes visible in some browsers due to their different handling of anti-aliasing in canvas. It can be alleviated sometimes by ensuring that the slider size has the same aspect ratio as the image’s native aspect ratio and also the image’s width/height is a multiple of the number of splits you are using.

Hello, I just bought your plugin and have a question. I have a lot of thumbnails but when I add them they all stack under the slider, how can I make the overflow hidden with the ability to scroll to see more?

There is probably a css conflict that is causing this. I need a link to your page to inspect the problem.


Tell us what you think!

We'd like to ask you a few questions to help improve CodeCanyon.

Sure, take me to the survey