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.

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.

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;
}

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.

Please purchase the WP plugin version here first – https://codecanyon.net/item/ccslider-wp-3d2d-slideshow-wordpress-plugin/400692 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.

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

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

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.

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 !

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.

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)

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.

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>

<script>
    $(window).load(function() {
        $('#slider').ccslider({
            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.

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.

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

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

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

thanks

Good to know that you got it 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.

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