Discussion on CCSlider - jQuery 3d Slideshow Plugin


cosmocoder supports this item


275 comments found.


Can this use a directory full of images to create slideshow? or do you need to hardcode the image path’s

You need to provide regular <img /> elements in the html.

Hi. I have a pre sale question? Can this slider run completely without any theme? just run with html using style.css ect?

Do you mean to say that you don’t want the styling of the slider that is shown in the demos? The slider package comes with only the bare minimum css code required to make the slider work correctly. On top of that you can apply your styling for the slider.

Just curious if each slide can link to a page on the website that I put it on, and how to go about it.

Thanks for your interest!

You can indeed make each slide act as a link to an external page. The link url’s are provided in the slider html, the details of which you can find in the supplied documentation.

Is it possible to use this slide with limited knowledge of java script? Would I be able to just put my pictures in the demo file, make sure that all the css and javascript files are linked in the .htm file and see it work as long as the images are the same size as what you have in the demo? Or will I need to know javascript? Or does each demo file work as advertised on this demo?

You will need basic knowledge of javascipt, html and css in order to use the slider. You can certainly use the demo files’ source code to help yourself out, but don’t blindly use the entire demo code since that includes some extra files and code for demo purposes.


EvaneA Purchased

Hi and thanks for this nice slider. I show several sliders on a page; I would like to control the ‘autoPlay’ but when I turn it on “false’ , it’s impossible to make slider play manually.. I try to find a way to do what I’m waiting for but no issue seem to exist.

Is it possible to have your help for ? Thanks


EvaneA Purchased

I ‘auto-find’ my solution. Thanks

Good to know that your problem got sorted out.


Our one of slide is Google calendar page.

Can we insert Google calendar in the slideshow?

Can we set the preview slide image on bottom of the page?


The slider allows you to have custom html content for each slide. So if you can insert the necessary html for your calendar then it should work.

CCslider was bought. Is there a page which explained the contents of in-depth setting of a slider style?

All settings have been explained in the provided documentation.

By an easy question, I’m sorry. Where is the background color change in the gray caption bar? Can the direction of rotation of the default of cubeUp be changed? Even if the explanation was read, it wasn’t understood.sorry.

Thank you very much for your cool slider. I customize and am enjoying myself now(^ ^)

The background of the captions can be changed through css.

If you want to change the direction of rotation then just use cubeDown, or any of the other “cube” animations.

hi, we want to use it in the visual composer’s Raw HTML option. Can it work in that ? Thanks

Sorry, I don’t have experience with that so I can’t comment on it. But as long as you refer the necessary js and css files on the page and also include the proper slider initialization code then it should work anywhere.

I seem to be having issues with the pauseOnHover. The option is set under: But it is still pausing. I am also having issues with the navigation buttons missing as well as slide numbers showing at the bottom instead of the cool circle images.

        effect: 'random',
        captionPosition: 'top',
_3dOptions: {
    imageWidth: 900,
    imageHeight: 350,
    makeShadow: 'true',
pauseOnHover: 'false',
beforeSlideChange: function(index) {

Any help would be appreciated. The site can be viewed at www.primarycaregpt.com

You setting “pauseOnHover” with a string instead of a boolean value. The correct way is pauseOnHover: false

Also the base slider css does not style the control links and you will see numbers. See the css supplied with the demo to understand how to style the control links.

Hello, im sorry, but I bought the wrong Version of the CCSlider. I Need the Slider for WP:-( Can you please cancel the resent order, i will additionally buy the version for wp instead? Kind regards, Michael

You will need to contact Support at Codecanyon for this.

Hi I have ccslider as a wp plugin. When I have more than about 12 pictures in a slideshow the thumbnails will be broken down in 2 or more lines. Thats not good for the themes design. Is there a possibility to have only 1 line of thumbnails underneath the pictures which will show only a subset of the thumbnails that will change during the slideshow. I cant find such an option. Thanks for an answer Michael Holstein

Please post this comment in the WP plugin version’s comments section.


sunlite Purchased

Hi. CCSlider works like a charm. The only thing i cannot getting work is a cropping-effect of the slideshow. In case that anybody wants to watch the slideshow on a cell-phone i want to crop the slideshow horizontally with a fixed height because otherwise the slideshow looks super small on a cell. Any idea on how to get this done? I am only using simple 2D-effects. Thanks a lot ;)

You can use css to set a custom width on the slider container on small screens.


sunlite Purchased

Hi Cosmocoder. Thanks a lot. Well it is working, but flickering. What I have is:

HTML: (div id=”slideshow”) (div id=”slider”) ... (/div) (/div)

CSS: slider{height:211px !important; overflow:hidden !important;}

slider img{position:absolute !important;width: 480px !IMPORTANT;height: 211px !IMPORTANT; object-fit: cover;}

This is basically working for firefox, iexplore, safari. but not for safari mobile and on safari and firefox it causes a kind of flickering when having the simple 2D-slide. Flickering is caused by “object-fit”-element. What is wrong on here? P.S. I added the ”#”-Sign in front of slider but in this comment-box it is not working perfectly then and also I used ”<>” for div instead of “( )” ;)

Thanks a lot


I can’t say anything unless I see the slider in your page.


sunlite Purchased

Hi CosmoCoder,

as I was writing in the comment-section … I am trying out to get a cropping-effect done with the slideshow. So I put the slider only on a different server for testing purposes. If you check it out, try it with Firefox (I am using Safari and Firefox and Chrome on a Mac).

Basically the Slider works and it is also cropping. But on Firefox the following slide is skaling small and wide again which causes a flicker. On Safari and Chrome this effect does not appear but there the slide-transitions are not smooth again then.

on an iphone 4-safari-browser the slideshow won’t be skaled. There it is simply squeezed or bulged but not cropped.

on ipads-safari-browser the slides will be shown perfect but when sliding, there is a stutter/movement in the pictures which should not be there.

All these things are only caused by one line I use for cropping (CSS: object-fit: cover;) because the alternative ways are not working properly.

Do you have an idea to get cropping work on the CCSlider?

Thanks a lot Best Regards Mike

Don’t use object-fit as that will interfere with the internal size calculation for the animations. Instead, why don’t you set a custom width/height on div#slideshow and use overflow: hidden


sunlite Purchased

Got it running with the following:

HTML: <div id="slideshow"> <div id="slider"> ... content which comes with the slider ... </div> </div>

CSS: #slideshow{ width:100%; height:338px; overflow:hidden !important; } #slider{ width:1000px !important; height:500px !important; overflow: hidden !important position:relative !important; } #slider img{ position:absolute !important; left: 50% !important; margin-left: -500px !important; top:0; }

With !important I force an overwrite of an existing state and margin-left-value needs to be half of the width by left is 50%. Absolutely without changing stuff inside of “slider” it is not working because the picture is scaling or breaking out of the DIV. I use it in a Typo3-Environment.

Thanks Saludos

Good to know you got it working.


sunlite Purchased

and the Website I forgot: www.vizinside.com

Hi Cosmocoder, got another little question. CCSlider still works like a charme. But I recognized that on a smartphone I cannot scroll down a page when swiping over a slideshow. I need to find a part on my website on which there is no slideshow to be able to scroll up or down. I checked it out with an iPad and with the demos on Codecanyon as well … the same thing. Is there a workaround for that? Thanks a lot ;) Saludos

This had to be done because otherwise one cannot browse through the slides with touch swipe without also scrolling the page at the same time.


tomens Purchased

How can you set the opacity of each individual image. I want to darken (or lighten) the image so the text is easier to read on some images. I don’t have the option to edit the images prior to displaying them.


tomens Purchased

I looked into this further. The issue appears to happen consistently when you refresh (ctrl r) the page. I cleared the browser cache and entered the page without issue. Only on the refresh is there an issue. Any idea how this can be resolved?

You are not initializing the slider with the window.load event, as described in the documentation. So, naturally the images are missing when the slider starts running.


tomens Purchased

Thank you. I added the windows.load event and that fixed it.