Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

react-carousel-slider

Package Overview
Dependencies
Maintainers
1
Versions
37
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-carousel-slider - npm Package Compare versions

Comparing version 2.0.4 to 2.0.5

umd/main.ad05c927.css
umd/main.ad05c927.css.map

436

es/index.js

@@ -18,4 +18,8 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

_this.state = {
currentSlide: 1
};
_this.slidingManner = {
currentSlide: 1,
//currentSlide: 1,
slidesTotalWidth: 0,

@@ -51,5 +55,3 @@ initialMovement: 0,

circular: true,
duration: "0.5s",
flag: false,
button: true
duration: "0.5s"
};

@@ -59,2 +61,30 @@

_this.accEleSetting = {
flag: false,
button: true,
dots: true
};
_this.accEleSetting = _this.handleAccEleSetting();
_this.defaultDotStyle = {
display: "inline-block",
verticalAlign: "middle",
margin: "0 5px",
background: "#dbdbdb",
height: "10px",
width: "10px",
borderRadius: "50%"
};
_this.defaultCurrDotStyle = {
display: "inline-block",
verticalAlign: "middle",
margin: "0 5px",
background: "#3897f0",
height: "12px",
width: "12px",
borderRadius: "50%"
};
_this.defaultSliderBoxStyle = {

@@ -87,2 +117,6 @@ height: "400px",

_this.defaultDotsSetStyle = {
margin: "15px auto"
};
_this.defaultButtonIconStyle = {

@@ -109,2 +143,8 @@ color: "white",

_this.defaultDotsPosition = {
"beneath": true,
"top": false, /**/
"bottom": false
};
_this.itemsMargin = _this.props.itemsStyle ? _this.props.itemsStyle.margin ? parseInt(_this.props.itemsStyle.margin.split(' ')[1].replace('px', '')) : parseInt(_this.defaultItemsStyle.margin.split(' ')[1].replace('px', '')) : parseInt(_this.defaultItemsStyle.margin.split(' ')[1].replace('px', ''));

@@ -128,2 +168,5 @@

_this.autoSliding = _this.autoSliding.bind(_this);
_this.handleMannerSetting = _this.handleMannerSetting.bind(_this);
_this.handleAccEleSetting = _this.handleAccEleSetting.bind(_this);
// this.handleBubbling = this.handleBubbling.bind(this);

@@ -142,4 +185,8 @@ _this.handleTouchStart = _this.handleTouchStart.bind(_this);

_this.setSlideConHeight = _this.setSlideConHeight.bind(_this);
_this.setDotStyle = _this.setDotStyle.bind(_this);
_this.setCurrentDotStyle = _this.setCurrentDotStyle.bind(_this);
_this.detectButtonPosition = _this.detectButtonPosition.bind(_this);
_this.detectDotsPosition = _this.detectDotsPosition.bind(_this);
_this.allocateDotsSet = _this.allocateDotsSet.bind(_this);
_this.allocateButtonSet = _this.allocateButtonSet.bind(_this);

@@ -169,2 +216,10 @@ _this.setLeftButtonStyle = _this.setLeftButtonStyle.bind(_this);

CarouselSlider.prototype.handleAccEleSetting = function handleAccEleSetting() {
if (this.props.accEle) {
return Object.assign({}, this.accEleSetting, this.props.accEle);
} else {
return this.accEleSetting;
}
};
CarouselSlider.prototype.handleBubbling = function handleBubbling(e) {

@@ -357,3 +412,3 @@ e.stopPropagation();

if (_this4.slidingManner.currentSlide === _this4.slideCnt) {
if (_this4.state.currentSlide === _this4.slideCnt) {
if (!_this4.slidingManner.sliding) {

@@ -363,3 +418,3 @@ _this4.slidingManner.direction = -1;

}
} else if (_this4.slidingManner.currentSlide === 1) {
} else if (_this4.state.currentSlide === 1) {
if (!_this4.slidingManner.sliding) {

@@ -410,2 +465,3 @@ _this4.slidingManner.direction = 1;

CarouselSlider.prototype.moveSlide = function moveSlide(direction) {
var _this6 = this;

@@ -423,11 +479,25 @@ var expectLoadedCnt = this.mannerSetting.circular ? this.slideCnt * 3 : this.slideCnt;

this.slidingManner.movement = this.slidingManner.movement + singleMovement;
slideCon.style.transform = 'translateX(-' + this.slidingManner.movement + 'px)';
this.slidingManner.currentSlide = this.slidingManner.currentSlide + 1;
if (this.slidingManner.currentSlide === this.slideCnt + 1) {
this.slidingManner.currentSlide = 1;
this.slidingManner.cycle = this.slidingManner.cycle === 2 ? 0 : this.slidingManner.cycle + 1;
if (this.state.currentSlide === this.slideCnt) {
this.itemsReorder();
this.movementReset(direction);
this.setState(function (prevState) {
return {
currentSlide: 1
};
}, function () {
slideCon.style.transform = 'translateX(-' + _this6.slidingManner.movement + 'px)';
_this6.slidingManner.cycle = _this6.slidingManner.cycle === 2 ? 0 : _this6.slidingManner.cycle + 1;
_this6.itemsReorder();
_this6.movementReset(direction);
});
} else {
this.setState(function (prevState) {
return {
currentSlide: prevState.currentSlide + 1
};
}, function () {
slideCon.style.transform = 'translateX(-' + _this6.slidingManner.movement + 'px)';
});
}

@@ -437,11 +507,25 @@ } else if (direction === -1) {

this.slidingManner.movement = this.slidingManner.movement - singleMovement;
slideCon.style.transform = 'translateX(-' + this.slidingManner.movement + 'px)';
this.slidingManner.currentSlide = this.slidingManner.currentSlide === 1 ? -1 : this.slidingManner.currentSlide - 1;
//slideCon.style.transform = 'translateX(-' + this.slidingManner.movement + 'px)';
//this.slidingManner.currentSlide = (this.slidingManner.currentSlide === 1) ? -1 : this.slidingManner.currentSlide - 1;
if (this.state.currentSlide === 1) {
if (this.slidingManner.currentSlide === -1) {
this.slidingManner.currentSlide = this.slideCnt;
this.slidingManner.cycle = this.slidingManner.cycle === 0 ? 2 : this.slidingManner.cycle - 1;
this.setState(function (prevState) {
return {
currentSlide: _this6.slideCnt
};
}, function () {
slideCon.style.transform = 'translateX(-' + _this6.slidingManner.movement + 'px)';
_this6.slidingManner.cycle = _this6.slidingManner.cycle === 0 ? 2 : _this6.slidingManner.cycle - 1;
_this6.itemsReorder();
_this6.movementReset(direction);
});
} else {
this.itemsReorder();
this.movementReset(direction);
this.setState(function (prevState) {
return {
currentSlide: prevState.currentSlide - 1
};
}, function () {
slideCon.style.transform = 'translateX(-' + _this6.slidingManner.movement + 'px)';
});
}

@@ -452,14 +536,29 @@ }

slideCon.style.transition = 'transform ' + this.mannerSetting.duration + ' ease'; // for after dragging
if (direction === 1 && this.slidingManner.currentSlide < this.slideCnt) {
if (direction === 1 && this.state.currentSlide < this.slideCnt) {
this.slidingManner.sliding = true;
singleMovement = this.calMovement(direction);
this.slidingManner.currentSlide = this.slidingManner.currentSlide + 1;
this.slidingManner.movement = this.slidingManner.movement + singleMovement;
slideCon.style.transform = 'translateX(-' + this.slidingManner.movement + 'px)';
} else if (direction === -1 && this.slidingManner.currentSlide > 1) {
this.setState(function (prevState) {
return {
currentSlide: prevState.currentSlide + 1
};
}, function () {
slideCon.style.transform = 'translateX(-' + _this6.slidingManner.movement + 'px)';
});
} else if (direction === -1 && this.state.currentSlide > 1) {
this.slidingManner.sliding = true;
singleMovement = this.calMovement(direction);
this.slidingManner.currentSlide = this.slidingManner.currentSlide - 1;
this.slidingManner.movement = this.slidingManner.movement - singleMovement;
slideCon.style.transform = 'translateX(-' + this.slidingManner.movement + 'px)';
this.setState(function (prevState) {
return {
currentSlide: prevState.currentSlide - 1
};
}, function () {
slideCon.style.transform = 'translateX(-' + _this6.slidingManner.movement + 'px)';
});
} else {

@@ -473,4 +572,4 @@ return false; //for dragging

CarouselSlider.prototype.calMovement = function calMovement(direction) {
var count = direction === 1 ? 1 : this.slidingManner.currentSlide === 1 ? -2 : -1;
var movement = this.imgsWidth[this.slidingManner.currentSlide] / 2 + this.itemsMargin * 2 + this.imgsWidth[this.slidingManner.currentSlide + count] / 2;
var count = direction === 1 ? 1 : this.state.currentSlide === 1 ? -2 : -1;
var movement = this.imgsWidth[this.state.currentSlide] / 2 + this.itemsMargin * 2 + this.imgsWidth[this.state.currentSlide + count] / 2;
return movement;

@@ -488,3 +587,2 @@ };

CarouselSlider.prototype.handleTouchMove = function handleTouchMove(e) {
if (this.touchEvent.beingTouched) {

@@ -501,3 +599,2 @@ this.slidingManner.sliding = true;

if (this.touchEvent.beingTouched) {
if (Math.abs(this.touchEvent.touchStartX - e.changedTouches[0].clientX) > 20) {

@@ -600,2 +697,127 @@ this.slidingManner.sliding = false;

CarouselSlider.prototype.setDotStyle = function setDotStyle() {
var dotStyle = {};
if (this.props.dotsSetting) {
if (this.props.dotsSetting.style) {
if (this.props.dotsSetting.style.dotSpace) {
dotStyle.margin = "0px " + this.props.dotsSetting.style.dotSpace;
}
if (this.props.dotsSetting.style.dotSize) {
dotStyle.height = this.props.dotsSetting.style.dotSize;
dotStyle.width = this.props.dotsSetting.style.dotSize;
}
if (this.props.dotsSetting.style.dotColor) {
dotStyle.background = this.props.dotsSetting.style.dotColor;
}
return Object.assign({}, this.defaultDotStyle, dotStyle);
} else {
return this.defaultDotStyle;
}
} else {
return this.defaultDotStyle;
}
};
CarouselSlider.prototype.setCurrentDotStyle = function setCurrentDotStyle() {
var currDotStyle = {};
if (this.props.dotsSetting) {
if (this.props.dotsSetting.style) {
if (this.props.dotsSetting.style.dotSpace) {
currDotStyle.margin = "0px " + this.props.dotsSetting.style.dotSpace;
}
if (this.props.dotsSetting.style.currDotSize) {
currDotStyle.height = this.props.dotsSetting.style.currDotSize;
currDotStyle.width = this.props.dotsSetting.style.currDotSize;
}
if (this.props.dotsSetting.style.currDotColor) {
currDotStyle.background = this.props.dotsSetting.style.currDotColor;
}
return Object.assign({}, this.defaultCurrDotStyle, currDotStyle);
} else {
return this.defaultCurrDotStyle;
}
} else {
return this.defaultCurrDotStyle;
}
};
CarouselSlider.prototype.detectDotsPosition = function detectDotsPosition() {
var position = void 0;
// let customDotsPosition = {};
var dotsPosition = this.defaultDotsPosition;
if (this.props.dotsSetting) {
if (this.props.dotsSetting.placeOn) {
if (dotsPosition[this.props.dotsSetting.placeOn] === false) {
dotsPosition[this.props.dotsSetting.placeOn] = true;
}
}
}
for (var key in dotsPosition) {
if (dotsPosition[key] === true) {
position = key;
}
}
if (position === 'beneath') {
return {
vertical: "beneath"
// ,outOfBox: true
};
} else {
if (position === 'top') {
return {
vertical: "top"
// ,outOfBox: false
};
} else {
return {
vertical: "bottom"
// ,outOfBox: false
};
}
}
};
CarouselSlider.prototype.allocateDotsSet = function allocateDotsSet(setting) {
var style = {};
style = Object.assign({}, this.defaultDotsSetStyle);
if (this.props.dotsSetting) {
if (this.props.dotsSetting.style) {
for (var key in this.props.dotsSetting.style) {
if (key.includes('margin')) {
style[key] = this.props.dotsSetting.style[key];
}
}
}
}
switch (setting.vertical) {
case 'top':
style['position'] = 'absolute';
style['right'] = '0px';
style['left'] = '0px';
style['top'] = '0px';
break;
case 'bottom':
style['position'] = 'absolute';
style['right'] = '0px';
style['left'] = '0px';
style['bottom'] = '0px';
break;
case 'beneath':
break;
}
return style;
};
CarouselSlider.prototype.detectButtonPosition = function detectButtonPosition() {

@@ -724,3 +946,3 @@ var position = [];

CarouselSlider.prototype.render = function render() {
var _this6 = this;
var _this7 = this;

@@ -737,8 +959,11 @@ var renderSlideItems = void 0,

rButtonIcon = void 0,
buttonSetting = void 0;
buttonSetting = void 0,
dotsSet = void 0,
dotsSetting = void 0;
if (this.slideCnt) {
if (this.mannerSetting.button) {
if (this.accEleSetting.button) {
buttonSetting = this.detectButtonPosition();
lButtonIcon = this.props.lBtnCpnt ? this.props.lBtnCpnt : React.createElement('div', { className: 'arrowBtn previous', style: this.setLeftButtonStyle() });

@@ -748,7 +973,6 @@ rButtonIcon = this.props.rBtnCpnt ? this.props.rBtnCpnt : React.createElement('div', { className: 'arrowBtn next', style: this.setRightButtonStyle() });

if (buttonSetting.separate) {
leftButton = React.createElement(
'div',
{ className: 'buttonWrapper left', style: this.setHoverEvent(), onClick: function onClick() {
return _this6.handleButtonClick(-1);
return _this7.handleButtonClick(-1);
} },

@@ -760,3 +984,3 @@ lButtonIcon

{ className: 'buttonWrapper right', style: this.setHoverEvent(), onClick: function onClick() {
return _this6.handleButtonClick(1);
return _this7.handleButtonClick(1);
} },

@@ -772,3 +996,3 @@ rButtonIcon

{ className: 'buttonWrapper', style: this.setHoverEvent(), onClick: function onClick() {
return _this6.handleButtonClick(-1);
return _this7.handleButtonClick(-1);
} },

@@ -780,3 +1004,3 @@ lButtonIcon

{ className: 'buttonWrapper', style: this.setHoverEvent(), onClick: function onClick() {
return _this6.handleButtonClick(1);
return _this7.handleButtonClick(1);
} },

@@ -790,16 +1014,16 @@ rButtonIcon

if (this.mannerSetting.circular && this.slideCnt > 1) {
// Ignore this.mannerSetting.flag in this scope.
// Ignore this.accEleSetting.flag in this scope.
items = this.slideEls.map(function (slideEl, index) {
return _this6.slideItemHandler(slideEl, index - _this6.slideCnt);
return _this7.slideItemHandler(slideEl, index - _this7.slideCnt);
});
items = items.concat(this.slideEls.map(function (slideEl, index) {
return _this6.slideItemHandler(slideEl, index + 1);
return _this7.slideItemHandler(slideEl, index + 1);
}));
items = items.concat(this.slideEls.map(function (slideEl, index) {
return _this6.slideItemHandler(slideEl, index + 1 + _this6.slideCnt);
return _this7.slideItemHandler(slideEl, index + 1 + _this7.slideCnt);
}));
} else {
if (this.mannerSetting.flag) {
if (this.accEleSetting.flag) {
sflag = React.createElement('div', { className: 'flag', ref: 'sflag', style: { order: 0 }, key: 'sflag' });

@@ -812,3 +1036,3 @@ eflag = React.createElement('div', { className: 'flag', ref: 'eflag', style: { order: this.slideCnt + 1 }, key: 'eflag' });

items = this.slideEls.map(function (slideEl, index) {
return _this6.slideItemHandler(slideEl, index + 1);
return _this7.slideItemHandler(slideEl, index + 1);
});

@@ -825,9 +1049,9 @@ items.unshift(sflag);

onTouchStart: function onTouchStart(e) {
return _this6.handleTouchStart(e);
return _this7.handleTouchStart(e);
},
onTouchMove: function onTouchMove(e) {
return _this6.handleTouchMove(e);
return _this7.handleTouchMove(e);
},
onTouchEnd: function onTouchEnd(e) {
return _this6.handleTouchEnd(e);
return _this7.handleTouchEnd(e);
} },

@@ -839,9 +1063,9 @@ items

onDragStart: function onDragStart(e) {
return _this6.handleDragStart(e);
return _this7.handleDragStart(e);
},
onDragEnd: function onDragEnd(e) {
return _this6.handleDragStop(e);
return _this7.handleDragStop(e);
},
onDragOver: function onDragOver(e) {
return _this6.handleDragOver(e);
return _this7.handleDragOver(e);
},

@@ -852,57 +1076,77 @@ style: this.setSlideConHeight() },

if (this.mannerSetting.button) {
if (buttonSetting.separate) {
if (buttonSetting.outOfBox) {
renderSlideItems = React.createElement(
'div',
{ className: 'sliderSet' },
leftButton,
React.createElement(
'div',
{ className: 'sliderBox', ref: 'sliderBox', style: this.setSliderBoxStyles() },
slideCon
),
rightButton
);
if (this.accEleSetting.dots) {
dotsSetting = this.detectDotsPosition();
var dots = [];
for (var i = 0; i < this.slideCnt; i++) {
var dot = void 0;
if (i + 1 === this.state.currentSlide) {
dot = React.createElement('div', { style: this.setCurrentDotStyle() });
} else {
renderSlideItems = React.createElement(
dot = React.createElement('div', { style: this.setDotStyle() });
}
dots.push(dot);
}
dotsSet = React.createElement(
'div',
{ className: 'dotsSet', style: this.allocateDotsSet(dotsSetting) },
dots
);
}
if (this.accEleSetting.button) {
if (this.accEleSetting.dots) {
renderSlideItems = React.createElement(
'div',
{ className: 'sliderSet' },
buttonSetting.outOfBox ? buttonSetting.separate ? leftButton : null : null,
React.createElement(
'div',
{ className: 'sliderBox', ref: 'sliderBox', style: this.setSliderBoxStyles() },
leftButton,
buttonSetting.outOfBox ? null : buttonSetting.separate ? leftButton : buttons,
dotsSetting.vertical !== 'beneath' ? dotsSet : null,
slideCon,
rightButton
);
}
buttonSetting.outOfBox ? null : buttonSetting.separate ? rightButton : null
),
dotsSetting.vertical === 'beneath' ? dotsSet : null,
buttonSetting.outOfBox ? buttonSetting.separate ? rightButton : buttons : null
);
} else {
if (buttonSetting.outOfBox) {
renderSlideItems = React.createElement(
renderSlideItems = React.createElement(
'div',
{ className: 'sliderSet' },
buttonSetting.outOfBox ? buttonSetting.separate ? leftButton : null : null,
React.createElement(
'div',
null,
React.createElement(
'div',
{ className: 'sliderBox', ref: 'sliderBox', style: this.setSliderBoxStyles() },
slideCon
),
buttons
);
} else {
renderSlideItems = React.createElement(
{ className: 'sliderBox', ref: 'sliderBox', style: this.setSliderBoxStyles() },
buttonSetting.outOfBox ? null : buttonSetting.separate ? leftButton : buttons,
slideCon,
buttonSetting.outOfBox ? null : buttonSetting.separate ? rightButton : null
),
buttonSetting.outOfBox ? buttonSetting.separate ? rightButton : buttons : null
);
}
} else {
if (this.accEleSetting.dots) {
renderSlideItems = React.createElement(
'div',
{ className: 'sliderSet' },
React.createElement(
'div',
{ className: 'sliderBox', ref: 'sliderBox', style: this.setSliderBoxStyles() },
buttons,
slideCon
);
}
)
);
} else {
renderSlideItems = React.createElement(
'div',
{ className: 'sliderSet' },
React.createElement(
'div',
{ className: 'sliderBox', ref: 'sliderBox', style: this.setSliderBoxStyles() },
dotsSetting.vertical !== 'beneath' ? dotsSet : null,
slideCon
),
dotsSetting.vertical === 'beneath' ? dotsSet : null
);
}
} else {
renderSlideItems = React.createElement(
'div',
{ className: 'sliderSet' },
React.createElement(
'div',
{ className: 'sliderBox', ref: 'sliderBox', style: this.setSliderBoxStyles() },
slideCon
)
);
}

@@ -909,0 +1153,0 @@ }

436

lib/index.js

@@ -27,4 +27,8 @@ 'use strict';

_this.state = {
currentSlide: 1
};
_this.slidingManner = {
currentSlide: 1,
//currentSlide: 1,
slidesTotalWidth: 0,

@@ -60,5 +64,3 @@ initialMovement: 0,

circular: true,
duration: "0.5s",
flag: false,
button: true
duration: "0.5s"
};

@@ -68,2 +70,30 @@

_this.accEleSetting = {
flag: false,
button: true,
dots: true
};
_this.accEleSetting = _this.handleAccEleSetting();
_this.defaultDotStyle = {
display: "inline-block",
verticalAlign: "middle",
margin: "0 5px",
background: "#dbdbdb",
height: "10px",
width: "10px",
borderRadius: "50%"
};
_this.defaultCurrDotStyle = {
display: "inline-block",
verticalAlign: "middle",
margin: "0 5px",
background: "#3897f0",
height: "12px",
width: "12px",
borderRadius: "50%"
};
_this.defaultSliderBoxStyle = {

@@ -96,2 +126,6 @@ height: "400px",

_this.defaultDotsSetStyle = {
margin: "15px auto"
};
_this.defaultButtonIconStyle = {

@@ -118,2 +152,8 @@ color: "white",

_this.defaultDotsPosition = {
"beneath": true,
"top": false, /**/
"bottom": false
};
_this.itemsMargin = _this.props.itemsStyle ? _this.props.itemsStyle.margin ? parseInt(_this.props.itemsStyle.margin.split(' ')[1].replace('px', '')) : parseInt(_this.defaultItemsStyle.margin.split(' ')[1].replace('px', '')) : parseInt(_this.defaultItemsStyle.margin.split(' ')[1].replace('px', ''));

@@ -137,2 +177,5 @@

_this.autoSliding = _this.autoSliding.bind(_this);
_this.handleMannerSetting = _this.handleMannerSetting.bind(_this);
_this.handleAccEleSetting = _this.handleAccEleSetting.bind(_this);
// this.handleBubbling = this.handleBubbling.bind(this);

@@ -151,4 +194,8 @@ _this.handleTouchStart = _this.handleTouchStart.bind(_this);

_this.setSlideConHeight = _this.setSlideConHeight.bind(_this);
_this.setDotStyle = _this.setDotStyle.bind(_this);
_this.setCurrentDotStyle = _this.setCurrentDotStyle.bind(_this);
_this.detectButtonPosition = _this.detectButtonPosition.bind(_this);
_this.detectDotsPosition = _this.detectDotsPosition.bind(_this);
_this.allocateDotsSet = _this.allocateDotsSet.bind(_this);
_this.allocateButtonSet = _this.allocateButtonSet.bind(_this);

@@ -178,2 +225,10 @@ _this.setLeftButtonStyle = _this.setLeftButtonStyle.bind(_this);

CarouselSlider.prototype.handleAccEleSetting = function handleAccEleSetting() {
if (this.props.accEle) {
return Object.assign({}, this.accEleSetting, this.props.accEle);
} else {
return this.accEleSetting;
}
};
CarouselSlider.prototype.handleBubbling = function handleBubbling(e) {

@@ -366,3 +421,3 @@ e.stopPropagation();

if (_this4.slidingManner.currentSlide === _this4.slideCnt) {
if (_this4.state.currentSlide === _this4.slideCnt) {
if (!_this4.slidingManner.sliding) {

@@ -372,3 +427,3 @@ _this4.slidingManner.direction = -1;

}
} else if (_this4.slidingManner.currentSlide === 1) {
} else if (_this4.state.currentSlide === 1) {
if (!_this4.slidingManner.sliding) {

@@ -419,2 +474,3 @@ _this4.slidingManner.direction = 1;

CarouselSlider.prototype.moveSlide = function moveSlide(direction) {
var _this6 = this;

@@ -432,11 +488,25 @@ var expectLoadedCnt = this.mannerSetting.circular ? this.slideCnt * 3 : this.slideCnt;

this.slidingManner.movement = this.slidingManner.movement + singleMovement;
slideCon.style.transform = 'translateX(-' + this.slidingManner.movement + 'px)';
this.slidingManner.currentSlide = this.slidingManner.currentSlide + 1;
if (this.slidingManner.currentSlide === this.slideCnt + 1) {
this.slidingManner.currentSlide = 1;
this.slidingManner.cycle = this.slidingManner.cycle === 2 ? 0 : this.slidingManner.cycle + 1;
if (this.state.currentSlide === this.slideCnt) {
this.itemsReorder();
this.movementReset(direction);
this.setState(function (prevState) {
return {
currentSlide: 1
};
}, function () {
slideCon.style.transform = 'translateX(-' + _this6.slidingManner.movement + 'px)';
_this6.slidingManner.cycle = _this6.slidingManner.cycle === 2 ? 0 : _this6.slidingManner.cycle + 1;
_this6.itemsReorder();
_this6.movementReset(direction);
});
} else {
this.setState(function (prevState) {
return {
currentSlide: prevState.currentSlide + 1
};
}, function () {
slideCon.style.transform = 'translateX(-' + _this6.slidingManner.movement + 'px)';
});
}

@@ -446,11 +516,25 @@ } else if (direction === -1) {

this.slidingManner.movement = this.slidingManner.movement - singleMovement;
slideCon.style.transform = 'translateX(-' + this.slidingManner.movement + 'px)';
this.slidingManner.currentSlide = this.slidingManner.currentSlide === 1 ? -1 : this.slidingManner.currentSlide - 1;
//slideCon.style.transform = 'translateX(-' + this.slidingManner.movement + 'px)';
//this.slidingManner.currentSlide = (this.slidingManner.currentSlide === 1) ? -1 : this.slidingManner.currentSlide - 1;
if (this.state.currentSlide === 1) {
if (this.slidingManner.currentSlide === -1) {
this.slidingManner.currentSlide = this.slideCnt;
this.slidingManner.cycle = this.slidingManner.cycle === 0 ? 2 : this.slidingManner.cycle - 1;
this.setState(function (prevState) {
return {
currentSlide: _this6.slideCnt
};
}, function () {
slideCon.style.transform = 'translateX(-' + _this6.slidingManner.movement + 'px)';
_this6.slidingManner.cycle = _this6.slidingManner.cycle === 0 ? 2 : _this6.slidingManner.cycle - 1;
_this6.itemsReorder();
_this6.movementReset(direction);
});
} else {
this.itemsReorder();
this.movementReset(direction);
this.setState(function (prevState) {
return {
currentSlide: prevState.currentSlide - 1
};
}, function () {
slideCon.style.transform = 'translateX(-' + _this6.slidingManner.movement + 'px)';
});
}

@@ -461,14 +545,29 @@ }

slideCon.style.transition = 'transform ' + this.mannerSetting.duration + ' ease'; // for after dragging
if (direction === 1 && this.slidingManner.currentSlide < this.slideCnt) {
if (direction === 1 && this.state.currentSlide < this.slideCnt) {
this.slidingManner.sliding = true;
singleMovement = this.calMovement(direction);
this.slidingManner.currentSlide = this.slidingManner.currentSlide + 1;
this.slidingManner.movement = this.slidingManner.movement + singleMovement;
slideCon.style.transform = 'translateX(-' + this.slidingManner.movement + 'px)';
} else if (direction === -1 && this.slidingManner.currentSlide > 1) {
this.setState(function (prevState) {
return {
currentSlide: prevState.currentSlide + 1
};
}, function () {
slideCon.style.transform = 'translateX(-' + _this6.slidingManner.movement + 'px)';
});
} else if (direction === -1 && this.state.currentSlide > 1) {
this.slidingManner.sliding = true;
singleMovement = this.calMovement(direction);
this.slidingManner.currentSlide = this.slidingManner.currentSlide - 1;
this.slidingManner.movement = this.slidingManner.movement - singleMovement;
slideCon.style.transform = 'translateX(-' + this.slidingManner.movement + 'px)';
this.setState(function (prevState) {
return {
currentSlide: prevState.currentSlide - 1
};
}, function () {
slideCon.style.transform = 'translateX(-' + _this6.slidingManner.movement + 'px)';
});
} else {

@@ -482,4 +581,4 @@ return false; //for dragging

CarouselSlider.prototype.calMovement = function calMovement(direction) {
var count = direction === 1 ? 1 : this.slidingManner.currentSlide === 1 ? -2 : -1;
var movement = this.imgsWidth[this.slidingManner.currentSlide] / 2 + this.itemsMargin * 2 + this.imgsWidth[this.slidingManner.currentSlide + count] / 2;
var count = direction === 1 ? 1 : this.state.currentSlide === 1 ? -2 : -1;
var movement = this.imgsWidth[this.state.currentSlide] / 2 + this.itemsMargin * 2 + this.imgsWidth[this.state.currentSlide + count] / 2;
return movement;

@@ -497,3 +596,2 @@ };

CarouselSlider.prototype.handleTouchMove = function handleTouchMove(e) {
if (this.touchEvent.beingTouched) {

@@ -510,3 +608,2 @@ this.slidingManner.sliding = true;

if (this.touchEvent.beingTouched) {
if (Math.abs(this.touchEvent.touchStartX - e.changedTouches[0].clientX) > 20) {

@@ -609,2 +706,127 @@ this.slidingManner.sliding = false;

CarouselSlider.prototype.setDotStyle = function setDotStyle() {
var dotStyle = {};
if (this.props.dotsSetting) {
if (this.props.dotsSetting.style) {
if (this.props.dotsSetting.style.dotSpace) {
dotStyle.margin = "0px " + this.props.dotsSetting.style.dotSpace;
}
if (this.props.dotsSetting.style.dotSize) {
dotStyle.height = this.props.dotsSetting.style.dotSize;
dotStyle.width = this.props.dotsSetting.style.dotSize;
}
if (this.props.dotsSetting.style.dotColor) {
dotStyle.background = this.props.dotsSetting.style.dotColor;
}
return Object.assign({}, this.defaultDotStyle, dotStyle);
} else {
return this.defaultDotStyle;
}
} else {
return this.defaultDotStyle;
}
};
CarouselSlider.prototype.setCurrentDotStyle = function setCurrentDotStyle() {
var currDotStyle = {};
if (this.props.dotsSetting) {
if (this.props.dotsSetting.style) {
if (this.props.dotsSetting.style.dotSpace) {
currDotStyle.margin = "0px " + this.props.dotsSetting.style.dotSpace;
}
if (this.props.dotsSetting.style.currDotSize) {
currDotStyle.height = this.props.dotsSetting.style.currDotSize;
currDotStyle.width = this.props.dotsSetting.style.currDotSize;
}
if (this.props.dotsSetting.style.currDotColor) {
currDotStyle.background = this.props.dotsSetting.style.currDotColor;
}
return Object.assign({}, this.defaultCurrDotStyle, currDotStyle);
} else {
return this.defaultCurrDotStyle;
}
} else {
return this.defaultCurrDotStyle;
}
};
CarouselSlider.prototype.detectDotsPosition = function detectDotsPosition() {
var position = void 0;
// let customDotsPosition = {};
var dotsPosition = this.defaultDotsPosition;
if (this.props.dotsSetting) {
if (this.props.dotsSetting.placeOn) {
if (dotsPosition[this.props.dotsSetting.placeOn] === false) {
dotsPosition[this.props.dotsSetting.placeOn] = true;
}
}
}
for (var key in dotsPosition) {
if (dotsPosition[key] === true) {
position = key;
}
}
if (position === 'beneath') {
return {
vertical: "beneath"
// ,outOfBox: true
};
} else {
if (position === 'top') {
return {
vertical: "top"
// ,outOfBox: false
};
} else {
return {
vertical: "bottom"
// ,outOfBox: false
};
}
}
};
CarouselSlider.prototype.allocateDotsSet = function allocateDotsSet(setting) {
var style = {};
style = Object.assign({}, this.defaultDotsSetStyle);
if (this.props.dotsSetting) {
if (this.props.dotsSetting.style) {
for (var key in this.props.dotsSetting.style) {
if (key.includes('margin')) {
style[key] = this.props.dotsSetting.style[key];
}
}
}
}
switch (setting.vertical) {
case 'top':
style['position'] = 'absolute';
style['right'] = '0px';
style['left'] = '0px';
style['top'] = '0px';
break;
case 'bottom':
style['position'] = 'absolute';
style['right'] = '0px';
style['left'] = '0px';
style['bottom'] = '0px';
break;
case 'beneath':
break;
}
return style;
};
CarouselSlider.prototype.detectButtonPosition = function detectButtonPosition() {

@@ -733,3 +955,3 @@ var position = [];

CarouselSlider.prototype.render = function render() {
var _this6 = this;
var _this7 = this;

@@ -746,8 +968,11 @@ var renderSlideItems = void 0,

rButtonIcon = void 0,
buttonSetting = void 0;
buttonSetting = void 0,
dotsSet = void 0,
dotsSetting = void 0;
if (this.slideCnt) {
if (this.mannerSetting.button) {
if (this.accEleSetting.button) {
buttonSetting = this.detectButtonPosition();
lButtonIcon = this.props.lBtnCpnt ? this.props.lBtnCpnt : _react2.default.createElement('div', { className: 'arrowBtn previous', style: this.setLeftButtonStyle() });

@@ -757,7 +982,6 @@ rButtonIcon = this.props.rBtnCpnt ? this.props.rBtnCpnt : _react2.default.createElement('div', { className: 'arrowBtn next', style: this.setRightButtonStyle() });

if (buttonSetting.separate) {
leftButton = _react2.default.createElement(
'div',
{ className: 'buttonWrapper left', style: this.setHoverEvent(), onClick: function onClick() {
return _this6.handleButtonClick(-1);
return _this7.handleButtonClick(-1);
} },

@@ -769,3 +993,3 @@ lButtonIcon

{ className: 'buttonWrapper right', style: this.setHoverEvent(), onClick: function onClick() {
return _this6.handleButtonClick(1);
return _this7.handleButtonClick(1);
} },

@@ -781,3 +1005,3 @@ rButtonIcon

{ className: 'buttonWrapper', style: this.setHoverEvent(), onClick: function onClick() {
return _this6.handleButtonClick(-1);
return _this7.handleButtonClick(-1);
} },

@@ -789,3 +1013,3 @@ lButtonIcon

{ className: 'buttonWrapper', style: this.setHoverEvent(), onClick: function onClick() {
return _this6.handleButtonClick(1);
return _this7.handleButtonClick(1);
} },

@@ -799,16 +1023,16 @@ rButtonIcon

if (this.mannerSetting.circular && this.slideCnt > 1) {
// Ignore this.mannerSetting.flag in this scope.
// Ignore this.accEleSetting.flag in this scope.
items = this.slideEls.map(function (slideEl, index) {
return _this6.slideItemHandler(slideEl, index - _this6.slideCnt);
return _this7.slideItemHandler(slideEl, index - _this7.slideCnt);
});
items = items.concat(this.slideEls.map(function (slideEl, index) {
return _this6.slideItemHandler(slideEl, index + 1);
return _this7.slideItemHandler(slideEl, index + 1);
}));
items = items.concat(this.slideEls.map(function (slideEl, index) {
return _this6.slideItemHandler(slideEl, index + 1 + _this6.slideCnt);
return _this7.slideItemHandler(slideEl, index + 1 + _this7.slideCnt);
}));
} else {
if (this.mannerSetting.flag) {
if (this.accEleSetting.flag) {
sflag = _react2.default.createElement('div', { className: 'flag', ref: 'sflag', style: { order: 0 }, key: 'sflag' });

@@ -821,3 +1045,3 @@ eflag = _react2.default.createElement('div', { className: 'flag', ref: 'eflag', style: { order: this.slideCnt + 1 }, key: 'eflag' });

items = this.slideEls.map(function (slideEl, index) {
return _this6.slideItemHandler(slideEl, index + 1);
return _this7.slideItemHandler(slideEl, index + 1);
});

@@ -834,9 +1058,9 @@ items.unshift(sflag);

onTouchStart: function onTouchStart(e) {
return _this6.handleTouchStart(e);
return _this7.handleTouchStart(e);
},
onTouchMove: function onTouchMove(e) {
return _this6.handleTouchMove(e);
return _this7.handleTouchMove(e);
},
onTouchEnd: function onTouchEnd(e) {
return _this6.handleTouchEnd(e);
return _this7.handleTouchEnd(e);
} },

@@ -848,9 +1072,9 @@ items

onDragStart: function onDragStart(e) {
return _this6.handleDragStart(e);
return _this7.handleDragStart(e);
},
onDragEnd: function onDragEnd(e) {
return _this6.handleDragStop(e);
return _this7.handleDragStop(e);
},
onDragOver: function onDragOver(e) {
return _this6.handleDragOver(e);
return _this7.handleDragOver(e);
},

@@ -861,57 +1085,77 @@ style: this.setSlideConHeight() },

if (this.mannerSetting.button) {
if (buttonSetting.separate) {
if (buttonSetting.outOfBox) {
renderSlideItems = _react2.default.createElement(
'div',
{ className: 'sliderSet' },
leftButton,
_react2.default.createElement(
'div',
{ className: 'sliderBox', ref: 'sliderBox', style: this.setSliderBoxStyles() },
slideCon
),
rightButton
);
if (this.accEleSetting.dots) {
dotsSetting = this.detectDotsPosition();
var dots = [];
for (var i = 0; i < this.slideCnt; i++) {
var dot = void 0;
if (i + 1 === this.state.currentSlide) {
dot = _react2.default.createElement('div', { style: this.setCurrentDotStyle() });
} else {
renderSlideItems = _react2.default.createElement(
dot = _react2.default.createElement('div', { style: this.setDotStyle() });
}
dots.push(dot);
}
dotsSet = _react2.default.createElement(
'div',
{ className: 'dotsSet', style: this.allocateDotsSet(dotsSetting) },
dots
);
}
if (this.accEleSetting.button) {
if (this.accEleSetting.dots) {
renderSlideItems = _react2.default.createElement(
'div',
{ className: 'sliderSet' },
buttonSetting.outOfBox ? buttonSetting.separate ? leftButton : null : null,
_react2.default.createElement(
'div',
{ className: 'sliderBox', ref: 'sliderBox', style: this.setSliderBoxStyles() },
leftButton,
buttonSetting.outOfBox ? null : buttonSetting.separate ? leftButton : buttons,
dotsSetting.vertical !== 'beneath' ? dotsSet : null,
slideCon,
rightButton
);
}
buttonSetting.outOfBox ? null : buttonSetting.separate ? rightButton : null
),
dotsSetting.vertical === 'beneath' ? dotsSet : null,
buttonSetting.outOfBox ? buttonSetting.separate ? rightButton : buttons : null
);
} else {
if (buttonSetting.outOfBox) {
renderSlideItems = _react2.default.createElement(
renderSlideItems = _react2.default.createElement(
'div',
{ className: 'sliderSet' },
buttonSetting.outOfBox ? buttonSetting.separate ? leftButton : null : null,
_react2.default.createElement(
'div',
null,
_react2.default.createElement(
'div',
{ className: 'sliderBox', ref: 'sliderBox', style: this.setSliderBoxStyles() },
slideCon
),
buttons
);
} else {
renderSlideItems = _react2.default.createElement(
{ className: 'sliderBox', ref: 'sliderBox', style: this.setSliderBoxStyles() },
buttonSetting.outOfBox ? null : buttonSetting.separate ? leftButton : buttons,
slideCon,
buttonSetting.outOfBox ? null : buttonSetting.separate ? rightButton : null
),
buttonSetting.outOfBox ? buttonSetting.separate ? rightButton : buttons : null
);
}
} else {
if (this.accEleSetting.dots) {
renderSlideItems = _react2.default.createElement(
'div',
{ className: 'sliderSet' },
_react2.default.createElement(
'div',
{ className: 'sliderBox', ref: 'sliderBox', style: this.setSliderBoxStyles() },
buttons,
slideCon
);
}
)
);
} else {
renderSlideItems = _react2.default.createElement(
'div',
{ className: 'sliderSet' },
_react2.default.createElement(
'div',
{ className: 'sliderBox', ref: 'sliderBox', style: this.setSliderBoxStyles() },
dotsSetting.vertical !== 'beneath' ? dotsSet : null,
slideCon
),
dotsSetting.vertical === 'beneath' ? dotsSet : null
);
}
} else {
renderSlideItems = _react2.default.createElement(
'div',
{ className: 'sliderSet' },
_react2.default.createElement(
'div',
{ className: 'sliderBox', ref: 'sliderBox', style: this.setSliderBoxStyles() },
slideCon
)
);
}

@@ -918,0 +1162,0 @@ }

2

package.json
{
"name": "react-carousel-slider",
"version": "2.0.4",
"version": "2.0.5",
"description": "react-carousel-slider React component",

@@ -5,0 +5,0 @@ "main": "lib/index.js",

7

README.md

@@ -8,8 +8,9 @@ # React Carousel Slider

* Custom slide is available, arrange style and element even such as `<a></a>`, [`<Link></Link>`](https://reacttraining.com/react-router/web/example/basic) for your own.
* Custom slide is available, arrange style and element even such as `<a></a>`, [`<Link></Link>`](https://reacttraining.com/react-router/web/example/basic).
* Work well with varaible slide height and width.
* Infinite circulr sliding.
* Infinite circular sliding.
* Auto sliding.
* Touch events for dragging is available on mobile device.
* Navigation buttons customizing, multiple options to locate them.
* Dots customizing, multiple options to locate them.

@@ -167,2 +168,4 @@

* `manner`
* `accEle`
* `dotsSetting`
* `buttonSetting`

@@ -169,0 +172,0 @@ * `lBtnCpnt`

438

umd/react-carousel-slider.js
/*!
* react-carousel-slider v1.0.6
* react-carousel-slider v2.0.5
* MIT Licensed

@@ -114,4 +114,8 @@ */

_this.state = {
currentSlide: 1
};
_this.slidingManner = {
currentSlide: 1,
//currentSlide: 1,
slidesTotalWidth: 0,

@@ -147,5 +151,3 @@ initialMovement: 0,

circular: true,
duration: "0.5s",
flag: false,
button: true
duration: "0.5s"
};

@@ -155,2 +157,30 @@

_this.accEleSetting = {
flag: false,
button: true,
dots: true
};
_this.accEleSetting = _this.handleAccEleSetting();
_this.defaultDotStyle = {
display: "inline-block",
verticalAlign: "middle",
margin: "0 5px",
background: "#dbdbdb",
height: "10px",
width: "10px",
borderRadius: "50%"
};
_this.defaultCurrDotStyle = {
display: "inline-block",
verticalAlign: "middle",
margin: "0 5px",
background: "#3897f0",
height: "12px",
width: "12px",
borderRadius: "50%"
};
_this.defaultSliderBoxStyle = {

@@ -183,2 +213,6 @@ height: "400px",

_this.defaultDotsSetStyle = {
margin: "15px auto"
};
_this.defaultButtonIconStyle = {

@@ -205,2 +239,8 @@ color: "white",

_this.defaultDotsPosition = {
"beneath": true,
"top": false, /**/
"bottom": false
};
_this.itemsMargin = _this.props.itemsStyle ? _this.props.itemsStyle.margin ? parseInt(_this.props.itemsStyle.margin.split(' ')[1].replace('px', '')) : parseInt(_this.defaultItemsStyle.margin.split(' ')[1].replace('px', '')) : parseInt(_this.defaultItemsStyle.margin.split(' ')[1].replace('px', ''));

@@ -224,2 +264,5 @@

_this.autoSliding = _this.autoSliding.bind(_this);
_this.handleMannerSetting = _this.handleMannerSetting.bind(_this);
_this.handleAccEleSetting = _this.handleAccEleSetting.bind(_this);
// this.handleBubbling = this.handleBubbling.bind(this);

@@ -238,4 +281,8 @@ _this.handleTouchStart = _this.handleTouchStart.bind(_this);

_this.setSlideConHeight = _this.setSlideConHeight.bind(_this);
_this.setDotStyle = _this.setDotStyle.bind(_this);
_this.setCurrentDotStyle = _this.setCurrentDotStyle.bind(_this);
_this.detectButtonPosition = _this.detectButtonPosition.bind(_this);
_this.detectDotsPosition = _this.detectDotsPosition.bind(_this);
_this.allocateDotsSet = _this.allocateDotsSet.bind(_this);
_this.allocateButtonSet = _this.allocateButtonSet.bind(_this);

@@ -265,2 +312,10 @@ _this.setLeftButtonStyle = _this.setLeftButtonStyle.bind(_this);

CarouselSlider.prototype.handleAccEleSetting = function handleAccEleSetting() {
if (this.props.accEle) {
return Object.assign({}, this.accEleSetting, this.props.accEle);
} else {
return this.accEleSetting;
}
};
CarouselSlider.prototype.handleBubbling = function handleBubbling(e) {

@@ -453,3 +508,3 @@ e.stopPropagation();

if (_this4.slidingManner.currentSlide === _this4.slideCnt) {
if (_this4.state.currentSlide === _this4.slideCnt) {
if (!_this4.slidingManner.sliding) {

@@ -459,3 +514,3 @@ _this4.slidingManner.direction = -1;

}
} else if (_this4.slidingManner.currentSlide === 1) {
} else if (_this4.state.currentSlide === 1) {
if (!_this4.slidingManner.sliding) {

@@ -506,2 +561,3 @@ _this4.slidingManner.direction = 1;

CarouselSlider.prototype.moveSlide = function moveSlide(direction) {
var _this6 = this;

@@ -519,11 +575,25 @@ var expectLoadedCnt = this.mannerSetting.circular ? this.slideCnt * 3 : this.slideCnt;

this.slidingManner.movement = this.slidingManner.movement + singleMovement;
slideCon.style.transform = 'translateX(-' + this.slidingManner.movement + 'px)';
this.slidingManner.currentSlide = this.slidingManner.currentSlide + 1;
if (this.slidingManner.currentSlide === this.slideCnt + 1) {
this.slidingManner.currentSlide = 1;
this.slidingManner.cycle = this.slidingManner.cycle === 2 ? 0 : this.slidingManner.cycle + 1;
if (this.state.currentSlide === this.slideCnt) {
this.itemsReorder();
this.movementReset(direction);
this.setState(function (prevState) {
return {
currentSlide: 1
};
}, function () {
slideCon.style.transform = 'translateX(-' + _this6.slidingManner.movement + 'px)';
_this6.slidingManner.cycle = _this6.slidingManner.cycle === 2 ? 0 : _this6.slidingManner.cycle + 1;
_this6.itemsReorder();
_this6.movementReset(direction);
});
} else {
this.setState(function (prevState) {
return {
currentSlide: prevState.currentSlide + 1
};
}, function () {
slideCon.style.transform = 'translateX(-' + _this6.slidingManner.movement + 'px)';
});
}

@@ -533,11 +603,25 @@ } else if (direction === -1) {

this.slidingManner.movement = this.slidingManner.movement - singleMovement;
slideCon.style.transform = 'translateX(-' + this.slidingManner.movement + 'px)';
this.slidingManner.currentSlide = this.slidingManner.currentSlide === 1 ? -1 : this.slidingManner.currentSlide - 1;
//slideCon.style.transform = 'translateX(-' + this.slidingManner.movement + 'px)';
//this.slidingManner.currentSlide = (this.slidingManner.currentSlide === 1) ? -1 : this.slidingManner.currentSlide - 1;
if (this.state.currentSlide === 1) {
if (this.slidingManner.currentSlide === -1) {
this.slidingManner.currentSlide = this.slideCnt;
this.slidingManner.cycle = this.slidingManner.cycle === 0 ? 2 : this.slidingManner.cycle - 1;
this.setState(function (prevState) {
return {
currentSlide: _this6.slideCnt
};
}, function () {
slideCon.style.transform = 'translateX(-' + _this6.slidingManner.movement + 'px)';
_this6.slidingManner.cycle = _this6.slidingManner.cycle === 0 ? 2 : _this6.slidingManner.cycle - 1;
_this6.itemsReorder();
_this6.movementReset(direction);
});
} else {
this.itemsReorder();
this.movementReset(direction);
this.setState(function (prevState) {
return {
currentSlide: prevState.currentSlide - 1
};
}, function () {
slideCon.style.transform = 'translateX(-' + _this6.slidingManner.movement + 'px)';
});
}

@@ -548,14 +632,29 @@ }

slideCon.style.transition = 'transform ' + this.mannerSetting.duration + ' ease'; // for after dragging
if (direction === 1 && this.slidingManner.currentSlide < this.slideCnt) {
if (direction === 1 && this.state.currentSlide < this.slideCnt) {
this.slidingManner.sliding = true;
singleMovement = this.calMovement(direction);
this.slidingManner.currentSlide = this.slidingManner.currentSlide + 1;
this.slidingManner.movement = this.slidingManner.movement + singleMovement;
slideCon.style.transform = 'translateX(-' + this.slidingManner.movement + 'px)';
} else if (direction === -1 && this.slidingManner.currentSlide > 1) {
this.setState(function (prevState) {
return {
currentSlide: prevState.currentSlide + 1
};
}, function () {
slideCon.style.transform = 'translateX(-' + _this6.slidingManner.movement + 'px)';
});
} else if (direction === -1 && this.state.currentSlide > 1) {
this.slidingManner.sliding = true;
singleMovement = this.calMovement(direction);
this.slidingManner.currentSlide = this.slidingManner.currentSlide - 1;
this.slidingManner.movement = this.slidingManner.movement - singleMovement;
slideCon.style.transform = 'translateX(-' + this.slidingManner.movement + 'px)';
this.setState(function (prevState) {
return {
currentSlide: prevState.currentSlide - 1
};
}, function () {
slideCon.style.transform = 'translateX(-' + _this6.slidingManner.movement + 'px)';
});
} else {

@@ -569,4 +668,4 @@ return false; //for dragging

CarouselSlider.prototype.calMovement = function calMovement(direction) {
var count = direction === 1 ? 1 : this.slidingManner.currentSlide === 1 ? -2 : -1;
var movement = this.imgsWidth[this.slidingManner.currentSlide] / 2 + this.itemsMargin * 2 + this.imgsWidth[this.slidingManner.currentSlide + count] / 2;
var count = direction === 1 ? 1 : this.state.currentSlide === 1 ? -2 : -1;
var movement = this.imgsWidth[this.state.currentSlide] / 2 + this.itemsMargin * 2 + this.imgsWidth[this.state.currentSlide + count] / 2;
return movement;

@@ -584,3 +683,2 @@ };

CarouselSlider.prototype.handleTouchMove = function handleTouchMove(e) {
if (this.touchEvent.beingTouched) {

@@ -597,3 +695,2 @@ this.slidingManner.sliding = true;

if (this.touchEvent.beingTouched) {
if (Math.abs(this.touchEvent.touchStartX - e.changedTouches[0].clientX) > 20) {

@@ -696,2 +793,127 @@ this.slidingManner.sliding = false;

CarouselSlider.prototype.setDotStyle = function setDotStyle() {
var dotStyle = {};
if (this.props.dotsSetting) {
if (this.props.dotsSetting.style) {
if (this.props.dotsSetting.style.dotSpace) {
dotStyle.margin = "0px " + this.props.dotsSetting.style.dotSpace;
}
if (this.props.dotsSetting.style.dotSize) {
dotStyle.height = this.props.dotsSetting.style.dotSize;
dotStyle.width = this.props.dotsSetting.style.dotSize;
}
if (this.props.dotsSetting.style.dotColor) {
dotStyle.background = this.props.dotsSetting.style.dotColor;
}
return Object.assign({}, this.defaultDotStyle, dotStyle);
} else {
return this.defaultDotStyle;
}
} else {
return this.defaultDotStyle;
}
};
CarouselSlider.prototype.setCurrentDotStyle = function setCurrentDotStyle() {
var currDotStyle = {};
if (this.props.dotsSetting) {
if (this.props.dotsSetting.style) {
if (this.props.dotsSetting.style.dotSpace) {
currDotStyle.margin = "0px " + this.props.dotsSetting.style.dotSpace;
}
if (this.props.dotsSetting.style.currDotSize) {
currDotStyle.height = this.props.dotsSetting.style.currDotSize;
currDotStyle.width = this.props.dotsSetting.style.currDotSize;
}
if (this.props.dotsSetting.style.currDotColor) {
currDotStyle.background = this.props.dotsSetting.style.currDotColor;
}
return Object.assign({}, this.defaultCurrDotStyle, currDotStyle);
} else {
return this.defaultCurrDotStyle;
}
} else {
return this.defaultCurrDotStyle;
}
};
CarouselSlider.prototype.detectDotsPosition = function detectDotsPosition() {
var position = void 0;
// let customDotsPosition = {};
var dotsPosition = this.defaultDotsPosition;
if (this.props.dotsSetting) {
if (this.props.dotsSetting.placeOn) {
if (dotsPosition[this.props.dotsSetting.placeOn] === false) {
dotsPosition[this.props.dotsSetting.placeOn] = true;
}
}
}
for (var key in dotsPosition) {
if (dotsPosition[key] === true) {
position = key;
}
}
if (position === 'beneath') {
return {
vertical: "beneath"
// ,outOfBox: true
};
} else {
if (position === 'top') {
return {
vertical: "top"
// ,outOfBox: false
};
} else {
return {
vertical: "bottom"
// ,outOfBox: false
};
}
}
};
CarouselSlider.prototype.allocateDotsSet = function allocateDotsSet(setting) {
var style = {};
style = Object.assign({}, this.defaultDotsSetStyle);
if (this.props.dotsSetting) {
if (this.props.dotsSetting.style) {
for (var key in this.props.dotsSetting.style) {
if (key.includes('margin')) {
style[key] = this.props.dotsSetting.style[key];
}
}
}
}
switch (setting.vertical) {
case 'top':
style['position'] = 'absolute';
style['right'] = '0px';
style['left'] = '0px';
style['top'] = '0px';
break;
case 'bottom':
style['position'] = 'absolute';
style['right'] = '0px';
style['left'] = '0px';
style['bottom'] = '0px';
break;
case 'beneath':
break;
}
return style;
};
CarouselSlider.prototype.detectButtonPosition = function detectButtonPosition() {

@@ -820,3 +1042,3 @@ var position = [];

CarouselSlider.prototype.render = function render() {
var _this6 = this;
var _this7 = this;

@@ -833,8 +1055,11 @@ var renderSlideItems = void 0,

rButtonIcon = void 0,
buttonSetting = void 0;
buttonSetting = void 0,
dotsSet = void 0,
dotsSetting = void 0;
if (this.slideCnt) {
if (this.mannerSetting.button) {
if (this.accEleSetting.button) {
buttonSetting = this.detectButtonPosition();
lButtonIcon = this.props.lBtnCpnt ? this.props.lBtnCpnt : __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('div', { className: 'arrowBtn previous', style: this.setLeftButtonStyle() });

@@ -844,7 +1069,6 @@ rButtonIcon = this.props.rBtnCpnt ? this.props.rBtnCpnt : __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('div', { className: 'arrowBtn next', style: this.setRightButtonStyle() });

if (buttonSetting.separate) {
leftButton = __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
'div',
{ className: 'buttonWrapper left', style: this.setHoverEvent(), onClick: function onClick() {
return _this6.handleButtonClick(-1);
return _this7.handleButtonClick(-1);
} },

@@ -856,3 +1080,3 @@ lButtonIcon

{ className: 'buttonWrapper right', style: this.setHoverEvent(), onClick: function onClick() {
return _this6.handleButtonClick(1);
return _this7.handleButtonClick(1);
} },

@@ -868,3 +1092,3 @@ rButtonIcon

{ className: 'buttonWrapper', style: this.setHoverEvent(), onClick: function onClick() {
return _this6.handleButtonClick(-1);
return _this7.handleButtonClick(-1);
} },

@@ -876,3 +1100,3 @@ lButtonIcon

{ className: 'buttonWrapper', style: this.setHoverEvent(), onClick: function onClick() {
return _this6.handleButtonClick(1);
return _this7.handleButtonClick(1);
} },

@@ -886,16 +1110,16 @@ rButtonIcon

if (this.mannerSetting.circular && this.slideCnt > 1) {
// Ignore this.mannerSetting.flag in this scope.
// Ignore this.accEleSetting.flag in this scope.
items = this.slideEls.map(function (slideEl, index) {
return _this6.slideItemHandler(slideEl, index - _this6.slideCnt);
return _this7.slideItemHandler(slideEl, index - _this7.slideCnt);
});
items = items.concat(this.slideEls.map(function (slideEl, index) {
return _this6.slideItemHandler(slideEl, index + 1);
return _this7.slideItemHandler(slideEl, index + 1);
}));
items = items.concat(this.slideEls.map(function (slideEl, index) {
return _this6.slideItemHandler(slideEl, index + 1 + _this6.slideCnt);
return _this7.slideItemHandler(slideEl, index + 1 + _this7.slideCnt);
}));
} else {
if (this.mannerSetting.flag) {
if (this.accEleSetting.flag) {
sflag = __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('div', { className: 'flag', ref: 'sflag', style: { order: 0 }, key: 'sflag' });

@@ -908,3 +1132,3 @@ eflag = __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('div', { className: 'flag', ref: 'eflag', style: { order: this.slideCnt + 1 }, key: 'eflag' });

items = this.slideEls.map(function (slideEl, index) {
return _this6.slideItemHandler(slideEl, index + 1);
return _this7.slideItemHandler(slideEl, index + 1);
});

@@ -921,9 +1145,9 @@ items.unshift(sflag);

onTouchStart: function onTouchStart(e) {
return _this6.handleTouchStart(e);
return _this7.handleTouchStart(e);
},
onTouchMove: function onTouchMove(e) {
return _this6.handleTouchMove(e);
return _this7.handleTouchMove(e);
},
onTouchEnd: function onTouchEnd(e) {
return _this6.handleTouchEnd(e);
return _this7.handleTouchEnd(e);
} },

@@ -935,9 +1159,9 @@ items

onDragStart: function onDragStart(e) {
return _this6.handleDragStart(e);
return _this7.handleDragStart(e);
},
onDragEnd: function onDragEnd(e) {
return _this6.handleDragStop(e);
return _this7.handleDragStop(e);
},
onDragOver: function onDragOver(e) {
return _this6.handleDragOver(e);
return _this7.handleDragOver(e);
},

@@ -948,57 +1172,77 @@ style: this.setSlideConHeight() },

if (this.mannerSetting.button) {
if (buttonSetting.separate) {
if (buttonSetting.outOfBox) {
renderSlideItems = __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
'div',
{ className: 'sliderSet' },
leftButton,
__WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
'div',
{ className: 'sliderBox', ref: 'sliderBox', style: this.setSliderBoxStyles() },
slideCon
),
rightButton
);
if (this.accEleSetting.dots) {
dotsSetting = this.detectDotsPosition();
var dots = [];
for (var i = 0; i < this.slideCnt; i++) {
var dot = void 0;
if (i + 1 === this.state.currentSlide) {
dot = __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('div', { style: this.setCurrentDotStyle() });
} else {
renderSlideItems = __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
dot = __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('div', { style: this.setDotStyle() });
}
dots.push(dot);
}
dotsSet = __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
'div',
{ className: 'dotsSet', style: this.allocateDotsSet(dotsSetting) },
dots
);
}
if (this.accEleSetting.button) {
if (this.accEleSetting.dots) {
renderSlideItems = __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
'div',
{ className: 'sliderSet' },
buttonSetting.outOfBox ? buttonSetting.separate ? leftButton : null : null,
__WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
'div',
{ className: 'sliderBox', ref: 'sliderBox', style: this.setSliderBoxStyles() },
leftButton,
buttonSetting.outOfBox ? null : buttonSetting.separate ? leftButton : buttons,
dotsSetting.vertical !== 'beneath' ? dotsSet : null,
slideCon,
rightButton
);
}
buttonSetting.outOfBox ? null : buttonSetting.separate ? rightButton : null
),
dotsSetting.vertical === 'beneath' ? dotsSet : null,
buttonSetting.outOfBox ? buttonSetting.separate ? rightButton : buttons : null
);
} else {
if (buttonSetting.outOfBox) {
renderSlideItems = __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
renderSlideItems = __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
'div',
{ className: 'sliderSet' },
buttonSetting.outOfBox ? buttonSetting.separate ? leftButton : null : null,
__WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
'div',
null,
__WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
'div',
{ className: 'sliderBox', ref: 'sliderBox', style: this.setSliderBoxStyles() },
slideCon
),
buttons
);
} else {
renderSlideItems = __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
{ className: 'sliderBox', ref: 'sliderBox', style: this.setSliderBoxStyles() },
buttonSetting.outOfBox ? null : buttonSetting.separate ? leftButton : buttons,
slideCon,
buttonSetting.outOfBox ? null : buttonSetting.separate ? rightButton : null
),
buttonSetting.outOfBox ? buttonSetting.separate ? rightButton : buttons : null
);
}
} else {
if (this.accEleSetting.dots) {
renderSlideItems = __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
'div',
{ className: 'sliderSet' },
__WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
'div',
{ className: 'sliderBox', ref: 'sliderBox', style: this.setSliderBoxStyles() },
buttons,
slideCon
);
}
)
);
} else {
renderSlideItems = __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
'div',
{ className: 'sliderSet' },
__WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
'div',
{ className: 'sliderBox', ref: 'sliderBox', style: this.setSliderBoxStyles() },
dotsSetting.vertical !== 'beneath' ? dotsSet : null,
slideCon
),
dotsSetting.vertical === 'beneath' ? dotsSet : null
);
}
} else {
renderSlideItems = __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
'div',
{ className: 'sliderSet' },
__WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
'div',
{ className: 'sliderBox', ref: 'sliderBox', style: this.setSliderBoxStyles() },
slideCon
)
);
}

@@ -1005,0 +1249,0 @@ }

4

umd/react-carousel-slider.min.js
/*!
* react-carousel-slider v1.0.6
* react-carousel-slider v2.0.5
* MIT Licensed
*/
!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("react")):"function"==typeof define&&define.amd?define(["react"],e):"object"==typeof exports?exports.ReactCarouselSlider=e(require("react")):t.ReactCarouselSlider=e(t.React)}("undefined"!=typeof self?self:this,function(t){return function(t){var e={};function n(i){if(e[i])return e[i].exports;var s=e[i]={i:i,l:!1,exports:{}};return t[i].call(s.exports,s,s.exports,n),s.l=!0,s.exports}return n.m=t,n.c=e,n.d=function(t,e,i){n.o(t,e)||Object.defineProperty(t,e,{configurable:!1,enumerable:!0,get:i})},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s=0)}([function(t,e,n){t.exports=n(1)},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var i=n(2),s=n.n(i),r=n(3);n.n(r);var o=function(t){function e(n){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,e);var i,s=function(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}(this,t.call(this,n));return s.slidingManner={currentSlide:1,slidesTotalWidth:0,initialMovement:0,movement:0,direction:1,cycle:0,sliding:!1,slideOrders:[[],[],[]]},s.dragEvent={startPoint:0,dragging:!1,deltaX:0,thrershold:0,disableDragImage:(i=new Image,i.src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7",i)},s.calculateSlidesOrder=s.calculateSlidesOrder.bind(s),s.itemsReorder=s.itemsReorder.bind(s),s.movementReset=s.movementReset.bind(s),s.loadedCnt=0,s.imgsWidth={},s.mannerSetting={autoSliding:!1,circular:!0,duration:"0.5s",flag:!1,button:!0},s.mannerSetting=s.handleMannerSetting(),s.defaultSliderBoxStyle={height:"400px",width:"90%",background:"#EEEEEE",border:"none"},s.defaultSlideConStyle={height:"80%"},s.defaultItemsStyle={padding:"3px",background:"#FAFAFA",margin:"0px 40px"},s.buttonManner={hoverEvent:!1},s.defaultButtonSetStyle={},s.defaultButtonIconStyle={color:"white",background:"#757575",height:"30px",width:"30px",margin:"10px",fontSize:"20px",borderRadius:"2px",border:"none"},s.defaultBtnPosition={"top-left":!0,"top-right":!1,"middle-inside":!1,"middle-outside":!1,"bottom-right":!1,"bottom-left":!1,"bottom-beneath":!1},s.itemsMargin=s.props.itemsStyle&&s.props.itemsStyle.margin?parseInt(s.props.itemsStyle.margin.split(" ")[1].replace("px","")):parseInt(s.defaultItemsStyle.margin.split(" ")[1].replace("px","")),s.slideType=s.props.slideItems?"prop":s.props.slideCpnts?"cpnt":null,s.slideCnt="prop"===s.slideType?s.props.slideItems.length:"cpnt"===s.slideType?s.props.slideCpnts.length:0,s.slideEls="prop"===s.slideType?s.props.slideItems:"cpnt"===s.slideType?s.props.slideCpnts:null,s.touchEvent={touchMovement:0,touchStartX:0,beingTouched:!1},s.imgLoaded=s.imgLoaded.bind(s),s.nonImgLoaded=s.nonImgLoaded.bind(s),s.slideItemHandler=s.slideItemHandler.bind(s),s.initialSlideCon=s.initialSlideCon.bind(s),s.calMovement=s.calMovement.bind(s),s.autoSliding=s.autoSliding.bind(s),s.handleTouchStart=s.handleTouchStart.bind(s),s.handleTouchMove=s.handleTouchMove.bind(s),s.handleTouchEnd=s.handleTouchEnd.bind(s),s.handleButtonClick=s.handleButtonClick.bind(s),s.handleDragStart=s.handleDragStart.bind(s),s.handleDragStop=s.handleDragStop.bind(s),s.handleDragOver=s.handleDragOver.bind(s),s.setSliderBoxStyles=s.setSliderBoxStyles.bind(s),s.setItemsStyle=s.setItemsStyle.bind(s),s.setSlideConHeight=s.setSlideConHeight.bind(s),s.detectButtonPosition=s.detectButtonPosition.bind(s),s.allocateButtonSet=s.allocateButtonSet.bind(s),s.setLeftButtonStyle=s.setLeftButtonStyle.bind(s),s.setHoverEvent=s.setHoverEvent.bind(s),s.calculateSlidesOrder(),s}return function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}(e,t),e.prototype.componentDidMount=function(){this.dragEvent.threshold=this.refs.sliderBox.offsetWidth>100?this.refs.sliderBox.offsetWidth/5:50},e.prototype.componentWillUnmount=function(){clearInterval(this.autoSlidingTimer)},e.prototype.handleMannerSetting=function(){return this.props.manner?Object.assign({},this.mannerSetting,this.props.manner):this.mannerSetting},e.prototype.handleBubbling=function(t){t.stopPropagation()},e.prototype.calculateSlidesOrder=function(){for(var t=[],e=[],n=[],i=-1*this.slideCnt;i<=2*this.slideCnt;i++)0!==i&&t.push(i);this.slidingManner.slideOrders[0]=t;for(var s=0;s<t.length;s++)s<2*this.slideCnt?n.push(t[s]):e.push(t[s]);this.slidingManner.slideOrders[1]=e.concat(n),e=[],n=[];for(var r=0;r<t.length;r++)r<this.slideCnt?n.push(t[r]):e.push(t[r]);this.slidingManner.slideOrders[2]=e.concat(n)},e.prototype.mobileDetect=function(){return!!/Mobi|Tablet|iPad|iPhone/.test(navigator.userAgent)},e.prototype.nonImgLoaded=function(t){var e="ref"+t;if(this.refs[e]){var n=this.setItemsStyle(),i=this.refs[e];for(var s in n)i.style[s]=n[s];this.loadedCnt+=1,this.imgsWidth[t]=i.offsetWidth,(!this.mannerSetting.circular&&1===t||this.mannerSetting.circular&&1===this.slideCnt)&&this.initialSlideCon(),this.mannerSetting.circular&&this.loadedCnt===3*this.slideCnt&&this.initialSlideCon()}},e.prototype.imgLoaded=function(t){var e="ref"+t;if(this.refs[e]){var n=0,i=0,s=0,r=this.setItemsStyle(),o=this.refs[e];for(var a in o.offsetWidth>=this.refs.sliderBox.offsetWidth&&(n=o.offsetHeight/o.offsetWidth,s=(i=this.refs.sliderBox.offsetWidth-2*this.itemsMargin)*n,r.height=s+"px",r.width=i+"px"),r)o.style[a]=r[a];this.loadedCnt+=1,this.imgsWidth[t]=o.offsetWidth,(!this.mannerSetting.circular&&1===t||this.mannerSetting.circular&&1===this.slideCnt)&&this.initialSlideCon(),this.mannerSetting.circular&&this.loadedCnt===3*this.slideCnt&&this.initialSlideCon()}},e.prototype.slideItemHandler=function(t,e){var n=this;switch(this.slideType){case"prop":var i=(t.imgSrc,s.a.createElement("img",{src:t.imgSrc})),r=t.des?s.a.createElement("p",{style:this.setTextBoxStyle()},t.des):null;return s.a.createElement("div",{className:"itemWrapper",style:{order:e},onError:function(){return n.nonImgLoaded(e)},onLoad:function(){return n.imgLoaded(e)},onClick:this.handleBubbling,ref:"ref"+e,key:"ref"+e},i,r);case"cpnt":return s.a.createElement("div",{className:"itemWrapper",style:{order:e},onError:function(){return n.nonImgLoaded(e)},onLoad:function(){return n.imgLoaded(e)},onClick:this.handleBubbling,ref:"ref"+e,key:"ref"+e},t)}},e.prototype.initialSlideCon=function(){var t=this,e=this.refs.slideCon;if(e.addEventListener("transitionend",function(){t.slidingManner.sliding=!1}),this.mannerSetting.circular&&1!==this.slideCnt){for(var n=0,i=1;i<this.slideCnt+1;i++)n+=parseInt(this.imgsWidth[i]);this.slidingManner.slidesTotalWidth=n+this.slideCnt*this.itemsMargin*2,this.slidingManner.initialMovement=this.slidingManner.slidesTotalWidth-(this.refs.sliderBox.offsetWidth-(this.imgsWidth[1]+2*this.itemsMargin))/2}else this.refs.sflag.style.flexBasis=this.refs.sliderBox.offsetWidth+"px",this.refs.eflag.style.flexBasis=this.refs.sliderBox.offsetWidth+"px",e.style.transition="transform "+this.mannerSetting.duration+" ease",this.slidingManner.initialMovement=(this.refs.sliderBox.offsetWidth-this.imgsWidth[1])/2+this.itemsMargin+this.imgsWidth[1];e.style.transform="translateX(-"+this.slidingManner.initialMovement+"px)",this.slidingManner.movement=this.slidingManner.movement+this.slidingManner.initialMovement,this.autoSliding()},e.prototype.autoSliding=function(){var t=this;if(this.mannerSetting.autoSliding&&1!==this.slideCnt){var e=this.mannerSetting.autoSliding.interval.slice(0,-1),n=1e3*parseInt(e);this.mannerSetting.circular?this.autoSlidingTimer=setInterval(function(){t.slidingManner.sliding||t.moveSlide(t.slidingManner.direction)},n):this.autoSlidingTimer=setInterval(function(){t.slidingManner.currentSlide===t.slideCnt?t.slidingManner.sliding||(t.slidingManner.direction=-1,t.moveSlide(t.slidingManner.direction)):1===t.slidingManner.currentSlide?t.slidingManner.sliding||(t.slidingManner.direction=1,t.moveSlide(t.slidingManner.direction)):t.slidingManner.sliding||t.moveSlide(t.slidingManner.direction)},n)}},e.prototype.itemsReorder=function(){for(var t=0;t<3*this.slideCnt;t++)t<this.slideCnt?this.refs["ref"+(t-this.slideCnt)].style.order=this.slidingManner.slideOrders[this.slidingManner.cycle][t]:this.refs["ref"+(t-this.slideCnt+1)].style.order=this.slidingManner.slideOrders[this.slidingManner.cycle][t]},e.prototype.movementReset=function(t){var e=this,n=setInterval(function(){if(!e.slidingManner.sliding){var i=e.refs.slideCon;i.style.transition="none",t>0?(i.style.transform="translateX(-"+e.slidingManner.initialMovement+"px)",e.slidingManner.movement=e.slidingManner.initialMovement):t<0&&(i.style.transform="translateX(-"+(e.slidingManner.movement+e.slidingManner.slidesTotalWidth)+"px)",e.slidingManner.movement=e.slidingManner.movement+e.slidingManner.slidesTotalWidth),clearInterval(n)}},25)},e.prototype.moveSlide=function(t){var e=this.mannerSetting.circular?3*this.slideCnt:this.slideCnt;if(this.loadedCnt===e){var n=0,i=this.refs.slideCon;if(this.mannerSetting.circular)this.slidingManner.sliding=!0,i.style.transition="transform "+this.mannerSetting.duration+" ease",1===t?(n=this.calMovement(t),this.slidingManner.movement=this.slidingManner.movement+n,i.style.transform="translateX(-"+this.slidingManner.movement+"px)",this.slidingManner.currentSlide=this.slidingManner.currentSlide+1,this.slidingManner.currentSlide===this.slideCnt+1&&(this.slidingManner.currentSlide=1,this.slidingManner.cycle=2===this.slidingManner.cycle?0:this.slidingManner.cycle+1,this.itemsReorder(),this.movementReset(t))):-1===t&&(n=this.calMovement(t),this.slidingManner.movement=this.slidingManner.movement-n,i.style.transform="translateX(-"+this.slidingManner.movement+"px)",this.slidingManner.currentSlide=1===this.slidingManner.currentSlide?-1:this.slidingManner.currentSlide-1,-1===this.slidingManner.currentSlide&&(this.slidingManner.currentSlide=this.slideCnt,this.slidingManner.cycle=0===this.slidingManner.cycle?2:this.slidingManner.cycle-1,this.itemsReorder(),this.movementReset(t)));else if(i.style.transition="transform "+this.mannerSetting.duration+" ease",1===t&&this.slidingManner.currentSlide<this.slideCnt)this.slidingManner.sliding=!0,n=this.calMovement(t),this.slidingManner.currentSlide=this.slidingManner.currentSlide+1,this.slidingManner.movement=this.slidingManner.movement+n,i.style.transform="translateX(-"+this.slidingManner.movement+"px)";else{if(!(-1===t&&this.slidingManner.currentSlide>1))return!1;this.slidingManner.sliding=!0,n=this.calMovement(t),this.slidingManner.currentSlide=this.slidingManner.currentSlide-1,this.slidingManner.movement=this.slidingManner.movement-n,i.style.transform="translateX(-"+this.slidingManner.movement+"px)"}}},e.prototype.calMovement=function(t){var e=1===t?1:1===this.slidingManner.currentSlide?-2:-1;return this.imgsWidth[this.slidingManner.currentSlide]/2+2*this.itemsMargin+this.imgsWidth[this.slidingManner.currentSlide+e]/2},e.prototype.handleTouchStart=function(t){!1===this.slidingManner.sliding&&(this.slidingManner.sliding=!0,this.touchEvent.touchStartX=t.targetTouches[0].clientX,this.touchEvent.beingTouched=!0)},e.prototype.handleTouchMove=function(t){if(this.touchEvent.beingTouched){this.slidingManner.sliding=!0,this.touchEvent.touchMovement=this.touchEvent.touchStartX-t.targetTouches[0].clientX;var e=this.slidingManner.movement+this.touchEvent.touchMovement;t.currentTarget.style.transform="translateX(-"+e+"px)"}},e.prototype.handleTouchEnd=function(t){if(this.touchEvent.beingTouched&&Math.abs(this.touchEvent.touchStartX-t.changedTouches[0].clientX)>20){if(this.slidingManner.sliding=!1,!this.slidingManner.sliding)if(Math.abs(this.touchEvent.touchMovement)>this.dragEvent.threshold){var e=this.touchEvent.touchMovement>0?1:-1;!1===this.moveSlide(e)&&(t.currentTarget.style.transition="transform 0.5s ease",t.currentTarget.style.transform="translateX(-"+this.slidingManner.movement+"px)")}else t.currentTarget.style.transition="transform 0.5s ease",t.currentTarget.style.transform="translateX(-"+this.slidingManner.movement+"px)";this.touchEvent.touchStartX=0,this.touchEvent.beingTouched=!1}},e.prototype.handleButtonClick=function(t){this.slidingManner.sliding||this.moveSlide(t)},e.prototype.handleDragStart=function(t){!1===this.slidingManner.sliding&&!1===this.dragEvent.dragging&&(this.slidingManner.sliding=!0,this.dragEvent.dragging=!0,t.currentTarget.style.transition="none",this.dragEvent.startPoint=t.clientX,t.dataTransfer.setDragImage(this.dragEvent.disableDragImage,1,1))},e.prototype.handleDragOver=function(t){if(t.dataTransfer.dropEffect="none",t.dataTransfer.effectAllowed="none",t.preventDefault(),!0===this.dragEvent.dragging){this.dragEvent.deltaX=this.dragEvent.startPoint-t.clientX;var e=this.slidingManner.movement+this.dragEvent.deltaX;t.currentTarget.style.transform="translateX(-"+e+"px)"}},e.prototype.handleDragStop=function(t){if(!0===this.dragEvent.dragging){if(Math.abs(this.dragEvent.deltaX)>this.dragEvent.threshold){if(this.slidingManner.sliding=!1,!this.slidingManner.sliding){var e=this.dragEvent.deltaX>0?1:-1;!1===this.moveSlide(e)&&(t.currentTarget.style.transition="transform 0.5s ease",t.currentTarget.style.transform="translateX(-"+this.slidingManner.movement+"px)")}}else t.currentTarget.style.transition="transform 0.5s ease",t.currentTarget.style.transform="translateX(-"+this.slidingManner.movement+"px)";this.dragEvent.startPoint=0,this.dragEvent.deltaX=0,this.dragEvent.dragging=!1}},e.prototype.setTextBoxStyle=function(){if(this.props.textBoxStyle)return this.props.textBoxStyle},e.prototype.setItemsStyle=function(){if(this.props.itemsStyle){var t=JSON.parse(JSON.stringify(this.props.itemsStyle));return delete t.height,Object.assign({},this.defaultItemsStyle,t)}return JSON.parse(JSON.stringify(this.defaultItemsStyle))},e.prototype.setSlideConHeight=function(){return this.props.itemsStyle&&this.props.itemsStyle.height?{height:this.props.itemsStyle.height}:{height:this.defaultSlideConStyle.height}},e.prototype.detectButtonPosition=function(){var t=[],e=this.defaultBtnPosition;for(var n in this.props.buttonSetting&&this.props.buttonSetting.placeOn&&!1===e[this.props.buttonSetting.placeOn]&&(e[this.props.buttonSetting.placeOn]=!0),e)!0===e[n]&&(t=n.split("-"));var i=void 0;return i="left"!==t[1]&&"right"!==t[1]&&"inside"!==t[1],"middle"===t[0]?{separate:!0,outOfBox:i,vertical:t[0],horizontal:t[1]}:{separate:!1,outOfBox:i,vertical:t[0],horizontal:t[1]}},e.prototype.setRightButtonStyle=function(){var t=void 0;return t=this.defaultButtonIconStyle,this.props.buttonSetting&&this.props.buttonSetting.style&&this.props.buttonSetting.style.right&&(t=Object.assign({},this.defaultButtonIconStyle,this.props.buttonSetting.style.right)),t},e.prototype.setLeftButtonStyle=function(){var t=void 0;return t=this.defaultButtonIconStyle,this.props.buttonSetting&&this.props.buttonSetting.style&&this.props.buttonSetting.style.left&&(t=Object.assign({},this.defaultButtonIconStyle,this.props.buttonSetting.style.left)),t},e.prototype.allocateButtonSet=function(t){var e={};if(e=Object.assign({},this.defaultButtonSetStyle),!t.separate){switch(t.horizontal){case"beneath":break;case"left":e.position="absolute",e.left="0px";break;case"right":e.position="absolute",e.right="0px"}switch(t.vertical){case"top":e.position="absolute",e.top="0px";break;case"bottom":"beneath"!==t.horizontal&&(e.position="absolute",e.bottom="0px")}}return e},e.prototype.setSliderBoxStyles=function(){return this.props.sliderBoxStyle?Object.assign({},this.defaultSliderBoxStyle,this.props.sliderBoxStyle):this.defaultSliderBoxStyle},e.prototype.setHoverEvent=function(){if(this.props.buttonSetting&&(this.props.buttonSetting.hoverEvent?this.props.buttonSetting.hoverEvent:this.buttonManner.hoverEvent))return{opacity:0}},e.prototype.render=function(){var t=this,e=void 0,n=void 0,i=void 0,r=void 0,o=void 0,a=void 0,l=void 0,d=void 0,h=void 0,c=void 0,u=void 0;return this.slideCnt&&(this.mannerSetting.button&&(u=this.detectButtonPosition(),h=this.props.lBtnCpnt?this.props.lBtnCpnt:s.a.createElement("div",{className:"arrowBtn previous",style:this.setLeftButtonStyle()}),c=this.props.rBtnCpnt?this.props.rBtnCpnt:s.a.createElement("div",{className:"arrowBtn next",style:this.setRightButtonStyle()}),u.separate?(l=s.a.createElement("div",{className:"buttonWrapper left",style:this.setHoverEvent(),onClick:function(){return t.handleButtonClick(-1)}},h),d=s.a.createElement("div",{className:"buttonWrapper right",style:this.setHoverEvent(),onClick:function(){return t.handleButtonClick(1)}},c)):a=s.a.createElement("div",{className:"buttonSet",style:this.allocateButtonSet(u)},s.a.createElement("div",{className:"buttonWrapper",style:this.setHoverEvent(),onClick:function(){return t.handleButtonClick(-1)}},h),s.a.createElement("div",{className:"buttonWrapper",style:this.setHoverEvent(),onClick:function(){return t.handleButtonClick(1)}},c))),this.mannerSetting.circular&&this.slideCnt>1?n=(n=(n=this.slideEls.map(function(e,n){return t.slideItemHandler(e,n-t.slideCnt)})).concat(this.slideEls.map(function(e,n){return t.slideItemHandler(e,n+1)}))).concat(this.slideEls.map(function(e,n){return t.slideItemHandler(e,n+1+t.slideCnt)})):(this.mannerSetting.flag?(i=s.a.createElement("div",{className:"flag",ref:"sflag",style:{order:0},key:"sflag"}),r=s.a.createElement("div",{className:"flag",ref:"eflag",style:{order:this.slideCnt+1},key:"eflag"})):(i=s.a.createElement("div",{className:"flag",ref:"sflag",style:{background:"transparent",order:0},key:"sflag"}),r=s.a.createElement("div",{className:"flag",ref:"eflag",style:{background:"transparent",order:this.slideCnt+1},key:"eflag"})),(n=this.slideEls.map(function(e,n){return t.slideItemHandler(e,n+1)})).unshift(i),n.push(r)),o=this.mobileDetect()?s.a.createElement("div",{className:"slideCon",ref:"slideCon",style:this.setSlideConHeight(),onTouchStart:function(e){return t.handleTouchStart(e)},onTouchMove:function(e){return t.handleTouchMove(e)},onTouchEnd:function(e){return t.handleTouchEnd(e)}},n):s.a.createElement("div",{className:"slideCon",ref:"slideCon",onDragStart:function(e){return t.handleDragStart(e)},onDragEnd:function(e){return t.handleDragStop(e)},onDragOver:function(e){return t.handleDragOver(e)},style:this.setSlideConHeight()},n),e=this.mannerSetting.button?u.separate?u.outOfBox?s.a.createElement("div",{className:"sliderSet"},l,s.a.createElement("div",{className:"sliderBox",ref:"sliderBox",style:this.setSliderBoxStyles()},o),d):s.a.createElement("div",{className:"sliderBox",ref:"sliderBox",style:this.setSliderBoxStyles()},l,o,d):u.outOfBox?s.a.createElement("div",null,s.a.createElement("div",{className:"sliderBox",ref:"sliderBox",style:this.setSliderBoxStyles()},o),a):s.a.createElement("div",{className:"sliderBox",ref:"sliderBox",style:this.setSliderBoxStyles()},a,o):s.a.createElement("div",{className:"sliderSet"},s.a.createElement("div",{className:"sliderBox",ref:"sliderBox",style:this.setSliderBoxStyles()},o))),e},e}(i.Component);e.default=o},function(e,n){e.exports=t},function(t,e){}]).default});
!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("react")):"function"==typeof define&&define.amd?define(["react"],e):"object"==typeof exports?exports.ReactCarouselSlider=e(require("react")):t.ReactCarouselSlider=e(t.React)}("undefined"!=typeof self?self:this,function(t){return function(t){var e={};function i(n){if(e[n])return e[n].exports;var s=e[n]={i:n,l:!1,exports:{}};return t[n].call(s.exports,s,s.exports,i),s.l=!0,s.exports}return i.m=t,i.c=e,i.d=function(t,e,n){i.o(t,e)||Object.defineProperty(t,e,{configurable:!1,enumerable:!0,get:n})},i.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return i.d(e,"a",e),e},i.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},i.p="",i(i.s=0)}([function(t,e,i){t.exports=i(1)},function(t,e,i){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var n=i(2),s=i.n(n),r=i(3);i.n(r);var o=function(t){function e(i){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,e);var n,s=function(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}(this,t.call(this,i));return s.state={currentSlide:1},s.slidingManner={slidesTotalWidth:0,initialMovement:0,movement:0,direction:1,cycle:0,sliding:!1,slideOrders:[[],[],[]]},s.dragEvent={startPoint:0,dragging:!1,deltaX:0,thrershold:0,disableDragImage:(n=new Image,n.src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7",n)},s.calculateSlidesOrder=s.calculateSlidesOrder.bind(s),s.itemsReorder=s.itemsReorder.bind(s),s.movementReset=s.movementReset.bind(s),s.loadedCnt=0,s.imgsWidth={},s.mannerSetting={autoSliding:!1,circular:!0,duration:"0.5s"},s.mannerSetting=s.handleMannerSetting(),s.accEleSetting={flag:!1,button:!0,dots:!0},s.accEleSetting=s.handleAccEleSetting(),s.defaultDotStyle={display:"inline-block",verticalAlign:"middle",margin:"0 5px",background:"#dbdbdb",height:"10px",width:"10px",borderRadius:"50%"},s.defaultCurrDotStyle={display:"inline-block",verticalAlign:"middle",margin:"0 5px",background:"#3897f0",height:"12px",width:"12px",borderRadius:"50%"},s.defaultSliderBoxStyle={height:"400px",width:"90%",background:"#EEEEEE",border:"none"},s.defaultSlideConStyle={height:"80%"},s.defaultItemsStyle={padding:"3px",background:"#FAFAFA",margin:"0px 40px"},s.buttonManner={hoverEvent:!1},s.defaultButtonSetStyle={},s.defaultDotsSetStyle={margin:"15px auto"},s.defaultButtonIconStyle={color:"white",background:"#757575",height:"30px",width:"30px",margin:"10px",fontSize:"20px",borderRadius:"2px",border:"none"},s.defaultBtnPosition={"top-left":!0,"top-right":!1,"middle-inside":!1,"middle-outside":!1,"bottom-right":!1,"bottom-left":!1,"bottom-beneath":!1},s.defaultDotsPosition={beneath:!0,top:!1,bottom:!1},s.itemsMargin=s.props.itemsStyle&&s.props.itemsStyle.margin?parseInt(s.props.itemsStyle.margin.split(" ")[1].replace("px","")):parseInt(s.defaultItemsStyle.margin.split(" ")[1].replace("px","")),s.slideType=s.props.slideItems?"prop":s.props.slideCpnts?"cpnt":null,s.slideCnt="prop"===s.slideType?s.props.slideItems.length:"cpnt"===s.slideType?s.props.slideCpnts.length:0,s.slideEls="prop"===s.slideType?s.props.slideItems:"cpnt"===s.slideType?s.props.slideCpnts:null,s.touchEvent={touchMovement:0,touchStartX:0,beingTouched:!1},s.imgLoaded=s.imgLoaded.bind(s),s.nonImgLoaded=s.nonImgLoaded.bind(s),s.slideItemHandler=s.slideItemHandler.bind(s),s.initialSlideCon=s.initialSlideCon.bind(s),s.calMovement=s.calMovement.bind(s),s.autoSliding=s.autoSliding.bind(s),s.handleMannerSetting=s.handleMannerSetting.bind(s),s.handleAccEleSetting=s.handleAccEleSetting.bind(s),s.handleTouchStart=s.handleTouchStart.bind(s),s.handleTouchMove=s.handleTouchMove.bind(s),s.handleTouchEnd=s.handleTouchEnd.bind(s),s.handleButtonClick=s.handleButtonClick.bind(s),s.handleDragStart=s.handleDragStart.bind(s),s.handleDragStop=s.handleDragStop.bind(s),s.handleDragOver=s.handleDragOver.bind(s),s.setSliderBoxStyles=s.setSliderBoxStyles.bind(s),s.setItemsStyle=s.setItemsStyle.bind(s),s.setSlideConHeight=s.setSlideConHeight.bind(s),s.setDotStyle=s.setDotStyle.bind(s),s.setCurrentDotStyle=s.setCurrentDotStyle.bind(s),s.detectButtonPosition=s.detectButtonPosition.bind(s),s.detectDotsPosition=s.detectDotsPosition.bind(s),s.allocateDotsSet=s.allocateDotsSet.bind(s),s.allocateButtonSet=s.allocateButtonSet.bind(s),s.setLeftButtonStyle=s.setLeftButtonStyle.bind(s),s.setHoverEvent=s.setHoverEvent.bind(s),s.calculateSlidesOrder(),s}return function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}(e,t),e.prototype.componentDidMount=function(){this.dragEvent.threshold=this.refs.sliderBox.offsetWidth>100?this.refs.sliderBox.offsetWidth/5:50},e.prototype.componentWillUnmount=function(){clearInterval(this.autoSlidingTimer)},e.prototype.handleMannerSetting=function(){return this.props.manner?Object.assign({},this.mannerSetting,this.props.manner):this.mannerSetting},e.prototype.handleAccEleSetting=function(){return this.props.accEle?Object.assign({},this.accEleSetting,this.props.accEle):this.accEleSetting},e.prototype.handleBubbling=function(t){t.stopPropagation()},e.prototype.calculateSlidesOrder=function(){for(var t=[],e=[],i=[],n=-1*this.slideCnt;n<=2*this.slideCnt;n++)0!==n&&t.push(n);this.slidingManner.slideOrders[0]=t;for(var s=0;s<t.length;s++)s<2*this.slideCnt?i.push(t[s]):e.push(t[s]);this.slidingManner.slideOrders[1]=e.concat(i),e=[],i=[];for(var r=0;r<t.length;r++)r<this.slideCnt?i.push(t[r]):e.push(t[r]);this.slidingManner.slideOrders[2]=e.concat(i)},e.prototype.mobileDetect=function(){return!!/Mobi|Tablet|iPad|iPhone/.test(navigator.userAgent)},e.prototype.nonImgLoaded=function(t){var e="ref"+t;if(this.refs[e]){var i=this.setItemsStyle(),n=this.refs[e];for(var s in i)n.style[s]=i[s];this.loadedCnt+=1,this.imgsWidth[t]=n.offsetWidth,(!this.mannerSetting.circular&&1===t||this.mannerSetting.circular&&1===this.slideCnt)&&this.initialSlideCon(),this.mannerSetting.circular&&this.loadedCnt===3*this.slideCnt&&this.initialSlideCon()}},e.prototype.imgLoaded=function(t){var e="ref"+t;if(this.refs[e]){var i=0,n=0,s=0,r=this.setItemsStyle(),o=this.refs[e];for(var l in o.offsetWidth>=this.refs.sliderBox.offsetWidth&&(i=o.offsetHeight/o.offsetWidth,s=(n=this.refs.sliderBox.offsetWidth-2*this.itemsMargin)*i,r.height=s+"px",r.width=n+"px"),r)o.style[l]=r[l];this.loadedCnt+=1,this.imgsWidth[t]=o.offsetWidth,(!this.mannerSetting.circular&&1===t||this.mannerSetting.circular&&1===this.slideCnt)&&this.initialSlideCon(),this.mannerSetting.circular&&this.loadedCnt===3*this.slideCnt&&this.initialSlideCon()}},e.prototype.slideItemHandler=function(t,e){var i=this;switch(this.slideType){case"prop":var n=(t.imgSrc,s.a.createElement("img",{src:t.imgSrc})),r=t.des?s.a.createElement("p",{style:this.setTextBoxStyle()},t.des):null;return s.a.createElement("div",{className:"itemWrapper",style:{order:e},onError:function(){return i.nonImgLoaded(e)},onLoad:function(){return i.imgLoaded(e)},onClick:this.handleBubbling,ref:"ref"+e,key:"ref"+e},n,r);case"cpnt":return s.a.createElement("div",{className:"itemWrapper",style:{order:e},onError:function(){return i.nonImgLoaded(e)},onLoad:function(){return i.imgLoaded(e)},onClick:this.handleBubbling,ref:"ref"+e,key:"ref"+e},t)}},e.prototype.initialSlideCon=function(){var t=this,e=this.refs.slideCon;if(e.addEventListener("transitionend",function(){t.slidingManner.sliding=!1}),this.mannerSetting.circular&&1!==this.slideCnt){for(var i=0,n=1;n<this.slideCnt+1;n++)i+=parseInt(this.imgsWidth[n]);this.slidingManner.slidesTotalWidth=i+this.slideCnt*this.itemsMargin*2,this.slidingManner.initialMovement=this.slidingManner.slidesTotalWidth-(this.refs.sliderBox.offsetWidth-(this.imgsWidth[1]+2*this.itemsMargin))/2}else this.refs.sflag.style.flexBasis=this.refs.sliderBox.offsetWidth+"px",this.refs.eflag.style.flexBasis=this.refs.sliderBox.offsetWidth+"px",e.style.transition="transform "+this.mannerSetting.duration+" ease",this.slidingManner.initialMovement=(this.refs.sliderBox.offsetWidth-this.imgsWidth[1])/2+this.itemsMargin+this.imgsWidth[1];e.style.transform="translateX(-"+this.slidingManner.initialMovement+"px)",this.slidingManner.movement=this.slidingManner.movement+this.slidingManner.initialMovement,this.autoSliding()},e.prototype.autoSliding=function(){var t=this;if(this.mannerSetting.autoSliding&&1!==this.slideCnt){var e=this.mannerSetting.autoSliding.interval.slice(0,-1),i=1e3*parseInt(e);this.mannerSetting.circular?this.autoSlidingTimer=setInterval(function(){t.slidingManner.sliding||t.moveSlide(t.slidingManner.direction)},i):this.autoSlidingTimer=setInterval(function(){t.state.currentSlide===t.slideCnt?t.slidingManner.sliding||(t.slidingManner.direction=-1,t.moveSlide(t.slidingManner.direction)):1===t.state.currentSlide?t.slidingManner.sliding||(t.slidingManner.direction=1,t.moveSlide(t.slidingManner.direction)):t.slidingManner.sliding||t.moveSlide(t.slidingManner.direction)},i)}},e.prototype.itemsReorder=function(){for(var t=0;t<3*this.slideCnt;t++)t<this.slideCnt?this.refs["ref"+(t-this.slideCnt)].style.order=this.slidingManner.slideOrders[this.slidingManner.cycle][t]:this.refs["ref"+(t-this.slideCnt+1)].style.order=this.slidingManner.slideOrders[this.slidingManner.cycle][t]},e.prototype.movementReset=function(t){var e=this,i=setInterval(function(){if(!e.slidingManner.sliding){var n=e.refs.slideCon;n.style.transition="none",t>0?(n.style.transform="translateX(-"+e.slidingManner.initialMovement+"px)",e.slidingManner.movement=e.slidingManner.initialMovement):t<0&&(n.style.transform="translateX(-"+(e.slidingManner.movement+e.slidingManner.slidesTotalWidth)+"px)",e.slidingManner.movement=e.slidingManner.movement+e.slidingManner.slidesTotalWidth),clearInterval(i)}},25)},e.prototype.moveSlide=function(t){var e=this,i=this.mannerSetting.circular?3*this.slideCnt:this.slideCnt;if(this.loadedCnt===i){var n=0,s=this.refs.slideCon;if(this.mannerSetting.circular)this.slidingManner.sliding=!0,s.style.transition="transform "+this.mannerSetting.duration+" ease",1===t?(n=this.calMovement(t),this.slidingManner.movement=this.slidingManner.movement+n,this.state.currentSlide===this.slideCnt?this.setState(function(t){return{currentSlide:1}},function(){s.style.transform="translateX(-"+e.slidingManner.movement+"px)",e.slidingManner.cycle=2===e.slidingManner.cycle?0:e.slidingManner.cycle+1,e.itemsReorder(),e.movementReset(t)}):this.setState(function(t){return{currentSlide:t.currentSlide+1}},function(){s.style.transform="translateX(-"+e.slidingManner.movement+"px)"})):-1===t&&(n=this.calMovement(t),this.slidingManner.movement=this.slidingManner.movement-n,1===this.state.currentSlide?this.setState(function(t){return{currentSlide:e.slideCnt}},function(){s.style.transform="translateX(-"+e.slidingManner.movement+"px)",e.slidingManner.cycle=0===e.slidingManner.cycle?2:e.slidingManner.cycle-1,e.itemsReorder(),e.movementReset(t)}):this.setState(function(t){return{currentSlide:t.currentSlide-1}},function(){s.style.transform="translateX(-"+e.slidingManner.movement+"px)"}));else if(s.style.transition="transform "+this.mannerSetting.duration+" ease",1===t&&this.state.currentSlide<this.slideCnt)this.slidingManner.sliding=!0,n=this.calMovement(t),this.slidingManner.movement=this.slidingManner.movement+n,this.setState(function(t){return{currentSlide:t.currentSlide+1}},function(){s.style.transform="translateX(-"+e.slidingManner.movement+"px)"});else{if(!(-1===t&&this.state.currentSlide>1))return!1;this.slidingManner.sliding=!0,n=this.calMovement(t),this.slidingManner.movement=this.slidingManner.movement-n,this.setState(function(t){return{currentSlide:t.currentSlide-1}},function(){s.style.transform="translateX(-"+e.slidingManner.movement+"px)"})}}},e.prototype.calMovement=function(t){var e=1===t?1:1===this.state.currentSlide?-2:-1;return this.imgsWidth[this.state.currentSlide]/2+2*this.itemsMargin+this.imgsWidth[this.state.currentSlide+e]/2},e.prototype.handleTouchStart=function(t){!1===this.slidingManner.sliding&&(this.slidingManner.sliding=!0,this.touchEvent.touchStartX=t.targetTouches[0].clientX,this.touchEvent.beingTouched=!0)},e.prototype.handleTouchMove=function(t){if(this.touchEvent.beingTouched){this.slidingManner.sliding=!0,this.touchEvent.touchMovement=this.touchEvent.touchStartX-t.targetTouches[0].clientX;var e=this.slidingManner.movement+this.touchEvent.touchMovement;t.currentTarget.style.transform="translateX(-"+e+"px)"}},e.prototype.handleTouchEnd=function(t){if(this.touchEvent.beingTouched&&Math.abs(this.touchEvent.touchStartX-t.changedTouches[0].clientX)>20){if(this.slidingManner.sliding=!1,!this.slidingManner.sliding)if(Math.abs(this.touchEvent.touchMovement)>this.dragEvent.threshold){var e=this.touchEvent.touchMovement>0?1:-1;!1===this.moveSlide(e)&&(t.currentTarget.style.transition="transform 0.5s ease",t.currentTarget.style.transform="translateX(-"+this.slidingManner.movement+"px)")}else t.currentTarget.style.transition="transform 0.5s ease",t.currentTarget.style.transform="translateX(-"+this.slidingManner.movement+"px)";this.touchEvent.touchStartX=0,this.touchEvent.beingTouched=!1}},e.prototype.handleButtonClick=function(t){this.slidingManner.sliding||this.moveSlide(t)},e.prototype.handleDragStart=function(t){!1===this.slidingManner.sliding&&!1===this.dragEvent.dragging&&(this.slidingManner.sliding=!0,this.dragEvent.dragging=!0,t.currentTarget.style.transition="none",this.dragEvent.startPoint=t.clientX,t.dataTransfer.setDragImage(this.dragEvent.disableDragImage,1,1))},e.prototype.handleDragOver=function(t){if(t.dataTransfer.dropEffect="none",t.dataTransfer.effectAllowed="none",t.preventDefault(),!0===this.dragEvent.dragging){this.dragEvent.deltaX=this.dragEvent.startPoint-t.clientX;var e=this.slidingManner.movement+this.dragEvent.deltaX;t.currentTarget.style.transform="translateX(-"+e+"px)"}},e.prototype.handleDragStop=function(t){if(!0===this.dragEvent.dragging){if(Math.abs(this.dragEvent.deltaX)>this.dragEvent.threshold){if(this.slidingManner.sliding=!1,!this.slidingManner.sliding){var e=this.dragEvent.deltaX>0?1:-1;!1===this.moveSlide(e)&&(t.currentTarget.style.transition="transform 0.5s ease",t.currentTarget.style.transform="translateX(-"+this.slidingManner.movement+"px)")}}else t.currentTarget.style.transition="transform 0.5s ease",t.currentTarget.style.transform="translateX(-"+this.slidingManner.movement+"px)";this.dragEvent.startPoint=0,this.dragEvent.deltaX=0,this.dragEvent.dragging=!1}},e.prototype.setTextBoxStyle=function(){if(this.props.textBoxStyle)return this.props.textBoxStyle},e.prototype.setItemsStyle=function(){if(this.props.itemsStyle){var t=JSON.parse(JSON.stringify(this.props.itemsStyle));return delete t.height,Object.assign({},this.defaultItemsStyle,t)}return JSON.parse(JSON.stringify(this.defaultItemsStyle))},e.prototype.setSlideConHeight=function(){return this.props.itemsStyle&&this.props.itemsStyle.height?{height:this.props.itemsStyle.height}:{height:this.defaultSlideConStyle.height}},e.prototype.setDotStyle=function(){var t={};return this.props.dotsSetting&&this.props.dotsSetting.style?(this.props.dotsSetting.style.dotSpace&&(t.margin="0px "+this.props.dotsSetting.style.dotSpace),this.props.dotsSetting.style.dotSize&&(t.height=this.props.dotsSetting.style.dotSize,t.width=this.props.dotsSetting.style.dotSize),this.props.dotsSetting.style.dotColor&&(t.background=this.props.dotsSetting.style.dotColor),Object.assign({},this.defaultDotStyle,t)):this.defaultDotStyle},e.prototype.setCurrentDotStyle=function(){var t={};return this.props.dotsSetting&&this.props.dotsSetting.style?(this.props.dotsSetting.style.dotSpace&&(t.margin="0px "+this.props.dotsSetting.style.dotSpace),this.props.dotsSetting.style.currDotSize&&(t.height=this.props.dotsSetting.style.currDotSize,t.width=this.props.dotsSetting.style.currDotSize),this.props.dotsSetting.style.currDotColor&&(t.background=this.props.dotsSetting.style.currDotColor),Object.assign({},this.defaultCurrDotStyle,t)):this.defaultCurrDotStyle},e.prototype.detectDotsPosition=function(){var t=void 0,e=this.defaultDotsPosition;for(var i in this.props.dotsSetting&&this.props.dotsSetting.placeOn&&!1===e[this.props.dotsSetting.placeOn]&&(e[this.props.dotsSetting.placeOn]=!0),e)!0===e[i]&&(t=i);return"beneath"===t?{vertical:"beneath"}:"top"===t?{vertical:"top"}:{vertical:"bottom"}},e.prototype.allocateDotsSet=function(t){var e={};if(e=Object.assign({},this.defaultDotsSetStyle),this.props.dotsSetting&&this.props.dotsSetting.style)for(var i in this.props.dotsSetting.style)i.includes("margin")&&(e[i]=this.props.dotsSetting.style[i]);switch(t.vertical){case"top":e.position="absolute",e.right="0px",e.left="0px",e.top="0px";break;case"bottom":e.position="absolute",e.right="0px",e.left="0px",e.bottom="0px"}return e},e.prototype.detectButtonPosition=function(){var t=[],e=this.defaultBtnPosition;for(var i in this.props.buttonSetting&&this.props.buttonSetting.placeOn&&!1===e[this.props.buttonSetting.placeOn]&&(e[this.props.buttonSetting.placeOn]=!0),e)!0===e[i]&&(t=i.split("-"));var n=void 0;return n="left"!==t[1]&&"right"!==t[1]&&"inside"!==t[1],"middle"===t[0]?{separate:!0,outOfBox:n,vertical:t[0],horizontal:t[1]}:{separate:!1,outOfBox:n,vertical:t[0],horizontal:t[1]}},e.prototype.setRightButtonStyle=function(){var t=void 0;return t=this.defaultButtonIconStyle,this.props.buttonSetting&&this.props.buttonSetting.style&&this.props.buttonSetting.style.right&&(t=Object.assign({},this.defaultButtonIconStyle,this.props.buttonSetting.style.right)),t},e.prototype.setLeftButtonStyle=function(){var t=void 0;return t=this.defaultButtonIconStyle,this.props.buttonSetting&&this.props.buttonSetting.style&&this.props.buttonSetting.style.left&&(t=Object.assign({},this.defaultButtonIconStyle,this.props.buttonSetting.style.left)),t},e.prototype.allocateButtonSet=function(t){var e={};if(e=Object.assign({},this.defaultButtonSetStyle),!t.separate){switch(t.horizontal){case"beneath":break;case"left":e.position="absolute",e.left="0px";break;case"right":e.position="absolute",e.right="0px"}switch(t.vertical){case"top":e.position="absolute",e.top="0px";break;case"bottom":"beneath"!==t.horizontal&&(e.position="absolute",e.bottom="0px")}}return e},e.prototype.setSliderBoxStyles=function(){return this.props.sliderBoxStyle?Object.assign({},this.defaultSliderBoxStyle,this.props.sliderBoxStyle):this.defaultSliderBoxStyle},e.prototype.setHoverEvent=function(){if(this.props.buttonSetting&&(this.props.buttonSetting.hoverEvent?this.props.buttonSetting.hoverEvent:this.buttonManner.hoverEvent))return{opacity:0}},e.prototype.render=function(){var t=this,e=void 0,i=void 0,n=void 0,r=void 0,o=void 0,l=void 0,a=void 0,d=void 0,h=void 0,c=void 0,u=void 0,p=void 0,g=void 0;if(this.slideCnt){if(this.accEleSetting.button&&(u=this.detectButtonPosition(),h=this.props.lBtnCpnt?this.props.lBtnCpnt:s.a.createElement("div",{className:"arrowBtn previous",style:this.setLeftButtonStyle()}),c=this.props.rBtnCpnt?this.props.rBtnCpnt:s.a.createElement("div",{className:"arrowBtn next",style:this.setRightButtonStyle()}),u.separate?(a=s.a.createElement("div",{className:"buttonWrapper left",style:this.setHoverEvent(),onClick:function(){return t.handleButtonClick(-1)}},h),d=s.a.createElement("div",{className:"buttonWrapper right",style:this.setHoverEvent(),onClick:function(){return t.handleButtonClick(1)}},c)):l=s.a.createElement("div",{className:"buttonSet",style:this.allocateButtonSet(u)},s.a.createElement("div",{className:"buttonWrapper",style:this.setHoverEvent(),onClick:function(){return t.handleButtonClick(-1)}},h),s.a.createElement("div",{className:"buttonWrapper",style:this.setHoverEvent(),onClick:function(){return t.handleButtonClick(1)}},c))),this.mannerSetting.circular&&this.slideCnt>1?i=(i=(i=this.slideEls.map(function(e,i){return t.slideItemHandler(e,i-t.slideCnt)})).concat(this.slideEls.map(function(e,i){return t.slideItemHandler(e,i+1)}))).concat(this.slideEls.map(function(e,i){return t.slideItemHandler(e,i+1+t.slideCnt)})):(this.accEleSetting.flag?(n=s.a.createElement("div",{className:"flag",ref:"sflag",style:{order:0},key:"sflag"}),r=s.a.createElement("div",{className:"flag",ref:"eflag",style:{order:this.slideCnt+1},key:"eflag"})):(n=s.a.createElement("div",{className:"flag",ref:"sflag",style:{background:"transparent",order:0},key:"sflag"}),r=s.a.createElement("div",{className:"flag",ref:"eflag",style:{background:"transparent",order:this.slideCnt+1},key:"eflag"})),(i=this.slideEls.map(function(e,i){return t.slideItemHandler(e,i+1)})).unshift(n),i.push(r)),o=this.mobileDetect()?s.a.createElement("div",{className:"slideCon",ref:"slideCon",style:this.setSlideConHeight(),onTouchStart:function(e){return t.handleTouchStart(e)},onTouchMove:function(e){return t.handleTouchMove(e)},onTouchEnd:function(e){return t.handleTouchEnd(e)}},i):s.a.createElement("div",{className:"slideCon",ref:"slideCon",onDragStart:function(e){return t.handleDragStart(e)},onDragEnd:function(e){return t.handleDragStop(e)},onDragOver:function(e){return t.handleDragOver(e)},style:this.setSlideConHeight()},i),this.accEleSetting.dots){g=this.detectDotsPosition();for(var f=[],m=0;m<this.slideCnt;m++){var S=void 0;S=m+1===this.state.currentSlide?s.a.createElement("div",{style:this.setCurrentDotStyle()}):s.a.createElement("div",{style:this.setDotStyle()}),f.push(S)}p=s.a.createElement("div",{className:"dotsSet",style:this.allocateDotsSet(g)},f)}e=this.accEleSetting.button?this.accEleSetting.dots?s.a.createElement("div",{className:"sliderSet"},u.outOfBox&&u.separate?a:null,s.a.createElement("div",{className:"sliderBox",ref:"sliderBox",style:this.setSliderBoxStyles()},u.outOfBox?null:u.separate?a:l,"beneath"!==g.vertical?p:null,o,u.outOfBox?null:u.separate?d:null),"beneath"===g.vertical?p:null,u.outOfBox?u.separate?d:l:null):s.a.createElement("div",{className:"sliderSet"},u.outOfBox&&u.separate?a:null,s.a.createElement("div",{className:"sliderBox",ref:"sliderBox",style:this.setSliderBoxStyles()},u.outOfBox?null:u.separate?a:l,o,u.outOfBox?null:u.separate?d:null),u.outOfBox?u.separate?d:l:null):this.accEleSetting.dots?s.a.createElement("div",{className:"sliderSet"},s.a.createElement("div",{className:"sliderBox",ref:"sliderBox",style:this.setSliderBoxStyles()},o)):s.a.createElement("div",{className:"sliderSet"},s.a.createElement("div",{className:"sliderBox",ref:"sliderBox",style:this.setSliderBoxStyles()},"beneath"!==g.vertical?p:null,o),"beneath"===g.vertical?p:null)}return e},e}(n.Component);e.default=o},function(e,i){e.exports=t},function(t,e){}]).default});
//# sourceMappingURL=react-carousel-slider.min.js.map
es/CarouselSlider.css
lib/CarouselSlider.css
umd/main.a2ec2dd5.css
umd/main.a2ec2dd5.css.map
umd/main.css

Sorry, the diff of this file is not supported yet

umd/react-carousel-slider.min.js.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc