").appendTo($el);
// set css to element
$el.find("." + ticker.wrapCls).css({ position: "relative" });
// wrap list in a wrapper
ticker.$list.wrap(
"
"
);
// clone items and push to list
ticker.$items.clone().addClass(ticker.cloneCls).appendTo(ticker.$list);
// add css for list
ticker.$list.css({
position: "relative",
});
// set true to initialize value
ticker.isInitialize = true;
// onSliderLoad callback
ticker.settings.onCarouselTickerLoad();
// start add functionality
_start();
}
};
/**
* Start the ticker
*/
var _start = function () {
// remove the loading DOM element
if ($el.find("." + ticker.loaderCls).length)
$el.find("." + ticker.loaderCls).remove();
// start ticker-carousel
ticker.intervalPointer = setInterval(function () {
_moveTicker();
}, ticker.settings.delay);
// initialize eventOver event
$el.on("mouseover", _eventOver);
// initialize eventOut event
$el.on("mouseleave", _eventOut);
// initialize drag and drop event
_eventDragAndDrop();
};
/**
* Move carouselTicker
*/
var _moveTicker = function () {
var mode = ticker.settings.mode === "horizontal" ? "left" : "top",
itemsSize =
ticker.settings.mode === "horizontal"
? ticker.itemsWidth
: ticker.itemsHeight;
// step ticker moving
ticker.$list.css(
mode,
"+=" + ticker.directionSwitcher * ticker.settings.speed + "px"
);
// depending of direction change offset list for effect Infinity rotate
if (ticker.settings.direction === "prev") {
if (Math.abs(parseInt(ticker.$list.css(mode))) >= itemsSize) {
ticker.$list.css(mode, 0);
}
}
if (ticker.settings.direction === "next") {
if (parseInt(ticker.$list.css(mode)) >= 0) {
ticker.$list.css(mode, -itemsSize + "px");
}
}
};
/**
* Method calc summ items width
*/
function _calcItemsWidth() {
// set value 0 to default
ticker.itemsWidth = 0;
// calc sum
ticker.$items.each(function () {
var $this = $(this),
style = this.currentStyle || window.getComputedStyle(this),
margin = parseFloat(style.marginLeft) + parseFloat(style.marginRight);
// if item clone - calc summ without it
if ($this.hasClass(ticker.cloneCls)) return;
ticker.itemsWidth += this.getBoundingClientRect().width + margin;
});
}
/**
* Method calc summ items height
*/
function _calcItemsHeight() {
// set value 0 to default
ticker.itemsHeight = 0;
// calc sum
ticker.$items.each(function () {
var $this = $(this);
// if item clone - calc summ without it
if ($this.hasClass(ticker.cloneCls)) return;
ticker.itemsHeight += $this.outerHeight(true);
});
}
/**
* Event Methods _eventOver, _eventOut, _eventDragAndDrop
*/
function _eventOver() {
// depending from mode choose condition
var condition =
ticker.settings.mode === "horizontal"
? ticker.itemsWidth > ticker.$parent.width()
: ticker.itemsHeight > ticker.$parent.height();
// if ticker width/height > outer width/height block
if (condition) {
// make clearInterval
clearInterval(ticker.intervalPointer);
// make clearInterval
ticker.intervalPointer = false;
}
}
function _eventOut() {
// depending from mode choose condition
var condition =
ticker.settings.mode === "horizontal"
? ticker.itemsWidth > ticker.$parent.width()
: ticker.itemsHeight > ticker.$parent.height();
// if mouse move
if (ticker.isMousemove) {
// off event behaviour mousemove
ticker.$list.off(ticker.eventTypes.mousemove);
// call event mouseup
ticker.$list.trigger(ticker.eventTypes.mouseup);
}
// if ticker width > outer width block
if (condition) {
// protection from double setInterval
if (ticker.intervalPointer) return;
// call _moveTicker
ticker.intervalPointer = setInterval(function () {
_moveTicker();
}, ticker.settings.delay);
}
}
function _eventDragAndDrop() {
var flag = false;
ticker.$list.on(ticker.eventTypes.mousedown, function (e) {
var start = e.clientX || event.touches[0].pageX,
startY = e.clientY || event.touches[0].pageY,
$this = $(this),
posList = parseFloat($(this).css("left")),
posListY = parseFloat($(this).css("top"));
$(e.target).off("click");
clearInterval(ticker.intervalPointer);
ticker.intervalPointer = false;
flag = true;
$this.on(ticker.eventTypes.mousemove, function (e) {
var x = e.clientX || event.touches[0].pageX,
y = e.clientY || event.touches[0].pageY,
// fix for touch device
diff = start - x,
diffY = startY - y;
if (ticker.touch) {
$(document).on("touchmove", function (e) {
e.preventDefault();
});
}
if (ticker.settings.mode === "horizontal") {
ticker.directionSwitcher = diff >= 0 ? -1 : 1;
} else if (ticker.settings.mode === "vertical") {
ticker.directionSwitcher = diffY >= 0 ? -1 : 1;
}
ticker.isMousemove = true;
if (flag) {
if (ticker.settings.mode === "horizontal") {
// if drag more left side
if (posList - diff >= 0 && ticker.directionSwitcher === 1) {
$this.css("left", "-=" + ticker.itemsWidth);
posList = -ticker.itemsWidth;
start = e.clientX || event.touches[0].pageX;
diff = 0;
}
// if drag more right side
if (
posList - diff = 0 && ticker.directionSwitcher === 1) {
$this.css("top", "-=" + ticker.itemsHeight);
posListY = -ticker.itemsHeight;
startY = e.clientY || event.touches[0].pageY;
diffY = 0;
}
// if drag more right side
if (
posListY - diffY ticker.$parent.width()) {
if (!ticker.isInitialize) {
_init();
}
} else {
if (ticker.isInitialize) el.destructor();
}
};
/**
* Stop rotate carouselTicker
*/
el.stop = function () {
$el.off("mouseover", _eventOver);
$el.off("mouseleave", _eventOut);
clearInterval(ticker.intervalPointer);
ticker.intervalPointer = false;
};
/**
* Run carouselTicker
*/
el.run = function () {
_start();
};
/**
* Destroy the current instance of the ticker (revert everything back to original state)
*/
el.destructor = function () {
var $clones = $el.find("." + ticker.cloneCls);
// remove all clone items from dom
$clones.remove();
var $tickerWrapper = $el.find("." + ticker.wrapCls);
if ($tickerWrapper.length) {
var $list = $el.find("." + ticker.listCls);
$list.unwrap();
$list.css({ left: "auto", position: "static", width: "auto" });
$el.css({ width: "auto", position: "static" });
}
el.stop();
ticker.isInitialize = false;
};
/**
* Reload the ticker (revert all DOM changes, and re-initialize)
*/
el.reloadCarouselTicker = function (settings) {
if (settings != undefined) options = settings;
el.destructor();
_init();
};
/**
* Start rotate to next direction
*/
el.next = function () {
el.stop();
ticker.settings.direction = "next";
ticker.directionSwitcher = ticker.settings.direction === "prev" ? -1 : 1;
el.run();
};
/**
* Start rotate to prev direction
*/
el.prev = function () {
el.stop();
ticker.settings.direction = "prev";
ticker.directionSwitcher = ticker.settings.direction === "prev" ? -1 : 1;
el.run();
};
if (document.readyState === "loading") {
$(window).on("load", function () {
_init();
});
} else {
_init();
}
// returns the current jQuery object
return this;
};
})(jQuery);
$(".carouselTicker").carouselTicker({
// animation speed
speed: 2,
// animation delay
delay: 30,
// or 'next'
direction: "next",
// or 'vertical'
mode: "horizontal",
// callback
onCarouselTickerLoad: function () {},
});
$(".carouselTicker2").carouselTicker({
// animation speed
speed: 2,
// animation delay
delay: 30,
// or 'next'
direction: "prev",
// or 'vertical'
mode: "horizontal",
// callback
onCarouselTickerLoad: function () {},
});