Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

General Questions

General questions about getting started with SilverStripe that don't fit in any of the categories above.

Moderators: martimiz, Sean, biapar, Willr, Ingo, swaiba, simon_w

JQuery and Cycle for Carousel image slider


4 Posts   7485 Views


18 February 2010 at 2:43am Community Member, 17 Posts

I'm trying to implement an image slider into SilverStripe.

I'm using .

I've searched through this forum, but couldn't find the right answer.

I've used this as a basic example for me to kickstart.

So in my themes/blackcandy/templates/ I've added this to the <head></head>:

<script type="text/javascript" src="themes/blackcandy/js/jquery.js"></script>
      <script type="text/javascript" src="themes/blackcandy/js/jquery.cycle.all.min.js"></script>
      <script type="text/javascript">
      $(document).ready(function() {
            fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...

Then in the body:

<div class="slideshow">
               <img src="" width="200" height="200" />
               <img src="" width="200" height="200" />
               <img src="" width="200" height="200" />
               <img src="" width="200" height="200" />
               <img src="" width="200" height="200" />

Then in the themes/blackcandy/css/layout.css

.slideshow { height: 232px; width: 232px; margin: auto }
      .slideshow img { padding: 15px; border: 1px solid #ccc; background-color: #eee; }

Now what it does, it shows me the picture as in the example, but it doesn't do anything. Just shows one image and stays with it without changing. What the problem could be? This is very weird.


18 February 2010 at 3:05am Community Member, 17 Posts

It didn't work, because the div object had to have id property and fade set to #id property as well rather than class just in case someone else will have same problem in the future. Though I don't know why it didn't work when example works fine.


18 February 2010 at 4:29pm Community Member, 90 Posts

think Jquery selector can aslo select the div class name. i have been used class name for quite long time, but havent met the problem before. you may try use $(".slideshow"), see if it still doesnt work?!

Chip Designs

25 June 2010 at 1:48pm (Last edited: 25 June 2010 2:54pm), Community Member, 15 Posts

Hi Vladas,

I have tried the same jquery fade as you have below and I'm also getting the same problem you did. I am unsure of your solution, could you please post the code that you changed to make it work.

i have tried changing the <div class="slideshow"> to <div id="slideshow"> as well as
$("#slideshow").cycle({ plus the css, but this has not fixed anything.

found a solution here