Skip to content
GitLab
Menu
Projects
Groups
Snippets
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
Michael Iseard
Citrus-Slider-Website
Commits
d4d18d86
Commit
d4d18d86
authored
Apr 13, 2018
by
Michael Iseard
Browse files
update citrus
parent
4912ac5d
Changes
2
Expand all
Show whitespace changes
Inline
Side-by-side
css/citrus-slider.min.css
View file @
d4d18d86
This diff is collapsed.
Click to expand it.
js/citrus-slider.min.js
View file @
d4d18d86
var
sliderObjects
=
{},
Slider
=
function
(
e
){
this
.
sliderContainer
=
e
,
this
.
slideText
=
getContent
(
e
.
children
),
this
.
num
=
e
.
children
.
length
,
this
.
imgUrls
=
getImages
(
e
),
this
.
settings
=
{
effect
:
!
0
,
effectType
:
"
zoom
"
,
animateText
:
!
0
,
showIndicators
:
!
0
,
showArrows
:
!
0
,
paused
:
!
1
,
autoPause
:
!
0
,
slideIndex
:
0
,
slideDuration
:
5
e3
,
slideTransition
:
"
pan
"
},
this
.
reset
=
function
(){
sliderInit
(
this
),
clearTimeouts
(
this
),
autoSlide
(
this
)}};
function
getSliders
(){
let
t
=
document
.
getElementsByClassName
(
"
citrus-slider
"
);
for
(
var
s
=
0
;
s
<
t
.
length
;
s
++
)
sliderObjects
[
s
]
=
new
Slider
(
t
[
s
]),
e
=
sliderObjects
[
s
],
getSettings
(
e
),
sliderInit
(
e
),
autoSlide
(
e
)}
function
getContent
(
e
){
var
t
=
{};
for
(
let
s
=
0
;
s
<
e
.
length
;
s
++
)
t
[
s
]
=
e
[
s
];
r
eturn
t
}
function
getImages
(
e
){
return
urls
=
Array
.
from
(
e
.
children
).
map
(
function
(
e
,
t
){
var
s
=
e
.
getElementsByTagName
(
"
img
"
)[
0
].
src
;
return
e
.
getElementsByTagName
(
"
img
"
)[
0
].
remove
(),
s
}),
urls
}
function
getSettings
(
e
){
if
(
e
.
sliderContainer
.
hasAttribute
(
"
data-citrus
"
)){
var
t
=
JSON
.
parse
(
e
.
sliderContainer
.
dataset
.
citrus
);
for
(
const
s
of
Object
.
keys
(
t
))
e
.
settings
[
s
]
=
t
[
s
];
e
.
sliderContainer
.
removeAttribute
(
"
data-citrus
"
),
e
.
settings
.
slideIndex
>
e
.
num
||
e
.
settings
.
slideIndex
<=
0
?
e
.
settings
.
slideIndex
=
0
:
e
.
settings
.
slideIndex
--
}}
function
sliderInit
(
e
){
e
.
sliderContainer
.
setAttribute
(
"
class
"
,
"
citrus-slider
"
),
e
.
sliderContainer
.
classList
.
add
(
"
transition-
"
+
e
.
settings
.
slideTransition
),
e
.
settings
.
effect
&&
e
.
sliderContainer
.
classList
.
add
(
"
effect-
"
+
e
.
settings
.
effectType
),
e
.
settings
.
animateText
&&
e
.
sliderContainer
.
classList
.
add
(
"
animate-text
"
),
sliderConstruct
(
e
)}
function
sliderConstruct
(
e
){
var
t
=
document
.
createDocumentFragment
(),
s
=
document
.
createElement
(
"
DIV
"
);
0
==
e
.
settings
.
showArrows
?
s
.
setAttribute
(
"
class
"
,
"
arrows hidden
"
):
s
.
setAttribute
(
"
class
"
,
"
arrows
"
);
var
i
=
document
.
createElement
(
"
DIV
"
);
i
.
setAttribute
(
"
class
"
,
"
slide-arrow left-arrow
"
);
var
n
=
document
.
createElement
(
"
DIV
"
);
n
.
setAttribute
(
"
class
"
,
"
slide-arrow right-arrow
"
),
s
.
appendChild
(
i
),
s
.
appendChild
(
n
),
t
.
appendChild
(
s
),
e
.
arrows
=
[
i
,
n
];
var
r
=
document
.
createElement
(
"
DIV
"
);
e
.
slides
=
r
,
r
.
classList
.
add
(
"
slides
"
),
"
pan
"
===
e
.
settings
.
slideTransition
&&
(
r
.
style
.
width
=
e
.
num
+
"
00%
"
)
,
"
pan
"
===
e
.
settings
.
slideTransition
&&
(
r
.
style
.
width
=
e
.
num
+
"
00%
"
,
r
.
style
.
transform
=
"
translateX(-
"
+
e
.
settings
.
slideIndex
/
e
.
num
*
100
+
"
%)
"
);
var
a
=
{
slide
:
null
,
slideWrap
:
null
};
for
(
let
t
=
0
;
t
<
e
.
num
;
t
++
)
a
.
slideWrap
=
document
.
createElement
(
"
DIV
"
),
t
===
e
.
settings
.
slideIndex
?
a
.
slideWrap
.
setAttribute
(
"
class
"
,
"
slide-wrap current-slide
"
):
a
.
slideWrap
.
setAttribute
(
"
class
"
,
"
slide-wrap
"
),
a
.
slide
=
document
.
createElement
(
"
DIV
"
),
a
.
slide
.
setAttribute
(
"
class
"
,
"
slide
"
),
a
.
slideText
=
e
.
slideText
[
t
],
a
.
slideText
.
setAttribute
(
"
class
"
,
"
slide-text
"
),
a
.
slide
.
style
.
backgroundImage
=
"
url(
"
+
e
.
imgUrls
[
t
]
+
"
)
"
,
a
.
slideWrap
.
appendChild
(
a
.
slide
),
a
.
slideWrap
.
appendChild
(
a
.
slideText
),
r
.
appendChild
(
a
.
slideWrap
);
t
.
appendChild
(
r
),
e
.
indicators
=
{};
var
d
=
document
.
createElement
(
"
DIV
"
);
0
==
e
.
settings
.
showIndicators
?
d
.
setAttribute
(
"
class
"
,
"
indicators hidden
"
):
d
.
setAttribute
(
"
class
"
,
"
indicators
"
);
for
(
let
s
=
0
;
s
<
e
.
num
;
s
++
){
var
l
=
document
.
createElement
(
"
SPAN
"
);
s
===
e
.
settings
.
slideIndex
?
l
.
setAttribute
(
"
class
"
,
"
slide-indicator current-indicator
"
):
l
.
setAttribute
(
"
class
"
,
"
slide-indicator
"
),
l
.
setAttribute
(
"
data-slide
"
,
s
),
d
.
appendChild
(
l
),
t
.
appendChild
(
d
),
e
.
indicators
[
s
]
=
l
}
e
.
sliderContainer
.
innerHTML
=
""
,
e
.
sliderContainer
.
appendChild
(
t
),
setBindings
(
e
)}
function
setBindings
(
e
){
for
(
var
t
=
0
;
t
<
e
.
arrows
.
length
;
t
++
)
e
.
arrows
[
t
].
addEventListener
(
"
click
"
,
function
(
t
){
if
(
e
.
settings
.
autoPause
&&
(
e
.
settings
.
paused
=!
0
),
!
e
.
sliderContainer
.
classList
.
contains
(
"
animating
"
)){
if
(
e
.
prevSlideIndex
=
e
.
settings
.
slideIndex
,
t
.
target
.
classList
.
contains
(
"
left-arrow
"
))
var
s
=
e
.
settings
.
slideIndex
-
1
;
else
if
(
t
.
target
.
classList
.
contains
(
"
right-arrow
"
))
s
=
e
.
settings
.
slideIndex
+
1
;
updateIndex
(
e
,
s
),
clearTimeouts
(
e
),
sliderChange
(
e
)}});
for
(
t
=
0
;
t
<
e
.
num
;
t
++
)
e
.
indicators
[
t
].
addEventListener
(
"
click
"
,
function
(
t
){
e
.
settings
.
autoPause
&&
(
e
.
settings
.
paused
=!
0
),
e
.
sliderContainer
.
classList
.
contains
(
"
animating
"
)
||!
1
===
t
.
target
.
classList
.
contains
(
"
current-indicator
"
)
&&
(
c
learTimeouts
(
e
),
updateIndex
(
e
,
Number
(
t
.
target
.
dataset
.
slide
)),
sliderChange
(
e
))})}
function
sliderChange
(
e
){
if
(
e
.
prev
=
e
.
sliderContainer
.
getElementsByClassName
(
"
current-slide
"
)[
0
],
e
.
settings
.
slideIndex
<
0
?(
e
.
settings
.
slideIndex
=
e
.
num
-
1
,
e
.
num
&&
e
.
indicators
[
0
].
parentElement
.
classList
.
add
(
"
transition-last
"
),
setTimeout
(
function
(){
e
.
num
&&
e
.
indicators
[
0
].
parentElement
.
classList
.
remove
(
"
transition-last
"
)},
1
e3
)):
e
.
settings
.
slideIndex
>
e
.
num
-
1
&&
(
e
.
settings
.
slideIndex
=
0
,
e
.
num
&&
e
.
indicators
[
0
].
parentElement
.
classList
.
add
(
"
transition-first
"
),
setTimeout
(
function
(){
e
.
num
&&
e
.
indicators
[
0
].
parentElement
.
classList
.
remove
(
"
transition-first
"
)},
1
e3
)),
e
.
num
>
1
){
e
.
sliderContainer
.
classList
.
remove
(
"
forwards
"
,
"
backwards
"
);
for
(
var
t
=
0
;
t
<
e
.
num
;
t
++
)
e
.
slides
.
children
[
t
].
classList
.
remove
(
"
current-slide
"
,
"
prev-slide
"
,
"
next-slide
"
),
e
.
num
&&
e
.
indicators
[
t
].
classList
.
remove
(
"
current-indicator
"
);
e
.
prevSlideIndex
<
e
.
settings
.
slideIndex
?
e
.
sliderContainer
.
classList
.
add
(
"
forwards
"
):
e
.
sliderContainer
.
classList
.
add
(
"
backwards
"
),
e
.
sliderContainer
.
classList
.
add
(
"
animating
"
),
e
.
prev
.
classList
.
add
(
"
prev-slide
"
),
e
.
settings
.
slideIndex
===
e
.
num
-
1
?
e
.
slides
.
children
[
0
].
classList
.
add
(
"
next-slide
"
):
e
.
slides
.
children
[
e
.
settings
.
slideIndex
+
1
]
&&
e
.
slides
.
children
[
e
.
settings
.
slideIndex
+
1
].
classList
.
add
(
"
next-slide
"
),
e
.
slides
.
children
[
e
.
settings
.
slideIndex
].
classList
.
add
(
"
current-slide
"
),
e
.
num
&&
e
.
indicators
[
e
.
settings
.
slideIndex
].
classList
.
add
(
"
current-indicator
"
),
"
pan
"
===
e
.
settings
.
slideTransition
&&
(
e
.
sliderContainer
.
children
[
1
].
style
.
transform
=
"
translateX(-
"
+
e
.
settings
.
slideIndex
/
e
.
num
*
100
+
"
%)
"
),
e
.
intervalPrevAnim
=
setTimeout
(
function
(){
e
.
sliderContainer
.
classList
.
remove
(
"
animating
"
)},
1
e3
),
autoSlide
(
e
)}}
function
updateIndex
(
e
,
t
){
e
.
prevSlideIndex
=
e
.
settings
.
slideIndex
,
e
.
settings
.
slideIndex
=
t
}
function
autoSlide
(
e
){
!
1
===
e
.
settings
.
paused
&&
(
e
.
intervalSlideChange
=
setTimeout
(
function
(){
var
t
=
e
.
settings
.
slideIndex
+
1
;
updateIndex
(
e
,
t
),
sliderChange
(
e
)},
e
.
settings
.
slideDuration
))}
function
c
learTimeouts
(
e
){
clearTimeout
(
e
.
intervalSlideChange
),
clearTimeout
(
e
.
intervalPrevAnim
);
for
(
var
t
=
0
;
t
<
e
.
num
;
t
++
)
e
.
sliderContainer
.
classList
.
remove
(
"
animating
"
)}
g
et
Sliders
();
"
use strict
"
;
var
getSliders
=
function
(){
var
e
=
[],
t
=
function
(
e
){
this
.
sliderContainer
=
e
,
this
.
slideText
=
function
(
e
){
var
t
=
{};
for
(
let
s
=
0
;
s
<
e
.
length
;
s
++
)
t
[
s
]
=
e
[
s
];
return
t
}(
e
.
children
),
this
.
num
=
e
.
children
.
length
,
this
.
imgUrls
=
function
(
e
){
return
Array
.
from
(
e
.
children
).
map
(
function
(
e
,
t
){
var
s
=
e
.
getElementsByTagName
(
"
img
"
)[
0
].
src
;
return
e
.
getElementsByTagName
(
"
img
"
)[
0
].
remove
(),
s
})}(
e
),
this
.
settings
=
{
width
:
"
100%
"
,
height
:
"
100%
"
,
autoHeight
:
!
1
,
effect
:
!
0
,
effectType
:
"
zoom
"
,
animateText
:
!
0
,
showIndicators
:
!
0
,
showArrows
:
!
0
,
paused
:
!
1
,
autoPause
:
!
0
,
slideIndex
:
0
,
slideDuration
:
5
e3
,
slideTransition
:
"
pan
"
},
this
.
reset
=
function
(){
a
(
this
),
c
(
this
),
o
(
this
)}};
let
s
=
document
.
getElementsByClassName
(
"
citrus-slider
"
);
for
(
var
i
=
0
;
i
<
s
.
length
;
i
++
)
{
e
[
i
]
=
new
t
(
s
[
i
]);
var
n
=
e
[
i
];
r
(
n
),
a
(
n
),
o
(
n
)}
function
r
(
e
){
if
(
e
.
sliderContainer
.
hasAttribute
(
"
data-citrus
"
)){
var
t
=
JSON
.
parse
(
e
.
sliderContainer
.
dataset
.
citrus
);
for
(
const
s
of
Object
.
keys
(
t
))
e
.
settings
[
s
]
=
t
[
s
];
e
.
sliderContainer
.
removeAttribute
(
"
data-citrus
"
),
e
.
settings
.
slideIndex
>
e
.
num
||
e
.
settings
.
slideIndex
<=
0
?
e
.
settings
.
slideIndex
=
0
:
e
.
settings
.
slideIndex
--
}}
function
a
(
e
){
var
t
=
e
.
settings
.
height
;
!
0
===
e
.
settings
.
autoHeight
&&
(
t
=
function
(
e
){
var
t
=
0
;
for
(
let
s
=
0
;
s
<
e
.
num
;
s
++
){
let
i
=
e
.
slideText
[
s
].
offsetHeight
;
t
<
i
&&
(
t
=
i
)}
return
(
t
+=
250
)
+
"
px
"
}(
e
)),
e
.
sliderContainer
.
setAttribute
(
"
style
"
,
"
width:
"
+
e
.
settings
.
width
+
"
; height:
"
+
t
),
e
.
sliderContainer
.
setAttribute
(
"
class
"
,
"
citrus-slider
"
),
e
.
sliderContainer
.
classList
.
add
(
"
transition-
"
+
e
.
settings
.
slideTransition
),
e
.
settings
.
effect
&&
e
.
sliderContainer
.
classList
.
add
(
"
effect-
"
+
e
.
settings
.
effectType
),
e
.
settings
.
animateText
&&
e
.
sliderContainer
.
classList
.
add
(
"
animate-text
"
),
function
(
e
){
var
t
=
document
.
createDocumentFragment
(),
s
=
document
.
createElement
(
"
DIV
"
);
0
==
e
.
settings
.
showArrows
?
s
.
setAttribute
(
"
class
"
,
"
arrows hidden
"
):
s
.
setAttribute
(
"
class
"
,
"
arrows
"
);
var
i
=
document
.
createElement
(
"
DIV
"
);
i
.
setAttribute
(
"
class
"
,
"
slide-arrow left-arrow
"
);
var
n
=
document
.
createElement
(
"
DIV
"
);
n
.
setAttribute
(
"
class
"
,
"
slide-arrow right-arrow
"
),
s
.
appendChild
(
i
),
s
.
appendChild
(
n
),
t
.
appendChild
(
s
),
e
.
arrows
=
[
i
,
n
];
var
r
=
document
.
createElement
(
"
DIV
"
);
e
.
slides
=
r
,
r
.
classList
.
add
(
"
slides
"
),
"
pan
"
===
e
.
settings
.
slideTransition
&&
(
r
.
style
.
width
=
e
.
num
+
"
00%
"
)
;
"
pan
"
===
e
.
settings
.
slideTransition
&&
(
r
.
style
.
width
=
e
.
num
+
"
00%
"
,
r
.
style
.
transform
=
"
translateX(-
"
+
e
.
settings
.
slideIndex
/
e
.
num
*
100
+
"
%)
"
);
var
a
=
{
slide
:
null
,
slideWrap
:
null
};
for
(
let
t
=
0
;
t
<
e
.
num
;
t
++
)
a
.
slideWrap
=
document
.
createElement
(
"
DIV
"
),
t
===
e
.
settings
.
slideIndex
?
a
.
slideWrap
.
setAttribute
(
"
class
"
,
"
slide-wrap current-slide
"
):
a
.
slideWrap
.
setAttribute
(
"
class
"
,
"
slide-wrap
"
),
a
.
slide
=
document
.
createElement
(
"
DIV
"
),
a
.
slide
.
setAttribute
(
"
class
"
,
"
slide
"
),
a
.
slideText
=
e
.
slideText
[
t
],
a
.
slideText
.
setAttribute
(
"
class
"
,
"
slide-text
"
),
a
.
slide
.
style
.
backgroundImage
=
"
url(
"
+
e
.
imgUrls
[
t
]
+
"
)
"
,
a
.
slideWrap
.
appendChild
(
a
.
slide
),
a
.
slideWrap
.
appendChild
(
a
.
slideText
),
r
.
appendChild
(
a
.
slideWrap
);
t
.
appendChild
(
r
),
e
.
indicators
=
{};
var
o
=
document
.
createElement
(
"
DIV
"
);
0
==
e
.
settings
.
showIndicators
?
o
.
setAttribute
(
"
class
"
,
"
indicators hidden
"
):
o
.
setAttribute
(
"
class
"
,
"
indicators
"
);
for
(
let
s
=
0
;
s
<
e
.
num
;
s
++
){
var
u
=
document
.
createElement
(
"
SPAN
"
);
s
===
e
.
settings
.
slideIndex
?
u
.
setAttribute
(
"
class
"
,
"
slide-indicator current-indicator
"
):
u
.
setAttribute
(
"
class
"
,
"
slide-indicator
"
),
u
.
setAttribute
(
"
data-slide
"
,
s
),
o
.
appendChild
(
u
),
t
.
appendChild
(
o
),
e
.
indicators
[
s
]
=
u
}
e
.
sliderContainer
.
innerHTML
=
""
,
e
.
sliderContainer
.
appendChild
(
t
),
function
(
e
){
for
(
var
t
=
0
;
t
<
e
.
arrows
.
length
;
t
++
)
e
.
arrows
[
t
].
addEventListener
(
"
click
"
,
function
(
t
){
if
(
e
.
settings
.
autoPause
&&
(
e
.
settings
.
paused
=!
0
),
!
e
.
sliderContainer
.
classList
.
contains
(
"
animating
"
)){
if
(
e
.
prevSlideIndex
=
e
.
settings
.
slideIndex
,
t
.
target
.
classList
.
contains
(
"
left-arrow
"
))
var
s
=
e
.
settings
.
slideIndex
-
1
;
else
if
(
t
.
target
.
classList
.
contains
(
"
right-arrow
"
))
var
s
=
e
.
settings
.
slideIndex
+
1
;
l
(
e
,
s
),
c
(
e
),
d
(
e
)}});
for
(
t
=
0
;
t
<
e
.
num
;
t
++
)
e
.
indicators
[
t
].
addEventListener
(
"
click
"
,
function
(
t
){
e
.
settings
.
autoPause
&&
(
e
.
settings
.
paused
=!
0
),
e
.
sliderContainer
.
classList
.
contains
(
"
animating
"
)
||!
1
===
t
.
target
.
classList
.
contains
(
"
current-indicator
"
)
&&
(
c
(
e
),
l
(
e
,
Number
(
t
.
target
.
dataset
.
slide
)),
d
(
e
))})}(
e
)}(
e
)}
function
d
(
e
){
if
(
e
.
prev
=
e
.
sliderContainer
.
getElementsByClassName
(
"
current-slide
"
)[
0
],
e
.
settings
.
slideIndex
<
0
?(
e
.
settings
.
slideIndex
=
e
.
num
-
1
,
e
.
num
&&
e
.
indicators
[
0
].
parentElement
.
classList
.
add
(
"
transition-last
"
),
setTimeout
(
function
(){
e
.
num
&&
e
.
indicators
[
0
].
parentElement
.
classList
.
remove
(
"
transition-last
"
)},
1
e3
)):
e
.
settings
.
slideIndex
>
e
.
num
-
1
&&
(
e
.
settings
.
slideIndex
=
0
,
e
.
num
&&
e
.
indicators
[
0
].
parentElement
.
classList
.
add
(
"
transition-first
"
),
setTimeout
(
function
(){
e
.
num
&&
e
.
indicators
[
0
].
parentElement
.
classList
.
remove
(
"
transition-first
"
)},
1
e3
)),
e
.
num
>
1
){
e
.
sliderContainer
.
classList
.
remove
(
"
forwards
"
,
"
backwards
"
);
for
(
var
t
=
0
;
t
<
e
.
num
;
t
++
)
e
.
slides
.
children
[
t
].
classList
.
remove
(
"
current-slide
"
,
"
prev-slide
"
,
"
next-slide
"
),
e
.
num
&&
e
.
indicators
[
t
].
classList
.
remove
(
"
current-indicator
"
);
e
.
prevSlideIndex
<
e
.
settings
.
slideIndex
?
e
.
sliderContainer
.
classList
.
add
(
"
forwards
"
):
e
.
sliderContainer
.
classList
.
add
(
"
backwards
"
),
e
.
sliderContainer
.
classList
.
add
(
"
animating
"
),
e
.
prev
.
classList
.
add
(
"
prev-slide
"
),
e
.
settings
.
slideIndex
===
e
.
num
-
1
?
e
.
slides
.
children
[
0
].
classList
.
add
(
"
next-slide
"
):
e
.
slides
.
children
[
e
.
settings
.
slideIndex
+
1
]
&&
e
.
slides
.
children
[
e
.
settings
.
slideIndex
+
1
].
classList
.
add
(
"
next-slide
"
),
e
.
slides
.
children
[
e
.
settings
.
slideIndex
].
classList
.
add
(
"
current-slide
"
),
e
.
num
&&
e
.
indicators
[
e
.
settings
.
slideIndex
].
classList
.
add
(
"
current-indicator
"
),
"
pan
"
===
e
.
settings
.
slideTransition
&&
(
e
.
sliderContainer
.
children
[
1
].
style
.
transform
=
"
translateX(-
"
+
e
.
settings
.
slideIndex
/
e
.
num
*
100
+
"
%)
"
),
e
.
intervalPrevAnim
=
setTimeout
(
function
(){
e
.
sliderContainer
.
classList
.
remove
(
"
animating
"
)},
1
e3
),
o
(
e
)}}
function
l
(
e
,
t
){
e
.
prevSlideIndex
=
e
.
settings
.
slideIndex
,
e
.
settings
.
slideIndex
=
t
}
function
o
(
e
){
!
1
===
e
.
settings
.
paused
&&
(
e
.
intervalSlideChange
=
setTimeout
(
function
(){
var
t
=
e
.
settings
.
slideIndex
+
1
;
l
(
e
,
t
),
d
(
e
)},
e
.
settings
.
slideDuration
))}
function
c
(
e
){
clearTimeout
(
e
.
intervalSlideChange
),
clearTimeout
(
e
.
intervalPrevAnim
);
for
(
var
t
=
0
;
t
<
e
.
num
;
t
++
)
e
.
sliderContainer
.
classList
.
remove
(
"
animating
"
)}
r
et
urn
e
}
();
//# sourceMappingURL=../map/citrus-slider.min.js.map
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment