hi need help about this the problem is lets say the id with one digit runs smoothly the carousel, but when in times in 2 to 3 digit id like (10,11…100…) the carousel preview when you click the thumbnail only select from the 0ne digit like id 0-9…for instANCE the id with the value of 10 the preview would be image10 but the result is image zero, or thumbnail id 11 the result would be preview image 11 but the result is the image of 1…it seems that the carousel only select from 0-9…
<?php
Yii::app()->clientScript->registerScript('carousel', "
$('#myCarousel').carousel({
interval: 5000
});
$('#carousel-text').html($('#slide-content-0').html());
//Handles the carousel thumbnails
$('[id^=carousel-selector-]').click( function(){
var id_selector = $(this).attr('id');
var id = id_selector.substr(id_selector.length -1);
var id = parseInt(id);
$('#myCarousel').carousel(id);
});
// When the carousel slides, auto update the text
$('#myCarousel').on('slid', function (e) {
var id = $('.item.active').data('slide-number');
$('#carousel-text').html($('#slide-content-'+id).html());
});
");
?>
<div class="row">
<div class="carousel slide span12" id="myCarousel_thumb">
<div class="carousel-inner">
<div class="item active">
<!-- Bottom switcher of slider -->
<ul class="thumbnails">
<li class="span2">
<a class="thumbnail" id="carousel-selector-0">
<img src="http://placehold.it/140x100&text=zero">
</a>
</li>
<li class="span2">
<a class="thumbnail" id="carousel-selector-1">
<img src="http://placehold.it/140x100&text=1">
</a>
</li>
<li class="span2">
<a class="thumbnail" id="carousel-selector-2">
<img src="http://placehold.it/140x100&text=2">
</a>
</li>
<li class="span2">
<a class="thumbnail" id="carousel-selector-3">
<img src="http://placehold.it/140x100&text=3">
</a>
</li>
<li class="span2">
<a class="thumbnail" id="carousel-selector-4">
<img src="http://placehold.it/140x100&text=4">
</a>
</li>
<li class="span2">
<a class="thumbnail" id="carousel-selector-5">
<img src="http://placehold.it/140x100&text=5">
</a>
</li>
</ul>
</div>
<div class="item">
<!-- Bottom switcher of slider -->
<ul class="thumbnails">
<li class="span2">
<a class="thumbnail" id="carousel-selector-6">
<img src="http://placehold.it/140x100&text=6">
</a>
</li>
<li class="span2">
<a class="thumbnail" id="carousel-selector-7">
<img src="http://placehold.it/140x100&text=7">
</a>
</li>
<li class="span2">
<a class="thumbnail" id="carousel-selector-8">
<img src="http://placehold.it/140x100&text=8">
</a>
</li>
<li class="span2">
<a class="thumbnail" id="carousel-selector-9">
<img src="http://placehold.it/140x100&text=9">
</a>
</li>
<li class="span2">
<a class="thumbnail" id="carousel-selector-10">
<img src="http://placehold.it/140x100&text=10">
</a>
</li>
<li class="span2">
<a class="thumbnail" id="carousel-selector-11">
<img src="http://placehold.it/140x100&text=11">
</a>
</li><li class="span2">
<a class="thumbnail" id="carousel-selector-12">
<img src="http://placehold.it/140x100&text=12">
</a>
</li>
</ul>
</div>
</div>
<a data-slide="prev" href="#myCarousel_thumb" class="left carousel-control">‹</a>
<a data-slide="next" href="#myCarousel_thumb" class="right carousel-control">›</a>
</div>
</div>
<div class="container">
<!-- Slider -->
<div class="row-fluid">
<div class="span12" id="slider">
<!-- Top part of the slider -->
<div class="row-fluid">
<div class="span8" id="carousel-bounding-box">
<div id="myCarousel" class="carousel slide">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item" data-slide-number="0"><img src="http://placehold.it/770x300&text=zero"></div>
<div class="item" data-slide-number="1"><img src="http://placehold.it/770x300&text=1"></div>
<div class="item" data-slide-number="2"><img src="http://placehold.it/770x300&text=2"></div>
<div class="item" data-slide-number="3"><img src="http://placehold.it/770x300&text=3"></div>
<div class="item" data-slide-number="4"><img src="http://placehold.it/770x300&text=4"></div>
<div class="item" data-slide-number="5"><img src="http://placehold.it/770x300&text=5"></div>
<div class="item" data-slide-number="6"><img src="http://placehold.it/770x300&text=6"></div>
<div class="item" data-slide-number="7"><img src="http://placehold.it/770x300&text=7"></div>
<div class="item" data-slide-number="8"><img src="http://placehold.it/770x300&text=8"></div>
<div class="item" data-slide-number="9"><img src="http://placehold.it/770x300&text=9"></div>
<div class="item" data-slide-number="10"><img src="http://placehold.it/770x300&text=10"></div>
<div class="item" data-slide-number="11"><img src="http://placehold.it/770x300&text=11"></div>
<div class="item" data-slide-number="112"><img src="http://placehold.it/770x300&text=12"></div>
</div>
<!-- Carousel nav -->
</div>
</div>
<div class="span4" id="carousel-text"></div>
<div style="display: none;" id="slide-content">
<div id="slide-content-0">
<h2>Slider One</h2>
<p>paragraph hereparagraph here</p>
<p class="sub-text">October 24 2012 - <?php echo CHtml::link('Read more',array('/sccpages/'))?></p>
</div>
<div id="slide-content-1">
<h2>Slider Two</h2>
<p>paragraph here</p>
<p class="sub-text">October 24 2012 - <a href="#">Read more</a></p>
</div>
<div id="slide-content-2">
<h2>Slider Three</h2>
<p>paragraph here</p>
<p class="sub-text">October 24 2012 - <a href="#">Read more</a></p>
</div>
<div id="slide-content-3">
<h2>paragraph here</h2>
<p>paragraph here</p>
<p class="sub-text">October 24 2012 - <a href="#">Read more</a></p>
</div>
<div id="slide-content-4">
<h2>Slider Five</h2>
<p>paragraph here</p>
<p class="sub-text">October 24 2012 - <a href="#">Read more</a></p>
</div>
<div id="slide-content-5">
<h2>Slider Six</h2>
<p>Lparagraph hereolor</p>
<p class="sub-text">October 24 2012 - <a href="#">Read more</a></p>
</div>
</div>
</div>
</div>
</div> <!--/Slider-->
</div> <!--/Slider-->