Discussion on CCSlider - jQuery 3d Slideshow Plugin


cosmocoder supports this item


340 comments found.

I have a client that needs a CSS-based slideshow. Do you think I can use a WordPress plugin such as the CSS & JavaScript Toolbox WordPress plugin: to add this to their website?

Thanks, Kevin

Are you asking if you can add CCSlider to your client’s website? If so then not that CCSlider has its own WP plugin version that you can use. But also note that CCSlider relies on javascript to drive the slideshow.

Hello, We currently use your script 162445-ccslider, unfortunately we didn’t find the way to provide us a distinct pause time by slide.

The documentation specify the parameter pauseTime with this description : “The time interval for which a particular slide will be visible before advancing on to the next.”

After a quick look on the code I didn’t acheive to find how to specify this parameter by slide rather globaly.

Could you help us on this issue, is there another approach than revise the code?

Best regards,


The slider only supports a global setting for pausing each slider. If you want to have a per-slide setting then you will need to modify the slider code.

Ok but it is not what indicated in the slider documentation : The documentation specify the parameter pauseTime with this description : “The time interval for which a particular slide will be visible before advancing on to the next.” For me “Particular” means “Each” and not “Global”

Could you help us on this issue, is there another approach than revise the code? Best regards,

One option would be to handle the stopping and starting of transitions entirely yourself with the slider api functions. First you will need to disable the autoplay, and then use the afterSlideChange event to detect the current slide index and based on that use a setTimeout with a delay of your choice to call the next() to move on to the next slide.

No idea how people rate, but perhaps the don’t use a mobile phone. I’d give it a 1 star.

hi. i have the question. How do i take off the dots under the slide? thanks

You need to disable the controlLinks setting.

where is the controlLinks ? thanks again..

got it…


since I added a ssl https on my website.. the cslider won’t work

here is a page

the big white rectanble is supposed to be the cslider


The error is shown in the browser console – you are still loading jQuery using http url, so the browser blocks it. Just change it to https and it will work.

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.

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.


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.

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.


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.


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.


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.


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.

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)

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.

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 !

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