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.

Customising the CMS /

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

jQuery image slider

Go to End

10 Posts   8230 Views


Community Member, 1 Post

1 May 2012 at 10:34pm

I want to put an image slider on my homepage of my website, and have found Craftyslide, but I cannot for the life of me figure out how to get it to work.. :/ I feel really bad. I could usually get things to work..

Anyway, if anyone could give me a hand, that would be great. :)

- Joel.


Community Member, 115 Posts

2 May 2012 at 10:53am

Hi Joel,

Use this

Instructions here: (But don't click the foundation link, use the link i've supplied above)

You will need the following in your Page_Controller:

(Files downloaded, as per the following, will need to be in mysite/javascript/orbit)

function init() {

This will need to be in Page:

	static $has_one = array(
		"FeatureImage1" => "Image",
		"FeatureImage2" => "Image",
		"FeatureImage3" => "Image",

function getCMSFields(){
// you're going to have to read how to do this, I'm too lazy to write it outm let me know if you get stuck

Then in

<div id="FeatureContainer" style="width:690px;height:400px;">

    <% if FeatureImage1 %>
   <% end_if %>

    <% if FeatureImage2 %>
   <% end_if %>

    <% if FeatureImage3 %>
   <% end_if %>


Then run dev/build?flush=1, upload images through CMS, Bingo.

Took me about 20 minutes to get going, holla if you get stuck.



Community Member, 115 Posts

2 May 2012 at 10:57am

Forgot to mention, you'll have to add another Requirements::javascript call to your init() function (should be the last call in init). Name the file orbit.config.jquery.js and inside it write the equivalent of:



Community Member, 38 Posts

19 April 2013 at 8:02am


I like this Orbit slider. I have a couple of quick questions:

1) Where do I go to change the speed of the transition/slide?

2) Can I change the transitions to a Fade or something else? If yes, can you point out where?



Community Member, 115 Posts

19 April 2013 at 10:24am

Hi Goodness,

     animation: 'fade',                  // fade, horizontal-slide, vertical-slide, horizontal-push
     animationSpeed: 800,                // how fast animtions are
     timer: true, 			 // true or false to have the timer
     advanceSpeed: 4000, 		 // if timer is enabled, time between transitions 
     pauseOnHover: false, 		 // if you hover pauses the slider
     startClockOnMouseOut: false, 	 // if clock should start on MouseOut
     startClockOnMouseOutAfter: 1000, 	 // how long after MouseOut should the timer start again
     directionalNav: true, 		 // manual advancing directional navs
     captions: true, 			 // do you want captions?
     captionAnimation: 'fade', 		 // fade, slideOpen, none
     captionAnimationSpeed: 800, 	 // if so how quickly should they animate in
     bullets: false,			 // true or false to activate the bullet navigation
     bulletThumbs: false,		 // thumbnails for the bullets
     bulletThumbLocation: '',		 // location from this file where thumbs will be
     afterSlideChange: function(){} 	 // empty function 

as per Advanced Options tab on



Community Member, 38 Posts

19 April 2013 at 1:22pm



Community Member, 38 Posts

20 April 2013 at 1:43am


Thanks again for the info on the advanced options. I've got a great stand-alone working version now.

What I'd like to do is simply create a slider that I can include in my file that's located in my themes/mytheme/templates/Layout folder.

I have a div called SliderHolder in my (layout file) that I would call the include into:

<div id="SliderHolder"><% include Slider %></div>

I don't need something that can be edited or created within the CMS. Just a hand-coded file that's located in my themes/mytheme/templates/Includes folder.

Can you help me with this? I'm not 100% sure where to put the calls to the .js and .css files.

Many thanks!


Community Member, 38 Posts

20 April 2013 at 3:31am


I hope you can help me.

I've got the Orbit Slider working as an include. However, I have a strange thing happening.

I resized the nav images (left-arrow.png & right-arrow-png) to better fit my slider.

For some reason that I can't seem to find, there is the text "Right" hovering by my right-arrow.png (see the attached image)

When I Firebug it I get:

<div class="slider-nav">
<span class="right">Right</span>
<span class="left">Left</span>

I have no idea where the text "Right" and "Left" texts are coming from inside those spans.

Here's my css code:

================================================== */

div.slider-nav {
display: block }

div.slider-nav span {
width: 23px;
height: 30px;
text-indent: -9999px;
position: absolute;
z-index: 1000;
top: 60%;
margin-top: -50px;
cursor: pointer; }

div.slider-nav span.right {
background: url(../images/orbit/right-arrow3.png) no-repeat;
right: 0;

div.slider-nav span.left {
background: url(../images/orbit/left-arrow3.png) no-repeat;
left: 0;

I've spent the better part of 2 hours trying to get rid of the "Right" text that appears in the browser. For some reason I don't see the "Left" text on the left side.

Any help would be greatly appreciated.


Attached Files
Go to Top