How to add a slider to my homepage?

I’m wanting to add a slider to my homepage and have it show an image on one side and then text on the other side. Any suggestions? I’m currently using the bxSlider on my hand coded html page.

I’m curious about this as well since most jquery banners require some level of HTML coding which often include divs.

Dan,

For jQuery sliders that require some amount of hand coded HTML, you can always contain the slider code within an HTML widget. Matt, did you even track down a slider plugin that fit your needs?

Currently I’m using a slider called bxslider. I just use a RichText area with a unordered list with the images in the list. Very clean slider and if you are after “responsive” design, the slider will resize based on the viewing window.

I plan to go back after launch to figure out how to get a list of a specific folder to populate the slider but it wasn’t vital for launch so it was moved to the back burner.

I found a jquery slider (Simple Banner) that mostly works in CM1 except for one effect where a headline is supposed to fly in - but doesn’t.

As you can see below, the HTML is written with “div class” tags rather than IDs except for one lone “div id” at the end. I copied the html markup block seen below into an RT widget but the “rot1” div at the bottom of the code doesn’t seem to do anything. The div class of “info heading” doesn’t show up.

So if I have an HTML block such as this do I need to create another region in CM1 for the div id of, in this case, “rot1”? I tried this but when I paste that markup into the RT widget CM1 strips it down to just an img class.

Thanks for the help.


  

  

 
- [INDUSTRIES](rot1)   

  

1.jpg
  

Our Works
  

At vero eos et accusamus et iustoRead more
  

  

 
- [SERVICES](rot2)   

  

2.jpg
  

We serve
  

At vero eos et accusamus et iustoRead more
  

  

 
- [OUR STORY](rot2)   

  

3.jpg
  

Get in touch
  

At vero eos et accusamus et iustoRead more
  

  

 
- [CAREERS](rot4)   

  

4.jpg
  

We do crazy stuff
  

At vero eos et accusamus et iusto At vero eos et accusamus et iusto Read more
  

  

 
- [CONTACT US](rot5)   

  

5.jpg
  

Working things
  

JAS Forwarding: Reponsive. Efficient. Cost Effective
  

  

 
  

  
![]()   

  

# 
  

  

  


 

  

  

  

  

  
 

Dan,

I see that the Div of the class “heading” has no content, and the RTE will automatically remove regions that house no content. An easy workaround would be to simply add a non-breakable space between the child H1 tags. Let me know if this helps.

Nathaniel,

That was mostly the issue. I also had to add a spacer.gif in the img src= " ".

Thanks!

Ah, good catch, Dan. Thanks for sharing this jQuery plugin, by the way. Always good to add to the list of plug-ins known to play well with our built-in jQuery features.

Nathaniel,

Is there a quick way to swap the new slider enabled template I built for the home page with the existing, but outdated home page? The new one has both different content and a different template.

If I’m understanding your intention here, you can simply use the switch templates feature:

http://help.percussion.com/design/man…

Take note of the Unused Asserts tray, if your content doesn’t migrate over seamlessly.

Just to clarify, what I want to do is to wholesale replace the new version of the home page, template AND content, for the current home page.

Gotcha. That is also very simple. Open up the navigation section of CM1 and drag and drop, from the Finder, your new homepage over your top homepage section. This will rename the file to “index” and convert it into your root section’s new landing page (i.e. your homepage). FYI you can change all section landing pages in this manner.

Although this issue has been marked “answered” at this time (3/1/2013), it bears some additional attention as to how to deal with the HTML.

I do have the slider (Pretty Simple Content Slider) working based on the previous suggestion of just pasting the slider’s HTML into a widget. It does take additional work to get the CSS to apply but that said, it creates a mess inside the RT widget that is very difficult to edit on an ongoing basis. The issue for me is that a content slider, by definition, has text elements that may need to be edited from time to time but unfortunately the RT widget doesn’t actually display much content.

Here is what is seen in the widget:

Yet here is the HTML:


  

  

 
- [SERVICES](rot1)   

  

1.jpg
  

Services
  

Proin lacus odio, rhoncus vel malesuada, lacinia eget dia suspendisse sed orci nunc. mollis, faucibus aliquam am mollis, risus nec aliquet vulputate lorem amet dolor.[More...](http://172.29.12.160:9992/Sites/www.x.com/services/index)
  

  

 
- [PROJECTS](rot2)   

  

2.jpg
  

Projects
  

Proin lacus odio, rhoncus vel malesuada, lacinia eget dia suspendisse sed orci nunc. mollis, faucibus aliquam am mollis, risus nec aliquet vulputate lorem amet dolor.[More...](http://172.29.12.160:9992/Sites/www.x.com/industries/projects/index)
  

  

 
- [ENERGY](rot3)   

  

3.jpg
  

Energy
  

Proin lacus odio, rhoncus vel malesuada, lacinia eget dia suspendisse sed orci nunc. mollis, faucibus aliquam am mollis, risus nec aliquet vulputate lorem amet dolor. [More...](http://172.29.12.160:9992/Sites/www.x.com/industries/oil-energy/index)
  

  

 
- [LOCATIONS](rot4)   

  

4.jpg
  

Globally Positioned
  

Proin lacus odio, rhoncus vel malesuada, lacinia eget dia suspendisse sed orci nunc. mollis, faucibus aliquam am mollis, risus nec aliquet vulputate lorem amet dolor.[More...](http://172.29.12.160:9992/Sites/www.x.com/locations/index)
  

  

 
- [INDUSTRIES](rot5)   

  

5.jpg
  

Industries
  

Proin lacus odio, rhoncus vel malesuada, lacinia eget dia suspendisse sed orci nunc. mollis, faucibus aliquam am mollis, risus nec aliquet vulputate lorem amet dolor.[More...](http://172.29.12.160:9992/Sites/www.x.com/industries/index)
  

  

 
  

![](/web_resources/themes/X/images/spacer.gif)   

  

# ""
  

  

  


 

  

  

  

  

  
 

Notice that only the - tag is showing in the RT widget while the “info_heading” and “info_description” do not (because they are divs).

Any suggestions on how to streamline this kind of content slider HTML? I assume that the divs need to be broken out somehow inside of CM1 in order to make the text easier to edit on an ongoing basis. Need a best practice for this while we await the day when we see a slider widget.

Dan,

Your Div has “style=‘display: none;’” inside it. This inline style is going to hide those divs in all cases which is going to prevent you from seeing it in the rich text widget. Try removing that inline style and, if it needs a default style applied to hide it, create a class for it and define the style in your CSS file. Doing so will allow it to show in the rich text widget but will hide it on the page, when the styles from your theme are applied.

Thanks Daved.

The question for me is if I delete the “style=‘display: none;’” from the RT widget how do I substitute that into the CSS?

The HTML as seen in the above posted markup has the parent div ul of ‘rotmenu’

I assume that I need to have something like the following in my CSS:

#rotmenu ul li {display: none;}   
 

Then delete all the “style=‘display: none;’” from the inline HTML.

But since that doesn’t work, I need to figure out what I’m missing.

Thanks for any insights you can provide.

Dan,

You can define a class and put the class in the div so it reads


blabla

and have your css
#rotmenu .slide { display: none; }

of you could try css without the class and define the css like
#rotmenu \> li \> div { display: none; }
The > specifies “only immediate child” which would prevent it from affecting any other div or list item elements.

Thanks Daved,

The first suggestion worked great.

By the way, I’d love to see a widget to do this.

Slider widget would be an answer to prayer. I see this is an old thread. Has this been considered at all for inclusion to updates???

Hi Kathy,

A slider widget can be built as a custom widget, in fact, I am working on building one for your smaller site engagement currently. I am leveraging the foundation 4 Orbit Slider. Since our product ships with foundation 4, the Orbit Slider is a pretty easy solution to this frequent question!

Will I be able to use this on the other site also? I see I have one already built out custom…but it is for our homepage and is very specific in function/form.
Thanks Ben!