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
17daa1c8
Commit
17daa1c8
authored
Apr 12, 2018
by
Michael Iseard
Browse files
update citrus slider to 1.0.4
parent
4a2d6a63
Changes
2
Expand all
Hide whitespace changes
Inline
Side-by-side
css/citrus-slider.min.css
View file @
17daa1c8
This diff is collapsed.
Click to expand it.
js/citrus-slider.min.js
View file @
17daa1c8
let
sliders
=
document
.
getElementsByClassName
(
"
citrus-slider
"
);
for
(
var
sliderObject
=
[],
i
=
0
;
i
<
sliders
.
length
;
i
++
){
var
el
=
sliders
[
i
],
num
=
el
.
children
.
length
,
slides
=
el
.
children
,
imgU
rls
=
Array
.
from
(
slides
).
map
(
function
(
e
,
s
){
var
t
=
e
.
getElementsByTagName
(
"
img
"
)[
0
].
src
;
return
e
.
getElementsByTagName
(
"
img
"
)[
0
].
remove
(),
t
}),
slideText
=
{};
for
(
let
e
=
0
;
e
<
slides
.
length
;
e
++
)
slideText
[
e
]
=
slides
[
e
];
if
(
sliderObject
[
i
]
=
{
slider
:
el
,
slideText
:
slideText
,
imgUrls
:
imgUrls
,
num
:
num
,
settings
:{
effect
:
!
0
,
effectType
:
"
zoom
"
,
animateText
:
!
0
,
showIndicators
:
!
0
,
showArrows
:
!
0
,
paused
:
!
1
,
autoPause
:
!
0
,
slideIndex
:
1
,
slideDuration
:
5
e3
,
slideTransition
:
"
pan
"
}},
el
.
hasAttribute
(
"
data-citrus
"
)){
var
settings
=
JSON
.
parse
(
e
l
.
dataset
.
citrus
);
for
(
const
e
of
Object
.
keys
(
settings
))
sliderObject
[
i
]
.
settings
[
e
]
=
settings
[
e
];
el
.
removeAttribute
(
"
data-citrus
"
)
}
sliderObject
[
i
]
.
settings
.
slideIndex
>
sliderObject
[
i
].
num
||
sliderObject
[
i
]
.
settings
.
slideIndex
<=
0
?
sliderObject
[
i
]
.
settings
.
slideIndex
=
0
:
sliderObject
[
i
]
.
settings
.
slideIndex
--
,
sliderInit
(
sliderObject
[
i
],
autoSlide
(
sliderObject
[
i
]))
}
function
sliderInit
(
e
){
e
.
slider
.
setAttribute
(
"
class
"
,
"
citrus-slider
"
),
e
.
slider
.
classList
.
add
(
"
transition-
"
+
e
.
settings
.
slideTransition
),
e
.
settings
.
effect
&&
e
.
slider
.
classList
.
add
(
"
effect-
"
+
e
.
settings
.
effectType
),
e
.
settings
.
animateText
&&
e
.
slider
.
classList
.
add
(
"
animate-text
"
),
sliderConstruct
(
e
)}
function
sliderConstruct
(
e
){
var
s
=
document
.
createDocumentFragment
(),
t
=
document
.
createElement
(
"
DIV
"
);
0
==
e
.
settings
.
showArrows
?
t
.
setAttribute
(
"
class
"
,
"
arrows hidden
"
):
t
.
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
"
),
t
.
appendChild
(
i
),
t
.
appendChild
(
n
),
s
.
appendChild
(
t
),
e
.
arrows
=
[
i
,
n
];
var
d
=
document
.
createElement
(
"
DIV
"
);
e
.
slides
=
d
,
d
.
classList
.
add
(
"
slides
"
),
"
pan
"
===
e
.
settings
.
slideTransition
&&
(
d
.
style
.
width
=
e
.
num
+
"
00%
"
),
"
pan
"
===
e
.
settings
.
slideTransition
&&
(
d
.
style
.
width
=
e
.
num
+
"
00%
"
,
d
.
style
.
transform
=
"
translateX(-
"
+
e
.
settings
.
slideIndex
/
e
.
num
*
100
+
"
%)
"
);
var
r
=
{
slide
:
null
,
slideWrap
:
null
};
for
(
let
s
=
0
;
s
<
e
.
num
;
s
++
)
r
.
slideWrap
=
document
.
createElement
(
"
DIV
"
),
s
===
e
.
settings
.
slideIndex
?
r
.
slideWrap
.
setAttribute
(
"
class
"
,
"
slide-wrap current-slide
"
):
r
.
slideWrap
.
setAttribute
(
"
class
"
,
"
slide-wrap
"
),
r
.
slide
=
document
.
createElement
(
"
DIV
"
),
r
.
slide
.
setAttribute
(
"
class
"
,
"
slide
"
),
r
.
slideText
=
e
.
slideText
[
s
],
r
.
slideText
.
setAttribute
(
"
class
"
,
"
slide-text
"
),
r
.
slide
.
style
.
backgroundImage
=
"
url(
"
+
e
.
imgUrls
[
s
]
+
"
)
"
,
r
.
slideWrap
.
appendChild
(
r
.
slide
),
r
.
slideWrap
.
appendChild
(
r
.
slideText
),
d
.
appendChild
(
r
.
slideWrap
);
s
.
appendChild
(
d
),
e
.
indicators
=
{};
var
l
=
document
.
createElement
(
"
DIV
"
);
0
==
e
.
settings
.
showIndicators
?
l
.
setAttribute
(
"
class
"
,
"
indicators hidden
"
):
l
.
setAttribute
(
"
class
"
,
"
indicators
"
);
for
(
let
t
=
0
;
t
<
e
.
num
;
t
++
){
var
a
=
document
.
createElement
(
"
SPAN
"
);
t
===
e
.
settings
.
slideIndex
?
a
.
setAttribute
(
"
class
"
,
"
slide-indicator current-indicator
"
):
a
.
setAttribute
(
"
class
"
,
"
slide-indicator
"
),
a
.
setAttribute
(
"
data-slide
"
,
t
),
l
.
appendChild
(
a
),
s
.
appendChild
(
l
),
e
.
indicators
[
t
]
=
a
}
e
.
slider
.
innerHTML
=
""
,
e
.
slider
.
appendChild
(
s
),
setBindings
(
e
)}
function
setBindings
(
e
){
for
(
var
s
=
0
;
s
<
e
.
arrows
.
length
;
s
++
)
e
.
arrows
[
s
].
addEventListener
(
"
click
"
,
function
(
s
){
if
(
e
.
settings
.
autoPause
&&
(
e
.
settings
.
paused
=!
0
),
!
e
.
slider
.
classList
.
contains
(
"
animating
"
)){
if
(
e
.
prevSlideIndex
=
e
.
settings
.
slideIndex
,
s
.
target
.
classList
.
contains
(
"
left-arrow
"
))
var
t
=
e
.
settings
.
slideIndex
-
1
;
else
if
(
s
.
target
.
classList
.
contains
(
"
right-arrow
"
))
t
=
e
.
settings
.
slideIndex
+
1
;
updateIndex
(
e
,
t
),
clearTimeouts
(
e
),
sliderChange
(
e
)}});
for
(
s
=
0
;
s
<
e
.
num
;
s
++
)
e
.
indicators
[
s
].
addEventListener
(
"
click
"
,
function
(
s
){
e
.
settings
.
autoPause
&&
(
e
.
settings
.
paused
=!
0
),
e
.
slider
.
classList
.
contains
(
"
animating
"
)
||!
1
===
s
.
target
.
classList
.
contains
(
"
current-indicator
"
)
&&
(
clearTimeouts
(
e
),
updateIndex
(
e
,
Number
(
s
.
target
.
dataset
.
slide
)),
sliderChange
(
e
))})}
function
sliderChange
(
e
){
if
(
e
.
prev
=
e
.
slider
.
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
.
slider
.
classList
.
remove
(
"
forwards
"
,
"
backwards
"
);
for
(
var
s
=
0
;
s
<
e
.
num
;
s
++
)
e
.
slides
.
children
[
s
].
classList
.
remove
(
"
current-slide
"
,
"
prev-slide
"
,
"
next-slide
"
),
e
.
num
&&
e
.
indicators
[
s
].
classList
.
remove
(
"
current-indicator
"
);
e
.
prevSlideIndex
<
e
.
settings
.
slideIndex
?
e
.
slider
.
classList
.
add
(
"
forwards
"
):
e
.
slider
.
classList
.
add
(
"
backwards
"
),
e
.
slider
.
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
.
slider
.
children
[
1
].
style
.
transform
=
"
translateX(-
"
+
e
.
settings
.
slideIndex
/
e
.
num
*
100
+
"
%)
"
),
e
.
intervalPrevAnim
=
setTimeout
(
function
(){
e
.
slider
.
classList
.
remove
(
"
animating
"
)},
1
e3
),
autoSlide
(
e
)}}
function
updateIndex
(
e
,
s
){
e
.
prevSlideIndex
=
e
.
settings
.
slideIndex
,
e
.
settings
.
slideIndex
=
s
}
function
autoSlide
(
e
){
!
1
===
e
.
settings
.
paused
&&
(
e
.
intervalSlideChange
=
setTimeout
(
function
(){
var
s
=
e
.
settings
.
slideIndex
+
1
;
updateIndex
(
e
,
s
),
sliderChange
(
e
)},
e
.
settings
.
slideDuration
))}
function
clearTimeouts
(
e
){
clearTimeout
(
e
.
intervalSlideChange
),
clearTimeout
(
e
.
intervalPrevAnim
);
for
(
var
s
=
0
;
s
<
e
.
num
;
s
++
)
e
.
slider
.
classList
.
remove
(
"
animating
"
)}
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
];
return
t
}
function
getImages
(
e
){
return
u
rls
=
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
.
slider
Container
.
setAttribute
(
"
class
"
,
"
citrus-slider
"
),
e
.
slider
Container
.
classList
.
add
(
"
transition-
"
+
e
.
settings
.
slideTransition
),
e
.
settings
.
effect
&&
e
.
slider
Container
.
classList
.
add
(
"
effect-
"
+
e
.
settings
.
effectType
),
e
.
settings
.
animateText
&&
e
.
slider
Container
.
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
.
slider
Container
.
innerHTML
=
""
,
e
.
slider
Container
.
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
.
slider
Container
.
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
.
slider
Container
.
classList
.
contains
(
"
animating
"
)
||!
1
===
t
.
target
.
classList
.
contains
(
"
current-indicator
"
)
&&
(
clearTimeouts
(
e
),
updateIndex
(
e
,
Number
(
t
.
target
.
dataset
.
slide
)),
sliderChange
(
e
))})}
function
sliderChange
(
e
){
if
(
e
.
prev
=
e
.
slider
Container
.
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
.
slider
Container
.
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
.
slider
Container
.
classList
.
add
(
"
forwards
"
):
e
.
slider
Container
.
classList
.
add
(
"
backwards
"
),
e
.
slider
Container
.
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
.
slider
Container
.
children
[
1
].
style
.
transform
=
"
translateX(-
"
+
e
.
settings
.
slideIndex
/
e
.
num
*
100
+
"
%)
"
),
e
.
intervalPrevAnim
=
setTimeout
(
function
(){
e
.
slider
Container
.
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
clearTimeouts
(
e
){
clearTimeout
(
e
.
intervalSlideChange
),
clearTimeout
(
e
.
intervalPrevAnim
);
for
(
var
t
=
0
;
t
<
e
.
num
;
t
++
)
e
.
slider
Container
.
classList
.
remove
(
"
animating
"
)}
getSliders
();
//# sourceMappingURL=../map/citrus-slider.min.js.map
Write
Preview
Markdown
is supported
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