Не могу сделать в JCarousel autoscroll и цикличное прокручивание
Начну с того, что я только начал изучать и 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); |
спасибо, мне помогли
|
могли бы и написать , как решили вопрос, а теперь что тему создавать ?
|
wrap: 'circular' нужно добавить.
$('.jcarousel') .jcarousel({ wrap: 'circular' }) |
Часовой пояс GMT +3, время: 17:47. |