Taitava
commented
5 years ago Hi Ahyeon!
Looks strange. You mentioned that the js and css files are loaded well. This was the first thing that came to my mind, but apparently you have already checked it. But just for general information for all others who might have similar kind of problems: Try to run composer vendor-expose in terminal in your website's root directory. This is SilverStripe's own composer command that makes sure that every modules' js, css and image files are available to the web browser. (This applies to SilverStripe 4. If you are using SS3, then there is no 'vendor-expose' command and it's not even needed). Some more information about vendor-expose can be found here.
But now, on to the point again, to try something else. If you right click on any of your slides and select Inspect element (works at least in Firefox), the Inspector window opens. Do you see there any html elements that would have any of the following css classes: slick-initialized, slick-list or slick-track? Note that all of these classes are dynamically inserted by JavaScript. This means that you cannot use the simple View source (Ctrl+U) method to check them, because they are not present in the basic HTML source code. If you did not find these classes inserted into your carousel's DOM elements, it means that there actually is something wrong with loading the JavaScript files. Or executing them.
If you check your browser's JavaScript console, is there any kind of JavaScript related error messages or notices showing up? (Ctrl+Shift+K opens up the JavaScript console in Firefox).
Are you able to drag any of the slides with your mouse? Do they move at all if you try to drag them? If they do, then it means that the JS library is at least partially working. If the don't move, it makes me think again that there is some issue with either loading the JavaScript or initializing the Slick carousel after JS is loaded. (Note, if you would have a slick option called draggable set to false, then you would not be able to move slides by dragging even if the library would be working correctly. But this is not the case for you because you haven't declared that particular option in your config, and draggable defaults to true when it's not set. More info (search for 'draggable')).
And just a final question. If you hit Ctrl+U, do you see this somewhere in your source code:
<script type="text/javascript">//<![CDATA[
//Slick carousel options:
var GLOBAL_SLICK_OPTIONS = {"speed":1000,"autoplay":true,"autoplaySpeed":5000};
//]]></script>Note that the values in the curly brackets are different in your case! But anyway, do you see something like this in there?
Let's hope that some of these questions will help us explore the problem more and solve it! :)
dinina1209
Hi Jarkko, I have two question.
I'd like to insert image slider with 6 different images. So i clicked Add Carousel Slide > uploaded 6 images, each of name is #1, #2, ... #6. And those images are displayed in all different rows. What I want is displaying 6 images in one row.
It seems that js/css files are loaded well. I checked them on the source code.
slickcarousel/vendor/slick/slick/slick.css slickcarousel/vendor/slick/slick/slick-theme.css framework/thirdparty/jquery/jquery.min.js slickcarousel/vendor/slick/slick/slick.min.js slickcarousel/js/slick-init.js
and slickcarousel.yml is set it like this. Page: extensions:
But still images are not roated, and i can't change the position of images as well.
I attached image for your convenience. Thank you
