How to access element in a div within a carousel?

How to access element in a div within a carousel?

I have a carousel that accesses the "src" link of the first image in the
div each time it changes.
<div>
<img class="big-image" src="img/large/snow1.jpg" width="400"
height="400" />
<div class = "image-description">
<h4> Black </h4>
<p>Black is the color of coal, ebony, and of outer space. It is the darkest
color,
the result of the absence of or complete absorption of light. It is the
opposite
of white and often represents darkness in contrast with light. In the
Western
World today, it is the color most commonly associated with mourning,
the end,
secrets, magic, power, violence, evil, and elegance.</p>
</div>
<div class = "image-links">
<ul>
<li> <a href="#"> Add a credit customer </a> <br/> </li>
<li> <a href="#"> Multi-currency payment </a> </li>
<li> <a href="#"> Convert quote to invoice </a> </li>
</ul>
</div>
</div>
In my script if i have:
$carousel.carouFredSel({
responsive: true,
items: {
visible: 1,
width: 800,
height: (500/800*100) + '%'
},
scroll: {
fx: 'crossfade',
onBefore: function( data ) {
var src =
data.items.visible[0].firstElementChild.attributes[2].nodeValue;
src = src.split( '/large/' ).join( '/small/' );
$pager.trigger( 'slideTo', [ 'img[src="'+ src
+'"]', -getCenterThumb() ] );
$pager.find( 'img' ).removeClass( 'selected' );
},
onAfter: function() {
$pager.find( 'img' ).eq( getCenterThumb()
).addClass( 'selected' );
}
}
});
src will be assigned the value of "img/large/snow1.jpg"...but that only
works in FireFox. In Chrome it generates an error. How can I access the
"src"?