Начну с того, что я только начал изучать и java script и jquery. Надо мне сделать чтобы JCarousel подойдя к концу снова начинала с первого слайда.
в html:
<head>
<script type="text/javascript" src="./js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="./js/jquery.jcarousel.min.js"></script>
<script type="text/javascript" src="./js/jcarousel.js"></script>
<script type="text/javascript" src="./js/jquery.jcarousel-autoscroll.js"></script>
</head>
<body>
<div class="jcarousel">
<div class="stage">
<div class="carousel carousel-stage" data-jcarousel="true">
<ul id="mycarousel" style="left: -1200px; top: 0px;">
<li><img src="./img/1.jpg" width="1200" height="380" alt=""></li>
<li><img src="./img/2.jpg" width="1200" height="380" alt=""></li>
<li><img src="./img/3.jpg" width="1200" height="380" alt=""></li>
</ul>
</div>
<a href="#" class="prev prev-stage" data-jcarouselcontrol="true"><span>‹</span></a>
<a href="#" class="next next-stage" data-jcarouselcontrol="true"><span>›</span></a>
</div>
</div>
</body>
В jquery.jcarousel-autoscroll.js :
/*! jCarousel - v0.3.0 - 2013-11-22
* [url]http://sorgalla.com/jcarousel[/url]
* Copyright (c) 2013 Jan Sorgalla; Licensed MIT */
(function($) {
'#mycarousel';
$.jCarousel.plugin('jcarouselAutoscroll', {
_options: {
target: '+=1',
interval: 4000,
autostart: true
},
_timer: null,
_init: function () {
this.onDestroy = $.proxy(function() {
this._destroy();
this.carousel()
.one('jcarousel:createend', $.proxy(this._create, this));
}, this);
this.onAnimateEnd = $.proxy(this.start, this);
},
_create: function() {
this.carousel()
.one('jcarousel:destroy', this.onDestroy);
if (this.options('autostart')) {
this.start();
}
},
_destroy: function() {
this.stop();
this.carousel()
.off('jcarousel:destroy', this.onDestroy);
},
start: function() {
this.stop();
this.carousel()
.one('jcarousel:animateend', this.onAnimateEnd);
this._timer = setTimeout($.proxy(function() {
this.carousel().jcarousel('scroll', this.options('target'));
}, this), this.options('interval'));
return this;
},
stop: function() {
if (this._timer) {
this._timer = clearTimeout(this._timer);
}
this.carousel()
.off('jcarousel:animateend', this.onAnimateEnd);
return this;
}
});
}(jQuery));
В jcarousel.js :
(function($) {
var connector = function(itemNavigation, carouselStage) {
return carouselStage.jcarousel('items').eq(itemNavigation.index());
};
$(function() {
var carouselStage = $('.carousel-stage').jcarousel();
var carouselNavigation = $('.carousel-navigation').jcarousel();
carouselNavigation.jcarousel('items').each(function() {
var item = $(this);
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
});
});
$('.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'
});
$('.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'
});
$('.jcarousel')
.jcarouselAutoscroll({
interval: 4000,
target: '+=1',
autostart: true
});
});
})(jQuery);
