CODEWITHSUNDEEP
jquerycarousel
Denis
Denis

Reputation: 2469

Does jq.carousel support dynamically added images?

Does jq.carousel support dynamically added images? I have 'some' button, o I have a button, after clicking on it, load array of images by Ajax and pass them to the slider.

var seplen=separatedLeft.length;   //images array
var carus = $('#carousel');        //will append images to this element
var imglist='';                    //we use this variable for optimization..
for(var i=0;i<seplen;i++){
    imglist+='<div class="carousel_box"><img src="content/'+separatedLeft[i]+'" alt="img" style="width:350px;height:450px;" /></div>';    //add all images what we have (actually there 2 or 3 images)
    }

carus.html(imglist);

so.. images successfully added to slider, i can see at least the first image in the sources everything is ok with html, but buttons LEFT and RIGHT (to slide the images) doesn't work, maybe someone know why?

that part where slider is

<div class="carousel">
    <div id="carousel" class="carousel_inner">
                       //images will be here
    </div>

    <p class="btns">
        <input type="button" id="carousel_prev" value="prev">
        <input type="button" id="carousel_next" value="next">
    </p>
</div>


<style type="text/css">
#carousel{
  margin: 0 auto;
  width: 350px;
  height: 450px;
  overflow: hidden;
}
#carousel .carousel_box{
  width: 350px;
  height: 450px;
  color: #fff;
  background: #252525;
  line-height: 450px;
  text-align: center;
  font-size: 123%;
}
#carousel .carousel_box.second{
background: #666;
}
#carousel .carousel_box.third{
  background: #999;
}

</style>

<script type="text/javascript">
var $carousel = $('#carousel').carousel({
 easing:'swing',
 duration: 0.2 // move duration
});

$('#carousel_prev').live('click', function(ev) {
  $carousel.carousel('prev');
});
$('#carousel_next').live('click', function(ev) {
  $carousel.carousel('next');
});
</script>

Upvotes: 1

Views: 1198

Answers (1)

Surreal Dreams
Surreal Dreams

Reputation: 26380

According to the site you linked, there are reset and refresh commands that you can in conjunction with adding content to the carousel. You can see an example on the page here.

Upvotes: 1

Related Questions