I have slide show of images which was prepared by using jquery.jcarousel.min.js.
Now in same page I want to replicate same slide show.
below is my code:
<div class="connected-carousels">
<div class="stage">
<div class="carousel carousel-stage" data-jcarousel="true">
<ul style="left: 0px; top: 0px;">
<li><img src="http://localhost/classapp/Images/Jsc/img/img1.jpg" width="600" height="400" alt=""></li>
<li><img src="http://localhost/classapp/Images/Jsc/img/img2.jpg" width="600" height="400" alt=""></li>
<li><img src="http://localhost/classapp/Images/Jsc/img/img3.jpg" width="600" height="400" alt=""></li>
<li><img src="http://localhost/classapp/Images/Jsc/img/img4.jpg" width="600" height="400" alt=""></li>
<li><img src="http://localhost/classapp/Images/Jsc/img/img5.jpg" width="600" height="400" alt=""></li>
<li><img src="http://localhost/classapp/Images/Jsc/img/img6.jpg" width="600" height="400" alt=""></li>
</ul>
</div>
<p class="photo-credits">
Photos by <a href="http://www.mw-fotografie.de">Marc Wiegelmann</a>
</p>
<a href="#" class="prev prev-stage inactive" data-jcarouselcontrol="true"><span>‹</span></a>
<a href="#" class="next next-stage" data-jcarouselcontrol="true"><span>›</span></a>
</div>
<div class="navigation">
<a href="#" class="prev prev-navigation inactive" data-jcarouselcontrol="true">‹</a>
<a href="#" class="next next-navigation" data-jcarouselcontrol="true">›</a>
<div class="carousel carousel-navigation" data-jcarousel="true">
<ul style="left: 0px; top: 0px;">
<li data-jcarouselcontrol="true" class="active">
<img src="http://localhost/classapp/Images/Jsc/img/img1_thumb.jpg" width="50" height="50" alt=""></li>
<li data-jcarouselcontrol="true">
<img src="http://localhost/classapp/Images/Jsc/img/img2_thumb.jpg" width="50" height="50" alt=""></li>
<li data-jcarouselcontrol="true">
<img src="http://localhost/classapp/Images/Jsc/img/img3_thumb.jpg" width="50" height="50" alt=""></li>
<li data-jcarouselcontrol="true">
<img src="http://localhost/classapp/Images/Jsc/img/img4_thumb.jpg" width="50" height="50" alt=""></li>
<li data-jcarouselcontrol="true">
<img src="http://localhost/classapp/Images/Jsc/img/img5_thumb.jpg" width="50" height="50" alt=""></li>
<li data-jcarouselcontrol="true">
<img src="http://localhost/classapp/Images/Jsc/img/img6_thumb.jpg" width="50" height="50" alt=""></li>
</ul>
</div>
</div>
</div>
my javascript code
js used jquery.jcarousel.min.js
<script language="javascript">
var connector = function(itemNavigation, carouselStage) {
return carouselStage.jcarousel('items').eq(itemNavigation.index());
};
function ShowJsSlideShow()
{
// Setup the carousels. Adjust the options for both carousels here.
var carouselStage = $('.carousel-stage').jcarousel();
var carouselNavigation = $('.carousel-navigation').jcarousel();
// We loop through the items of the navigation carousel and set it up
// as a control for an item from the stage carousel.
carouselNavigation.jcarousel('items').each(function() {
var item = $(this);
// This is where we actually connect to items.
var target = connector(item, carouselStage);
item
.on('jcarouselcontrol:active', function() {
carouselNavigation.jcarousel('scrollIntoView', this);
item.addClass('active');
})
.on('jcarouselcontrol:inactive', function() {
item.removeClass('active');
})
.jcarouselControl({
target: target,
carousel: carouselStage
});
});
// Setup controls for the stage carousel
$('.prev-stage')
.on('jcarouselcontrol:inactive', function() {
$(this).addClass('inactive');
})
.on('jcarouselcontrol:active', function() {
$(this).removeClass('inactive');
})
.jcarouselControl({
target: '-=1'
});
$('.next-stage')
.on('jcarouselcontrol:inactive', function() {
$(this).addClass('inactive');
})
.on('jcarouselcontrol:active', function() {
$(this).removeClass('inactive');
})
.jcarouselControl({
target: '+=1'
});
// Setup controls for the navigation carousel
$('.prev-navigation')
.on('jcarouselcontrol:inactive', function() {
$(this).addClass('inactive');
})
.on('jcarouselcontrol:active', function() {
$(this).removeClass('inactive');
})
.jcarouselControl({
target: '-=1'
});
$('.next-navigation')
.on('jcarouselcontrol:inactive', function() {
$(this).addClass('inactive');
})
.on('jcarouselcontrol:active', function() {
$(this).removeClass('inactive');
})
.jcarouselControl({
target: '+=1'
});
}
$(document).ready(function () {
ShowJsSlideShow();
});
</script>
Is is possible to have same slider on the same webpage using jQuery only without going to code on server side?
