I'm trying to customise the caption, so that it has a different style for each image in the slider.
Basically what I want to do is change the dimensions and position of the caption for each image in the slider.
For example:
.nivo-caption-01 {
	position:absolute;
	left:0px;
	bottom:0px;
	background:#000000;
	color:#fff;
	opacity:0.8; /* Overridden by captionOpacity setting */
	width:100%;
	height: 46px;
	z-index:8;
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 34px;
	padding-top: 24px;
.nivo-caption-02 {
	position:absolute;
	left:0px;
	top:0px;
	background:#FF0000;
	color:#fff;
	opacity:0.8; /* Overridden by captionOpacity setting */
	width:400;
	height: 200px;
	z-index:8;
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 34px;
	padding-top: 24px;
Select all Open in new window
<div id="slider" class="nivoSlider">
<img src="images/slider/image_01.jpg" alt="" title="Lorem ipsum deserunt" />
<img src="images/slider/image_02.jpg" alt="" title="Lorem ipsum deserunt" />
<img src="images/slider/image_03.jpg" alt="" title="Graeci adolescens" />
<img src="images/slider/image_04.jpg" alt="" title="Cum movet exerci nominavi" />
<img src="images/slider/image_05.jpg" alt="" title="Graeci adolescens" />
<img src="images/slider/image_06.jpg" alt="" title="Cum movet exerci nominavi" />
</div>
Select all Open in new window
I understand that if I give each image a unique id I should be able to achieve this, however I'm not quite sure how to adjust the code in the jquery.nivo.slider.pack.js
file.
The slider and code can be found here:
http://nivo.dev7studios.com/
Can anyone help me with this?
Many thanks in advance.
jquery.nivo.slider.pack.js