Avatar of LLC0706
LLC0706
 asked on

Customise Nivo Slider

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;

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>

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
Web DevelopmentScripting LanguagesJavaScriptjQueryWeb Frameworks

Avatar of undefined
Last Comment
LLC0706

8/22/2022 - Mon
ASKER CERTIFIED SOLUTION
Greg Alexander

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
GET A PERSONALIZED SOLUTION
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.
Greg Alexander

So...... did that help ya?
LLC0706

ASKER
Thank you very much for all your help.
LLC0706

ASKER
Hi galexander07

Sorry for the late response; I've been away.

That's perfect, thank you very much.
Your help has saved me hundreds of hours of internet surfing.
fblack61