Hi Guys,
I'm stuck on this. I am using CarouFredSel and have the slider up and running perfectly. However, I am also trying to hook into its "onAfter" function that enables you to specify what happens after each transition. I am hiding some content by each slide, and then want to insert that content into a container visible on the page. Howver, it seems like my on after is only runing once.
Here is my code:
Code:
$("#foo1").carouFredSel({
responsive : true,
auto : true,
next:'#next',
prev:'#prev',
circular: true,
infinite: false,
direction: "left",
items : {
visible : 1,
width : 870,
height : "46%"
},
scroll: {
onAfter: function() {
var pos = $(this).triggerHandler( 'currentPosition' );
$('.slide').removeClass('selected');
$('.slide').eq(pos).addClass('selected');
var bacon = $(this).children('.slide.selected').children('.hidden-title').html();
$("#slideshow-text").html(bacon).html();
}
}
});
And my HTML if it helps:
Code:
<div class="slide">
<img src="<? echo $url?>" alt="<?php the_title(); ?>" width="870" height="400" />
<div class="hidden-title">
<?php the_title(); ?>
</div>
<!-- .hidden-title -->
</div>
<!-- .slide -->
Thanks in advance
Dan