Step Carousel Centered on page

**Lol999** · 02-14-2011, 11:47 PM

1) Script Title: Step Carousel

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...epcarousel.htm

3) Describe problem: I would like to centre the carousel on my webpage and not being up to speed with js etc I am struggling. i have also removed some of the controls at the bottom as I just want forward/back controls but don't think this is th eissue.
Here is my current page:http://www.17minutes.f2s.com/Gallery2.htm

Here is the code:

Code:

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" src="stepcarousel.js">

/***********************************************
* Step Carousel Viewer script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/

</script>

<style type="text/css">

.stepcarousel{
position: relative; /*leave this value alone*/
border: 10px solid black;
overflow: scroll; /*leave this value alone*/
width: 920px; /*Width of Carousel Viewer itself*/
height: 620px; /*Height should enough to fit largest content's height*/
}

.stepcarousel .belt{
position: absolute; /*leave this value alone*/
left: 0;
top: 0;
}

.stepcarousel .panel{
float: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 10px; /*margin around each panel*/
width: 920px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
}

</style>

<script type="text/javascript">

stepcarousel.setup({
galleryid: 'mygallery', //id of carousel DIV
beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
panelclass: 'panel', //class of panel DIVs each holding content
autostep: {enable:true, moveby:1, pause:3000},
panelbehavior: {speed:500, wraparound:false, wrapbehavior:'slide', persist:true},
defaultbuttons: {enable: true, moveby: 1, leftnav: ['http://i34.tinypic.com/317e0s5.gif', -5, 80], rightnav: ['http://i38.tinypic.com/33o7di8.gif', -20, 80]},
statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
contenttype: ['inline'] //content setting ['inline'] or ['ajax', 'path_to_external_file']
})

</script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Flash Gallery</title>
<style type="text/css">
<!--
body,td,th {
	color: #FFFFFF;
}
body {
	background-color: #000000;
}
a:link {
	color: #FFFFFF;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #FFFFFF;
}
a:hover {
	text-decoration: none;
}
a:active {
	text-decoration: none;
}
-->
</style>

</head>

<body>
<div id="mygallery" class="stepcarousel" >
<div class="belt">
<div class="panel">
  <div align="center"><img src="Samurai/001.jpg" />
  </div>
</div>

<div class="panel">
<img src="Samurai/002.jpg" />
</div>

<div class="panel">
<img src="Samurai/003.jpg" />
</div>

<div class="panel">
<img src="Samurai/004.jpg" />
</div>

<div class="panel">
<img src="Samurai/005.jpg" />
</div>

</div>
</div>



</body>

</html>

Thanks, Lol

**azoomer** · 02-15-2011, 12:02 AM

The carousel can be centered by adding auto margins to the css like this

Code:

.stepcarousel{
position: relative; /*leave this value alone*/
border: 10px solid black;
overflow: scroll; /*leave this value alone*/
width: 920px; /*Width of Carousel Viewer itself*/
height: 620px; /*Height should enough to fit largest content's height*/
margin-left: auto;
margin-right: auto;
}

**Lol999** · 02-15-2011, 08:42 AM

Thankyou, I am only just learning CSS so that's a big help.

Cheers, Lol

**Shaun** · 11-02-2011, 05:02 PM

Is it possible to align the active image centrally inside of the viewer?

I want my active images to be a set width, central on the page. But then I want the images on either side to take up the rest of the space appearing to drift off and on.

is that possible, if so, how?

Thread: Step Carousel Centered on page

Thread Tools

Search Thread

Step Carousel Centered on page

The Following User Says Thank You to azoomer For This Useful Post:

Center the content within the carousel

Bookmarks

Bookmarks

Posting Permissions