copying slider code from front page to another page

carolsanjose used Ask the Experts™
I would like to use the front page slideshow layout on another page in my website.  What code to I copy into the html section of the page content to achieve the look and feel of the front page slideshow?  This is not a plugin slideshow, and I want to add a 2nd slideshow that looks just like the one displayed on the home page.

Any advice is appreciated...
Front page:
Page where I want to add a slideshow with the layout of the front page slideshow.
  copy this front page slideshow  to here - I'll be adding more slides & content to it
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Senior Web Developer
This is nivoslider and can you post your index page + innepage page where you want to slider display

Your html code for slider is:

<div id="content">	<!-- BEGIN SLIDER -->
	  <div id="slider">

	  		<a href="" target="_blank"><img class="alignnone size-full wp-image-611" title="Improve your cash-flow and use the app on multiple platforms" src="" alt="" width="960" height="370" /></a>		</div>
	   <div style="width:960px; margin:0 auto; background:url( 0 0 no-repeat; height:50px;"></div>
	   <!-- END SLIDER -->

Open in new window

Javascript for setting the slider is:

<script type="text/javascript">
			$(window).load(function() {
					effect:'random', //Specify sets like: 'fold,fade,sliceDown'
					startSlide:0, //Set starting Slide (0 index)
					directionNav:true, //Next & Prev
					directionNavHide:true, //Only show on hover
					controlNav:true, //1,2,3...
					controlNavThumbs:false, //Use thumbnails for Control Nav
					controlNavThumbsFromRel:false, //Use image rel for thumbs
					controlNavThumbsSearch: '.jpg', //Replace this with...
					controlNavThumbsReplace: '_thumb.jpg', //...this in thumb Image src
					keyboardNav:true, //Use left & right arrows
					pauseOnHover:true, //Stop animation while hovering
					manualAdvance:false, //Force manual transitions
					captionOpacity:0.8, //Universal caption opacity
					beforeChange: function(){},
					afterChange: function(){},
					slideshowEnd: function(){} //Triggers after all slides have been shown

Open in new window

Now your CSS file is:

JavaScript for Nivoslider is:
And now your jquery file is 

So Now when you manage all of this pages and scripts It must work


Why isn't the slider working on the demo page right now?

I pasted the html code into the html section of the page content area in Wordpress.

When you view this page source code, what information am I missing in the header?

Again, I want to use the slider on the front page,
as the slider on the demo page, too.

I was hoping to copy the html code into the page inner, like I did already, but I am missing something in the header to make the slideshow appear...

Thank YOU...  I appreciate your help.


OHHH...It worked.
I just pasted the javascript code onto the page & now I see the slider...

One last question....


Will you highlight the code where I remove the current slides & add the new ones?


I figured it out.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial