Hello,

 

I was wondering if any of you could help me add changing text to an image slider?

 

HTML:

<!--FEATURE SLIDE-->
<div class="main_view">
<h1>Featured Products</h1>
   <div class="window">
       <div class="image_reel">
           <a href="#"><img src="images/featured1.png" alt="" /></a>
           <a href="#"><img src="images/featured2.png" alt="" /></a>
           <a href="#"><img src="images/featured3.png" alt="" /></a>
           <a href="#"><img src="images/featured4.png" alt="" /></a>
       </div>
   </div>
   <div class="paging">
       <a href="#" rel="1"></a>
       <a href="#" rel="2"></a>
       <a href="#" rel="3"></a>
       <a href="#" rel="4"></a>
   </div>
   <div class="product"><h1>Product name here</h1></div>
   <div class="price"><h1>$999</h1></div>
</div>

CSS:

/*--Main Container--*/
.main_view {
float: left;
position: absolute;
top:467px;
left:160px;
background:url(../images/featuredbg.jpg) no-repeat;
width:265px;
height:344px;
z-index:-99;
}
/*--Window/Masking Styles--*/
.window {
height:194px;	width: 197px;
overflow: hidden; /*--Hides anything outside of the set width/height--*/
position: absolute;
top:60px;
left:30px;
}
.main_view h1{
position:absolute;
top:13px;
left:16px;
font-size:18px;
color:#3382d4;
}
.main_view .product h1{
position:absolute;
top:280px;
left:16px;
font-size:18px;
color:#949494;
}
.main_view .price h1{
position:absolute;
top:300px;
left:16px;
font-size:18px;
color:#bc1919;
}
.image_reel {
position: absolute;
top: 0; left: 0;
}
.image_reel img {float: left;}

/*--Paging Styles--*/
.paging {
position: absolute;
top: 12px; right: 22px;
z-index: 100; /*--Assures the paging stays on the top layer--*/
text-align: center;
line-height: 40px;
background: url(paging_bg2.png) no-repeat;
display: none; /*--Hidden by default, will be later shown with jQuery--*/
}
.paging a {
padding: 6px;
text-decoration: none;
color: #fff;
background:url(../images/inactivefeatured.png) no-repeat;
width:10px;
height:10px;
}
.paging a.active {
background:url(../images/activefeatured.png) no-repeat;
width:10px;
height:10px;
}
.paging a:hover {font-weight: bold;}

 

Basically, I want the "product" and "price" to change with each different image.

 

Any help is appreciated. Thanks.

Check out Nivoslider.