ContentSlider, substitute image icons?

[jmueller0823]

Script: Content Slider
http://www.dynamicdrive.com/dynamici...tentslider.htm

Is it possible to use images instead of the "Next 1,2,3" text links?
If so, how?


Thanks.

[jscheuer1]

http://www.dynamicdrive.com/forums/s...ad.php?t=14693

[ddadmin]

And note that if you're using the newer version of the script (updated Mar 1st), there's a built in way to customize the "next" and "1, 2 3" nav links of the slider. This is explained on the script page. Something like:

var linktext=["<img src='1.gif' />", "<img src='2.gif' />", "<img src='3.gif' />"]
var nexttext="<img src='next.gif' />"

ContentSlider("slider1", 5000, linktext, nexttext) //Auto rotate slider with custom pagination and "Next" links text

[jmueller0823]

Excellent. I'm using the latest version and
implemented the code you suggested, above.

Question:
Of course now, there are four navigation images displaying-- but
I can't tell which slide is showing.

>> Is there a way to "change" the images as the slides change?

>> Or... is there a way to NOT display the 1, 2, 3, text/images?


Thanks again.

[ddadmin]

There's no way to change the images themselves, as is the case if you were using the default text. Any change is limited to what CSS can do. For example, you may want to consider adding an invisible border to each image, then colorize the border for the currently selected one. Inside the .css file, something like this:

.pagination a{
padding: 0 5px;
border: 1px solid transparent;
}

.pagination a:hover, .pagination a.selected{
border-color: red;
}

[jmueller0823]

Makes sense. Thanks.

As a CSS novice, I'm not sure how to change position
of the div that contains the nav links.
How is that done? i.e. position= position on the page.

Also-- is anyone aware of a list of ContentSlider
sample implementations?

Thanks again.

[ddadmin]

The position of the pagination DIV is simply determined by where you place it on the page. Here is the DIV:

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

So to get it to appear above the contents, just place this DIV about the main Slider DIV. The only thing you need to make sure of is that the script that initalizes everything appears beneath both of the above in your page's source:

<script type="text/javascript">
//Define: ContentSlider("slider_ID", [autorotate_miliseconds], [custompaginatelinkstext], [customnextlinktext])
ContentSlider("slider1")
//OR ContentSlider("slider1", 3000)
//OR ContentSlider("slider1", 3000, linktextarray)
//OR ContentSlider("slider1", 3000, linktextarray, "Foward")
//OR ContentSlider("slider1", "", linktextarray)
//OR ContentSlider("slider1", "", "", "Foward")
</script>