multiple content sliders - different css / styles

[parmenti]

1) Script Title: Featured Content Slider

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

3) Describe problem:

Hello, how do I have multiple content sliders on the same site (each with different css styles? I've tried renaming all the css items contentdiv2 etc but that seems to break the slider. Could you help me by explaining how to do this? thank you.

[jscheuer1]

Say you have:

<div id="slider1" class="sliderwrapper">

<div class="contentdiv">
Content 1 Here. <br />
<p></p><a href="javascript:featuredcontentslider.jumpTo('slider1', 3)">Go to 3rd slide</a></p>
</div>

<div class="contentdiv">
Content 2 Here.
</div>

<div class="contentdiv">
Content 3 Here.
</div>

</div>

<div id="paginate-slider1" class="pagination">

</div>

The script does rely upon the presence of the class names and id's. However, css relies upon selectors. So a unique selector for the contentdiv class in the above would be:

#slider1.contentdiv {
whatever
}

The paginate and wrapper divisions already have unique id selectors. What else do you want to customize? Also, you can add a compound class, for instance:

class="contentdiv mycontent1"

which will cascade if used after the first definition and will select like:

.mycontent1 {
whatever
}

[parmenti]

John.. what do you think is causing this on my site? Toggle the slider the the LOGIN NOW and JOIN NOW buttons. You will see the upcoming slide UNDER the current for a flash while the other slide is loading. It's very annoying. Is it possible it's something I did? Any idea what might be causing it? Thank you VERY much for your help with this.

http://www.longislandonline.com/dev/

[jscheuer1]

The problem is in your style.php file where you have:

.sliderwrapper{
position: relative; /*leave as is*/
overflow: hidden; /*leave as is*/
border: 10px solid navy;
border-bottom-width: 6px;
width: 400px; /*width of featured content slider*/
height: 250px;
}



.sliderwrapper .contentdiv{
visibility: hidden; /*leave as is*/
position: absolute; /*leave as is*/
left: 0;  /*leave as is*/
top: 0;  /*leave as is*/
padding: 5px;
background: white;
width: 390px; /*width of content DIVs within slider. Total width should equal slider's inner width (390+5+5=400) */
height: 100%;
filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
}

something like (it's slidewrapper, not sliderwrapper and once you fix that, the styles would need to be a little different):

.slidewrapper{
position: relative; /*leave as is*/
overflow: hidden; /*leave as is*/
width: 293px; /*width of featured content slider*/
height: 263px;
}

.slidewrapper .contentdiv{
visibility: hidden; /*leave as is*/
position: absolute; /*leave as is*/
left: 0;  /*leave as is*/
top: 0;  /*leave as is*/
padding: 5px;
background: white;
width: 293px; /*width of content DIVs within slider. Total width should equal slider's inner width (390+5+5=400) */
height: 263px;
filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
}

will be about right. A little fine tuning may be desired.

[parmenti]

thank you very much for your response. I actually saw that just about the same time I checked your repsonse. The end conclusion is I REALLY need to sleep more often Thanks again, I think the response time and help on this site is incredible. I should have joined a long time ago.