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
2beedb34
Commit
2beedb34
authored
Apr 10, 2018
by
Michael Iseard
Browse files
update citrus slider
parent
f33bbc71
Changes
2
Expand all
Hide whitespace changes
Inline
Side-by-side
css/citrus-slider.min.css
View file @
2beedb34
This diff is collapsed.
Click to expand it.
js/citrus-slider.min.js
View file @
2beedb34
let
sliders
=
document
.
getElementsByClassName
(
"
citrus-slider
"
);
for
(
var
sliderObject
s
=
[],
i
=
0
;
i
<
sliders
.
length
;
i
++
){
var
el
=
sliders
[
i
],
num
=
el
.
children
.
length
,
slides
=
el
.
children
,
imgUrls
=
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
s
[
i
]
=
{
slider
:
el
,
slideText
:
slideText
,
imgUrls
:
imgUrls
,
num
:
num
,
settings
:{
effect
:
"
zoom
"
,
animateText
:
!
0
,
showIndicators
:
!
0
,
showArrows
:
!
0
,
paused
:
!
1
,
autoPause
:
!
1
,
slideIndex
:
1
,
d
uration
:
5
e3
,
t
ransition
:
"
pan
"
}},
el
.
hasAttribute
(
"
data-citrus
"
)){
var
settings
=
JSON
.
parse
(
el
.
dataset
.
citrus
);
for
(
const
e
of
Object
.
keys
(
settings
))
sliderObject
s
[
i
].
settings
[
e
]
=
settings
[
e
]}
sliderObject
s
[
i
].
settings
.
slideIndex
>
sliderObject
s
[
i
].
num
||
sliderObject
s
[
i
].
settings
.
slideIndex
<=
0
?
sliderObject
s
[
i
].
settings
.
slideIndex
=
0
:
sliderObject
s
[
i
].
settings
.
slideIndex
--
,
slider
Construct
(
sliderObject
s
[
i
])}
function
slider
Construct
(
e
){
e
.
slider
.
classList
.
add
(
e
.
settings
.
t
ransition
),
e
.
settings
.
effect
&&
e
.
slider
.
classList
.
add
(
e
.
settings
.
effect
+
"
-effect
"
),
e
.
settings
.
animateText
&&
e
.
slider
.
classList
.
add
(
"
animate-text
"
)
;
var
s
=
document
.
createDocumentFragment
(),
t
=
document
.
createElement
(
"
DIV
"
);
0
==
e
.
settings
.
showArrows
?
t
.
setAttribute
(
"
class
"
,
"
arrows hidden
"
):
t
.
setAttribute
(
"
class
"
,
"
arrows
"
);
var
n
=
document
.
createElement
(
"
DIV
"
);
n
.
setAttribute
(
"
class
"
,
"
slide-arrow left-arrow
"
);
var
d
=
document
.
createElement
(
"
DIV
"
);
d
.
setAttribute
(
"
class
"
,
"
slide-arrow right-arrow
"
),
t
.
appendChild
(
n
),
t
.
appendChild
(
d
),
s
.
prepen
d
(
t
),
e
.
arrows
=
[
n
,
d
];
var
r
=
document
.
createElement
(
"
DIV
"
);
e
.
slides
=
r
,
r
.
classList
.
add
(
"
slides
"
),
"
pan
"
===
e
.
settings
.
t
ransition
&&
(
r
.
style
.
width
=
e
.
num
+
"
00%
"
),
"
pan
"
===
e
.
settings
.
t
ransition
&&
(
r
.
style
.
width
=
e
.
num
+
"
00%
"
,
r
.
style
.
transform
=
"
translateX(-
"
+
e
.
settings
.
slideIndex
/
e
.
num
*
100
+
"
%)
"
);
var
a
=
{
slide
:
null
,
slideWrap
:
null
};
for
(
let
s
=
0
;
s
<
e
.
num
;
s
++
)
a
.
slideWrap
=
document
.
createElement
(
"
DIV
"
),
s
===
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
[
s
],
a
.
slideText
.
setAttribute
(
"
class
"
,
"
slide-text
"
),
a
.
slide
.
style
.
backgroundImage
=
"
url(
"
+
e
.
imgUrls
[
s
]
+
"
)
"
,
a
.
slideWrap
.
appendChild
(
a
.
slide
),
a
.
slideWrap
.
appendChild
(
a
.
slideText
),
r
.
appendChild
(
a
.
slideWrap
);
s
.
appendChild
(
r
),
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
c
=
document
.
createElement
(
"
SPAN
"
);
t
===
e
.
settings
.
slideIndex
?
c
.
setAttribute
(
"
class
"
,
"
slide-indicator current-indicator
"
):
c
.
setAttribute
(
"
class
"
,
"
slide-indicator
"
),
c
.
setAttribute
(
"
data-slide
"
,
t
),
l
.
appendChild
(
c
),
s
.
appendChild
(
l
),
e
.
indicators
[
t
]
=
c
}
e
.
slider
.
appendChild
(
s
),
setBindings
(
e
)
,
autoSlide
(
sliderObjects
[
i
])
}
function
setBindings
(
e
){
for
(
var
s
=
0
;
s
<
e
.
arrows
.
length
;
s
++
)
e
.
arrows
[
s
].
addEventListener
(
"
click
"
,
function
(
s
){
if
(
!
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
.
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
.
t
ransition
&&
(
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
.
d
uration
))}
function
clearTimeouts
(
e
){
e
.
settings
.
autoPause
&&
(
e
.
settings
.
paused
=!
0
),
clearTimeout
(
e
.
intervalSlideChange
),
clearTimeout
(
e
.
intervalPrevAnim
);
for
(
var
s
=
0
;
s
<
e
.
num
;
s
++
)
e
.
slider
.
classList
.
remove
(
"
animating
"
)}
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
,
imgUrls
=
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
,
slideD
uration
:
5
e3
,
slideT
ransition
:
"
pan
"
}},
el
.
hasAttribute
(
"
data-citrus
"
)){
var
settings
=
JSON
.
parse
(
el
.
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
--
,
slider
Init
(
sliderObject
[
i
]),
autoSlide
(
sliderObject
[
i
])}
function
slider
Init
(
e
){
e
.
slider
.
setAttribute
(
"
class
"
,
"
citrus-slider
"
),
e
.
slider
.
classList
.
add
(
"
transition-
"
+
e
.
settings
.
slideT
ransition
),
e
.
settings
.
effect
&&
e
.
slider
.
classList
.
add
(
"
effect-
"
+
e
.
settings
.
effect
Type
),
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
.
appendChil
d
(
t
),
e
.
arrows
=
[
i
,
n
];
var
d
=
document
.
createElement
(
"
DIV
"
);
e
.
slides
=
d
,
d
.
classList
.
add
(
"
slides
"
),
"
pan
"
===
e
.
settings
.
slideT
ransition
&&
(
d
.
style
.
width
=
e
.
num
+
"
00%
"
),
"
pan
"
===
e
.
settings
.
slideT
ransition
&&
(
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
.
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
.
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
.
slideT
ransition
&&
(
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
.
slideD
uration
))}
function
clearTimeouts
(
e
){
e
.
settings
.
autoPause
&&
(
e
.
settings
.
paused
=!
0
),
clearTimeout
(
e
.
intervalSlideChange
),
clearTimeout
(
e
.
intervalPrevAnim
);
for
(
var
s
=
0
;
s
<
e
.
num
;
s
++
)
e
.
slider
.
classList
.
remove
(
"
animating
"
)}
//# 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