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
Hide whitespace changes
Inline
Side-by-side
css/citrus-slider.min.css
View file @
d4d18d86
.citrus-slider
{
display
:
block
;
width
:
100%
;
height
:
100%
;
overflow
:
hidden
;
z-index
:
0
;
position
:
relative
}
.citrus-slider
:hover
.slide-arrow
{
opacity
:
.4
}
.citrus-slider
.slide
,
.citrus-slider
.slide-wrap
,
.citrus-slider
.slides
{
width
:
100%
;
height
:
100%
}
.citrus-slider
.slides
{
position
:
absolute
;
overflow
:
hidden
;
z-index
:
0
}
.citrus-slider
.slide-wrap
{
position
:
absolute
;
overflow
:
hidden
}
.citrus-slider
.slide
{
background-size
:
cover
;
background-position
:
center
;
background-repeat
:
no-repeat
}
.citrus-slider
.slide-text
{
position
:
absolute
;
color
:
#fff
;
top
:
50%
;
left
:
50%
;
-webkit-transform
:
translate
(
-50%
,
-50%
);
transform
:
translate
(
-50%
,
-50%
);
-webkit-transition
:
all
.4s
ease
;
transition
:
all
.4s
ease
}
.citrus-slider
.indicators
{
position
:
absolute
;
display
:
-webkit-box
;
display
:
-ms-flexbox
;
display
:
flex
;
-webkit-box-align
:
center
;
-ms-flex-align
:
center
;
align-items
:
center
;
border-radius
:
10px
;
bottom
:
10%
;
left
:
50%
;
height
:
14px
;
-webkit-transform
:
translateX
(
-50%
);
transform
:
translateX
(
-50%
);
z-index
:
2
}
.citrus-slider
.indicators
:before
{
content
:
''
;
position
:
absolute
;
top
:
50%
;
background
:
#fff
;
border-radius
:
10px
;
width
:
calc
(
100%
-
5px
);
height
:
14px
;
-webkit-transform
:
scaleX
(
0
)
translateY
(
-50%
);
transform
:
scaleX
(
0
)
translateY
(
-50%
)}
.citrus-slider
.indicators.transition-first
:before
{
right
:
0
;
-webkit-animation
:
line-grow-left
.6s
forwards
;
animation
:
line-grow-left
.6s
forwards
}
.citrus-slider
.indicators.transition-last
:before
{
left
:
0
;
-webkit-animation
:
line-grow-right
.6s
forwards
;
animation
:
line-grow-right
.6s
forwards
}
.citrus-slider
.indicators
.slide-indicator
{
width
:
14px
;
height
:
14px
;
background
:
#fff
;
border-radius
:
50%
;
display
:
inline-block
;
position
:
relative
;
cursor
:
pointer
}
.citrus-slider
.indicators
.slide-indicator
:not
(
:first-child
)
{
margin-left
:
20px
}
.citrus-slider
.indicators
.slide-indicator
:before
{
content
:
''
;
background
:
0
0
;
border
:
2px
solid
#fff
;
position
:
absolute
;
width
:
50%
;
height
:
50%
;
border-radius
:
50%
;
left
:
50%
;
top
:
50%
;
-webkit-transform
:
translate
(
-50%
,
-50%
)
rotate
(
.001deg
);
transform
:
translate
(
-50%
,
-50%
)
rotate
(
.001deg
);
-webkit-transition
:
all
.6s
ease
;
transition
:
all
.6s
ease
}
.citrus-slider
.indicators
.slide-indicator.current-indicator
:before
{
width
:
200%
;
height
:
200%
}
.citrus-slider
.slide-arrow
{
position
:
absolute
;
top
:
50%
;
width
:
15%
;
height
:
100%
;
z-index
:
2
;
color
:
#fff
;
font-size
:
3em
;
font-style
:
normal
;
display
:
-webkit-box
;
display
:
-ms-flexbox
;
display
:
flex
;
-webkit-box-align
:
center
;
-ms-flex-align
:
center
;
align-items
:
center
;
-webkit-box-pack
:
center
;
-ms-flex-pack
:
center
;
justify-content
:
center
;
opacity
:
0
;
-webkit-transform
:
translateY
(
-50%
);
transform
:
translateY
(
-50%
);
-webkit-transition
:
opacity
.6s
ease
;
transition
:
opacity
.6s
ease
;
cursor
:
pointer
}
.citrus-slider
.slide-arrow
:hover
{
opacity
:
1
}
.citrus-slider
.slide-arrow
:before
{
content
:
''
;
background-image
:
url('data:image/svg+xml;utf8,<svg viewBox="0 0 300 600" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M34.697 75.628a14.998 14.998 0 0 1 24.371-16.556c73.606 73.602 194.123 194.119 230.325 230.321 5.858 5.858 5.858 15.356 0 21.214L59.07 540.93a15 15 0 0 1-24.374-16.559C63.579 457.12 100 360.35 100 300c0-60.35-36.421-157.12-65.303-224.372z" fill="%23fff"/></svg>')
;
width
:
100%
;
height
:
100%
;
background-repeat
:
no-repeat
;
background-position
:
center
;
background-size
:
25%
}
.citrus-slider
.left-arrow
{
left
:
0
}
.citrus-slider
.left-arrow
:before
{
-webkit-transform
:
rotate
(
180deg
);
transform
:
rotate
(
180deg
)}
.citrus-slider
.right-arrow
{
right
:
0
}
.citrus-slider
.hidden
{
display
:
none
}
.citrus-slider.animate-text
.slide-text
{
opacity
:
0
}
.citrus-slider.animate-text
.prev-slide
.slide-text
,
.citrus-slider.animate-text
:not
(
.animating
)
.current-slide
.slide-text
{
opacity
:
1
}
.citrus-slider.animate-text.animating
.current-slide
.slide-text
{
-webkit-transform
:
translate
(
-50%
,
-60%
);
transform
:
translate
(
-50%
,
-60%
)}
.citrus-slider.effect-zoom
.current-slide
.slide
{
-webkit-animation
:
background-zoom
16s
forwards
;
animation
:
background-zoom
16s
forwards
}
.citrus-slider.effect-zoom.animating
.prev-slide
.slide
{
-webkit-animation
:
background-zoom
16s
forwards
;
animation
:
background-zoom
16s
forwards
}
.citrus-slider.effect-pan
.current-slide
.slide
{
-webkit-animation
:
background-pan
linear
16s
forwards
;
animation
:
background-pan
linear
16s
forwards
}
.citrus-slider.effect-pan.animating
.prev-slide
.slide
{
-webkit-animation
:
background-pan
linear
16s
forwards
;
animation
:
background-pan
linear
16s
forwards
}
.citrus-slider.transition-pan
.slides
{
position
:
absolute
;
display
:
-webkit-box
;
display
:
-ms-flexbox
;
display
:
flex
;
-webkit-transition
:
-webkit-transform
1s
ease
;
transition
:
-webkit-transform
1s
ease
;
transition
:
transform
1s
ease
;
transition
:
transform
1s
ease
,
-webkit-transform
1s
ease
}
.citrus-slider.transition-pan
.slide-wrap
{
position
:
relative
}
.citrus-slider.transition-zoom-fade
.current-slide
{
z-index
:
1
;
opacity
:
1
}
.citrus-slider.transition-zoom-fade.forwards
.next-slide
{
opacity
:
1
;
z-index
:
0
}
.citrus-slider.transition-zoom-fade.forwards
.prev-slide
{
opacity
:
1
;
-webkit-animation
:
zoom-fade
1s
forwards
;
animation
:
zoom-fade
1s
forwards
}
.citrus-slider.transition-zoom-fade.backwards
.next-slide
{
opacity
:
0
;
z-index
:
0
}
.citrus-slider.transition-zoom-fade.backwards
.prev-slide
{
opacity
:
1
;
z-index
:
1
}
.citrus-slider.transition-zoom-fade.backwards
.current-slide
{
z-index
:
2
;
-webkit-animation
:
zoom-fade-reverse
1s
forwards
;
animation
:
zoom-fade-reverse
1s
forwards
}
.citrus-slider.transition-scope
.current-slide
{
z-index
:
1
;
opacity
:
1
}
.citrus-slider.transition-scope.forwards
.next-slide
{
opacity
:
0
;
z-index
:
0
}
.citrus-slider.transition-scope.forwards
.prev-slide
{
opacity
:
1
;
z-index
:
1
}
.citrus-slider.transition-scope.forwards
.current-slide
{
z-index
:
2
;
-webkit-animation
:
scope
1s
forwards
;
animation
:
scope
1s
forwards
}
.citrus-slider.transition-scope.backwards
.next-slide
{
opacity
:
0
;
z-index
:
0
}
.citrus-slider.transition-scope.backwards
.prev-slide
{
opacity
:
1
;
z-index
:
2
;
-webkit-animation
:
scope-reverse
1s
forwards
;
animation
:
scope-reverse
1s
forwards
}
.citrus-slider.transition-scope.backwards
.current-slide
{
z-index
:
1
}
.citrus-slider.transition-slide
.next-slide
{
opacity
:
1
;
z-index
:
0
}
.citrus-slider.transition-slide
.current-slide
{
z-index
:
1
;
opacity
:
1
}
.citrus-slider.transition-slide
.prev-slide
{
opacity
:
1
;
z-index
:
2
;
-webkit-transition
:
-webkit-transform
1s
ease
;
transition
:
-webkit-transform
1s
ease
;
transition
:
transform
1s
ease
;
transition
:
transform
1s
ease
,
-webkit-transform
1s
ease
}
.citrus-slider.transition-slide.forwards
.prev-slide
{
-webkit-transform
:
translateX
(
-100%
)
rotate
(
.001deg
);
transform
:
translateX
(
-100%
)
rotate
(
.001deg
)}
.citrus-slider.transition-slide.backwards
.prev-slide
{
-webkit-transform
:
translateX
(
100%
)
rotate
(
.001deg
);
transform
:
translateX
(
100%
)
rotate
(
.001deg
)}
.citrus-slider.transition-fade
.current-slide
{
z-index
:
1
;
opacity
:
1
}
.citrus-slider.transition-fade
.prev-slide
{
opacity
:
0
;
z-index
:
2
;
-webkit-transition
:
opacity
1s
ease
;
transition
:
opacity
1s
ease
}
.citrus-slider.transition-fade
.slides
{
position
:
absolute
}
.citrus-slider.transition-fallaway
.next-slide
{
opacity
:
1
;
z-index
:
0
}
.citrus-slider.transition-fallaway
.current-slide
{
z-index
:
1
;
opacity
:
1
}
.citrus-slider.transition-fallaway
.prev-slide
{
opacity
:
1
;
z-index
:
2
;
-webkit-transform-origin
:
top
right
;
transform-origin
:
top
right
;
-webkit-animation
:
fallaway
1s
forwards
;
animation
:
fallaway
1s
forwards
}
.citrus-slider.transition-downandout
.next-slide
{
opacity
:
1
;
z-index
:
0
}
.citrus-slider.transition-downandout
.current-slide
{
z-index
:
1
;
opacity
:
1
}
.citrus-slider.transition-downandout
.prev-slide
{
opacity
:
1
;
z-index
:
2
;
-webkit-animation
:
downandout
1s
forwards
;
animation
:
downandout
1s
forwards
}
@-webkit-keyframes
scope
{
0
%
{
-webkit-clip-path
:
circle
(
0
at
50%
50%
);
clip-path
:
circle
(
0
at
50%
50%
)}
100
%
{
-webkit-clip-path
:
circle
(
100%
);
clip-path
:
circle
(
100%
)}}
@keyframes
scope
{
0
%
{
-webkit-clip-path
:
circle
(
0
at
50%
50%
);
clip-path
:
circle
(
0
at
50%
50%
)}
100
%
{
-webkit-clip-path
:
circle
(
100%
);
clip-path
:
circle
(
100%
)}}
@-webkit-keyframes
scope-reverse
{
0
%
{
-webkit-clip-path
:
circle
(
100%
);
clip-path
:
circle
(
100%
)}
100
%
{
-webkit-clip-path
:
circle
(
0
at
50%
50%
);
clip-path
:
circle
(
0
at
50%
50%
)}}
@keyframes
scope-reverse
{
0
%
{
-webkit-clip-path
:
circle
(
100%
);
clip-path
:
circle
(
100%
)}
100
%
{
-webkit-clip-path
:
circle
(
0
at
50%
50%
);
clip-path
:
circle
(
0
at
50%
50%
)}}
@-webkit-keyframes
background-pan
{
0
%
{
-webkit-transform
:
scale
(
1.2
)
translate
(
5%
,
-5%
);
transform
:
scale
(
1.2
)
translate
(
5%
,
-5%
)}
100
%
{
-webkit-transform
:
scale
(
1.2
)
rotate
(
.001deg
)
translate
(
-5%
,
5%
);
transform
:
scale
(
1.2
)
rotate
(
.001deg
)
translate
(
-5%
,
5%
)}}
@keyframes
background-pan
{
0
%
{
-webkit-transform
:
scale
(
1.2
)
translate
(
5%
,
-5%
);
transform
:
scale
(
1.2
)
translate
(
5%
,
-5%
)}
100
%
{
-webkit-transform
:
scale
(
1.2
)
rotate
(
.001deg
)
translate
(
-5%
,
5%
);
transform
:
scale
(
1.2
)
rotate
(
.001deg
)
translate
(
-5%
,
5%
)}}
@-webkit-keyframes
background-zoom
{
100
%
{
-webkit-transform
:
scale
(
1.1
)
rotate
(
.001deg
);
transform
:
scale
(
1.1
)
rotate
(
.001deg
)}}
@keyframes
background-zoom
{
100
%
{
-webkit-transform
:
scale
(
1.1
)
rotate
(
.001deg
);
transform
:
scale
(
1.1
)
rotate
(
.001deg
)}}
@-webkit-keyframes
zoom-fade-reverse
{
0
%
{
-webkit-transform
:
scale
(
2
)
rotate
(
.001deg
);
transform
:
scale
(
2
)
rotate
(
.001deg
);
opacity
:
0
}
99
%
{
-webkit-transform
:
scale
(
1
)
rotate
(
.001deg
);
transform
:
scale
(
1
)
rotate
(
.001deg
);
opacity
:
1
}
100
%
{
-webkit-transform
:
scale
(
1
)
rotate
(
.001deg
);
transform
:
scale
(
1
)
rotate
(
.001deg
);
opacity
:
1
}}
@keyframes
zoom-fade-reverse
{
0
%
{
-webkit-transform
:
scale
(
2
)
rotate
(
.001deg
);
transform
:
scale
(
2
)
rotate
(
.001deg
);
opacity
:
0
}
99
%
{
-webkit-transform
:
scale
(
1
)
rotate
(
.001deg
);
transform
:
scale
(
1
)
rotate
(
.001deg
);
opacity
:
1
}
100
%
{
-webkit-transform
:
scale
(
1
)
rotate
(
.001deg
);
transform
:
scale
(
1
)
rotate
(
.001deg
);
opacity
:
1
}}
@-webkit-keyframes
zoom-fade
{
0
%
{
-webkit-transform
:
scale
(
1
)
rotate
(
.001deg
);
transform
:
scale
(
1
)
rotate
(
.001deg
);
opacity
:
2
;
z-index
:
2
}
99
%
{
-webkit-transform
:
scale
(
2
)
rotate
(
.001deg
);
transform
:
scale
(
2
)
rotate
(
.001deg
);
opacity
:
0
;
z-index
:
2
}
100
%
{
-webkit-transform
:
scale
(
2
)
rotate
(
.001deg
);
transform
:
scale
(
2
)
rotate
(
.001deg
);
opacity
:
0
;
z-index
:
0
}}
@keyframes
zoom-fade
{
0
%
{
-webkit-transform
:
scale
(
1
)
rotate
(
.001deg
);
transform
:
scale
(
1
)
rotate
(
.001deg
);
opacity
:
2
;
z-index
:
2
}
99
%
{
-webkit-transform
:
scale
(
2
)
rotate
(
.001deg
);
transform
:
scale
(
2
)
rotate
(
.001deg
);
opacity
:
0
;
z-index
:
2
}
100
%
{
-webkit-transform
:
scale
(
2
)
rotate
(
.001deg
);
transform
:
scale
(
2
)
rotate
(
.001deg
);
opacity
:
0
;
z-index
:
0
}}
@-webkit-keyframes
fallaway
{
100
%
{
-webkit-transform
:
translateY
(
100%
)
rotate
(
-40deg
)
rotate
(
.001deg
);
transform
:
translateY
(
100%
)
rotate
(
-40deg
)
rotate
(
.001deg
)}}
@keyframes
fallaway
{
100
%
{
-webkit-transform
:
translateY
(
100%
)
rotate
(
-40deg
)
rotate
(
.001deg
);
transform
:
translateY
(
100%
)
rotate
(
-40deg
)
rotate
(
.001deg
)}}
@-webkit-keyframes
downandout
{
0
%
{
-webkit-transform
:
scale
(
1
)
rotate
(
.001deg
);
transform
:
scale
(
1
)
rotate
(
.001deg
)}
50
%
{
-webkit-transform
:
scale
(
.75
)
rotate
(
.001deg
);
transform
:
scale
(
.75
)
rotate
(
.001deg
)}
100
%
{
-webkit-transform
:
translateX
(
-100%
)
scale
(
.75
)
rotate
(
.001deg
);
transform
:
translateX
(
-100%
)
scale
(
.75
)
rotate
(
.001deg
)}}
@keyframes
downandout
{
0
%
{
-webkit-transform
:
scale
(
1
)
rotate
(
.001deg
);
transform
:
scale
(
1
)
rotate
(
.001deg
)}
50
%
{
-webkit-transform
:
scale
(
.75
)
rotate
(
.001deg
);
transform
:
scale
(
.75
)
rotate
(
.001deg
)}
100
%
{
-webkit-transform
:
translateX
(
-100%
)
scale
(
.75
)
rotate
(
.001deg
);
transform
:
translateX
(
-100%
)
scale
(
.75
)
rotate
(
.001deg
)}}
@-webkit-keyframes
line-grow-right
{
0
%
{
-webkit-transform
:
scaleX
(
0
)
translateY
(
-50%
)
rotate
(
.001deg
);
transform
:
scaleX
(
0
)
translateY
(
-50%
)
rotate
(
.001deg
);
-webkit-transform-origin
:
left
;
transform-origin
:
left
}
50
%
{
-webkit-transform
:
scaleX
(
1
)
translateY
(
-50%
)
rotate
(
.001deg
);
transform
:
scaleX
(
1
)
translateY
(
-50%
)
rotate
(
.001deg
)}
100
%
{
-webkit-transform
:
scaleX
(
0
)
translateY
(
-50%
)
rotate
(
.001deg
);
transform
:
scaleX
(
0
)
translateY
(
-50%
)
rotate
(
.001deg
);
-webkit-transform-origin
:
right
;
transform-origin
:
right
;
border-radius
:
10px
0
0
10px
}}
@keyframes
line-grow-right
{
0
%
{
-webkit-transform
:
scaleX
(
0
)
translateY
(
-50%
)
rotate
(
.001deg
);
transform
:
scaleX
(
0
)
translateY
(
-50%
)
rotate
(
.001deg
);
-webkit-transform-origin
:
left
;
transform-origin
:
left
}
50
%
{
-webkit-transform
:
scaleX
(
1
)
translateY
(
-50%
)
rotate
(
.001deg
);
transform
:
scaleX
(
1
)
translateY
(
-50%
)
rotate
(
.001deg
)}
100
%
{
-webkit-transform
:
scaleX
(
0
)
translateY
(
-50%
)
rotate
(
.001deg
);
transform
:
scaleX
(
0
)
translateY
(
-50%
)
rotate
(
.001deg
);
-webkit-transform-origin
:
right
;
transform-origin
:
right
;
border-radius
:
10px
0
0
10px
}}
@-webkit-keyframes
line-grow-left
{
0
%
{
-webkit-transform
:
scaleX
(
0
)
translateY
(
-50%
)
rotate
(
.001deg
);
transform
:
scaleX
(
0
)
translateY
(
-50%
)
rotate
(
.001deg
);
-webkit-transform-origin
:
right
;
transform-origin
:
right
}
50
%
{
-webkit-transform
:
scaleX
(
1
)
translateY
(
-50%
)
rotate
(
.001deg
);
transform
:
scaleX
(
1
)
translateY
(
-50%
)
rotate
(
.001deg
)}
100
%
{
-webkit-transform
:
scaleX
(
0
)
translateY
(
-50%
)
rotate
(
.001deg
);
transform
:
scaleX
(
0
)
translateY
(
-50%
)
rotate
(
.001deg
);
-webkit-transform-origin
:
left
;
transform-origin
:
left
;
border-radius
:
0
10px
10px
0
}}
@keyframes
line-grow-left
{
0
%
{
-webkit-transform
:
scaleX
(
0
)
translateY
(
-50%
)
rotate
(
.001deg
);
transform
:
scaleX
(
0
)
translateY
(
-50%
)
rotate
(
.001deg
);
-webkit-transform-origin
:
right
;
transform-origin
:
right
}
50
%
{
-webkit-transform
:
scaleX
(
1
)
translateY
(
-50%
)
rotate
(
.001deg
);
transform
:
scaleX
(
1
)
translateY
(
-50%
)
rotate
(
.001deg
)}
100
%
{
-webkit-transform
:
scaleX
(
0
)
translateY
(
-50%
)
rotate
(
.001deg
);
transform
:
scaleX
(
0
)
translateY
(
-50%
)
rotate
(
.001deg
);
-webkit-transform-origin
:
left
;
transform-origin
:
left
;
border-radius
:
0
10px
10px
0
}}
.citrus-slider
{
display
:
block
;
overflow
:
hidden
;
z-index
:
0
;
position
:
relative
}
.citrus-slider
:hover
.slide-arrow
{
opacity
:
.4
}
.citrus-slider
.slide
,
.citrus-slider
.slide-wrap
,
.citrus-slider
.slides
{
width
:
100%
;
height
:
100%
}
.citrus-slider
.slides
{
position
:
absolute
;
overflow
:
hidden
;
z-index
:
0
}
.citrus-slider
.slide-wrap
{
position
:
absolute
;
overflow
:
hidden
}
.citrus-slider
.slide
{
background-size
:
cover
;
background-position
:
center
;
background-repeat
:
no-repeat
}
.citrus-slider
.slide-text
{
position
:
absolute
;
color
:
#fff
;
text-align
:
center
;
top
:
50%
;
left
:
50%
;
-webkit-transform
:
translate
(
-50%
,
-50%
);
transform
:
translate
(
-50%
,
-50%
);
-webkit-transition
:
all
.4s
ease
;
transition
:
all
.4s
ease
}
.citrus-slider
.indicators
{
position
:
absolute
;
display
:
-webkit-box
;
display
:
-ms-flexbox
;
display
:
flex
;
-webkit-box-align
:
center
;
-ms-flex-align
:
center
;
align-items
:
center
;
border-radius
:
10px
;
bottom
:
10%
;
left
:
50%
;
height
:
14px
;
-webkit-transform
:
translateX
(
-50%
);
transform
:
translateX
(
-50%
);
z-index
:
2
}
.citrus-slider
.indicators
:before
{
content
:
''
;
position
:
absolute
;
top
:
50%
;
background
:
#fff
;
border-radius
:
10px
;
width
:
calc
(
100%
-
5px
);
height
:
14px
;
-webkit-transform
:
scaleX
(
0
)
translateY
(
-50%
);
transform
:
scaleX
(
0
)
translateY
(
-50%
)}
.citrus-slider
.indicators.transition-first
:before
{
right
:
0
;
-webkit-animation
:
line-grow-left
.6s
forwards
;
animation
:
line-grow-left
.6s
forwards
}
.citrus-slider
.indicators.transition-last
:before
{
left
:
0
;
-webkit-animation
:
line-grow-right
.6s
forwards
;
animation
:
line-grow-right
.6s
forwards
}
.citrus-slider
.indicators
.slide-indicator
{
width
:
14px
;
height
:
14px
;
background
:
#fff
;
border-radius
:
50%
;
display
:
inline-block
;
position
:
relative
;
cursor
:
pointer
}
.citrus-slider
.indicators
.slide-indicator
:not
(
:first-child
)
{
margin-left
:
20px
}
.citrus-slider
.indicators
.slide-indicator
:before
{
content
:
''
;
background
:
0
0
;
border
:
2px
solid
#fff
;
position
:
absolute
;
width
:
50%
;
height
:
50%
;
border-radius
:
50%
;
left
:
50%
;
top
:
50%
;
-webkit-transform
:
translate
(
-50%
,
-50%
)
rotate
(
.001deg
);
transform
:
translate
(
-50%
,
-50%
)
rotate
(
.001deg
);
-webkit-transition
:
all
.6s
ease
;
transition
:
all
.6s
ease
}
.citrus-slider
.indicators
.slide-indicator.current-indicator
:before
{
width
:
200%
;
height
:
200%
}
.citrus-slider
.slide-arrow
{
position
:
absolute
;
top
:
50%
;
width
:
15%
;
height
:
100%
;
z-index
:
2
;
color
:
#fff
;
font-size
:
3em
;
font-style
:
normal
;
display
:
-webkit-box
;
display
:
-ms-flexbox
;
display
:
flex
;
-webkit-box-align
:
center
;
-ms-flex-align
:
center
;
align-items
:
center
;
-webkit-box-pack
:
center
;
-ms-flex-pack
:
center
;
justify-content
:
center
;
opacity
:
0
;
-webkit-transform
:
translateY
(
-50%
);
transform
:
translateY
(
-50%
);
-webkit-transition
:
opacity
.6s
ease
;
transition
:
opacity
.6s
ease
;
cursor
:
pointer
}
.citrus-slider
.slide-arrow
:hover
{
opacity
:
1
}
.citrus-slider
.slide-arrow
:before
{
content
:
''
;
background-image
:
url('data:image/svg+xml;utf8,<svg viewBox="0 0 300 600" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M34.697 75.628a14.998 14.998 0 0 1 24.371-16.556c73.606 73.602 194.123 194.119 230.325 230.321 5.858 5.858 5.858 15.356 0 21.214L59.07 540.93a15 15 0 0 1-24.374-16.559C63.579 457.12 100 360.35 100 300c0-60.35-36.421-157.12-65.303-224.372z" fill="%23fff"/></svg>')
;
width
:
100%
;
height
:
100%
;
background-repeat
:
no-repeat
;
background-position
:
center
;
background-size
:
25%
}
.citrus-slider
.left-arrow
{
left
:
0
}
.citrus-slider
.left-arrow
:before
{
-webkit-transform
:
rotate
(
180deg
);
transform
:
rotate
(
180deg
)}
.citrus-slider
.right-arrow
{
right
:
0
}
.citrus-slider
.hidden
{
display
:
none
}
.citrus-slider.animate-text
.slide-text
{
opacity
:
0
}
.citrus-slider.animate-text
.prev-slide
.slide-text
,
.citrus-slider.animate-text
:not
(
.animating
)
.current-slide
.slide-text
{
opacity
:
1
}
.citrus-slider.animate-text.animating
.current-slide
.slide-text
{
-webkit-transform
:
translate
(
-50%
,
-60%
);
transform
:
translate
(
-50%
,
-60%
)}
.citrus-slider.effect-zoom
.current-slide
.slide
{
-webkit-animation
:
background-zoom
16s
forwards
;
animation
:
background-zoom
16s
forwards
}
.citrus-slider.effect-zoom.animating
.prev-slide
.slide
{
-webkit-animation
:
background-zoom
16s
forwards
;
animation
:
background-zoom
16s
forwards
}
.citrus-slider.effect-pan
.current-slide
.slide
{
-webkit-animation
:
background-pan
linear
16s
forwards
;
animation
:
background-pan
linear
16s
forwards
}
.citrus-slider.effect-pan.animating
.prev-slide
.slide
{
-webkit-animation
:
background-pan
linear
16s
forwards
;
animation
:
background-pan
linear
16s
forwards
}
.citrus-slider.transition-pan
.slides
{
position
:
absolute
;
display
:
-webkit-box
;
display
:
-ms-flexbox
;
display
:
flex
;
-webkit-transition
:
-webkit-transform
1s
ease
;
transition
:
-webkit-transform
1s
ease
;
transition
:
transform
1s
ease
;
transition
:
transform
1s
ease
,
-webkit-transform
1s
ease
}
.citrus-slider.transition-pan
.slide-wrap
{
position
:
relative
}
.citrus-slider.transition-zoom-fade
.current-slide
{
z-index
:
1
;
opacity
:
1
}
.citrus-slider.transition-zoom-fade.forwards
.next-slide
{
opacity
:
1
;
z-index
:
0
}
.citrus-slider.transition-zoom-fade.forwards
.prev-slide
{
opacity
:
1
;
-webkit-animation
:
zoom-fade
1s
forwards
;
animation
:
zoom-fade
1s
forwards
}
.citrus-slider.transition-zoom-fade.backwards
.next-slide
{
opacity
:
0
;
z-index
:
0
}
.citrus-slider.transition-zoom-fade.backwards
.prev-slide
{
opacity
:
1
;
z-index
:
1
}
.citrus-slider.transition-zoom-fade.backwards
.current-slide
{
z-index
:
2
;
-webkit-animation
:
zoom-fade-reverse
1s
forwards
;
animation
:
zoom-fade-reverse
1s
forwards
}
.citrus-slider.transition-scope
.current-slide
{
z-index
:
1
;
opacity
:
1
}
.citrus-slider.transition-scope.forwards
.next-slide
{
opacity
:
0
;
z-index
:
0
}
.citrus-slider.transition-scope.forwards
.prev-slide
{
opacity
:
1
;
z-index
:
1
}
.citrus-slider.transition-scope.forwards
.current-slide
{
z-index
:
2
;
-webkit-animation
:
scope
1s
forwards
;
animation
:
scope
1s
forwards
}
.citrus-slider.transition-scope.backwards
.next-slide
{
opacity
:
0
;
z-index
:
0
}
.citrus-slider.transition-scope.backwards
.prev-slide
{
opacity
:
1
;
z-index
:
2
;
-webkit-animation
:
scope-reverse
1s
forwards
;
animation
:
scope-reverse
1s
forwards
}
.citrus-slider.transition-scope.backwards
.current-slide
{
z-index
:
1
}
.citrus-slider.transition-slide
.next-slide
{
opacity
:
1
;
z-index
:
0
}
.citrus-slider.transition-slide
.current-slide
{
z-index
:
1
;
opacity
:
1
}
.citrus-slider.transition-slide
.prev-slide
{
opacity
:
1
;
z-index
:
2
;
-webkit-transition
:
-webkit-transform
1s
ease
;
transition
:
-webkit-transform
1s
ease
;
transition
:
transform
1s
ease
;
transition
:
transform
1s
ease
,
-webkit-transform
1s
ease
}
.citrus-slider.transition-slide.forwards
.prev-slide
{
-webkit-transform
:
translateX
(
-100%
)
rotate
(
.001deg
);
transform
:
translateX
(
-100%
)
rotate
(
.001deg
)}
.citrus-slider.transition-slide.backwards
.prev-slide
{
-webkit-transform
:
translateX
(
100%
)
rotate
(
.001deg
);
transform
:
translateX
(
100%
)
rotate
(
.001deg
)}
.citrus-slider.transition-fade
.current-slide
{
z-index
:
1
;
opacity
:
1
}
.citrus-slider.transition-fade
.prev-slide
{
opacity
:
0
;
z-index
:
2
;
-webkit-transition
:
opacity
1s
ease
;
transition
:
opacity
1s
ease
}
.citrus-slider.transition-fade
.slides
{
position
:
absolute
}
.citrus-slider.transition-fallaway
.next-slide
{
opacity
:
1
;
z-index
:
0
}
.citrus-slider.transition-fallaway
.current-slide
{
z-index
:
1
;
opacity
:
1
}
.citrus-slider.transition-fallaway
.prev-slide
{
opacity
:
1
;
z-index
:
2
;
-webkit-transform-origin
:
top
right
;
transform-origin
:
top
right
;
-webkit-animation
:
fallaway
1s
forwards
;
animation
:
fallaway
1s
forwards
}
.citrus-slider.transition-downandout
.next-slide
{
opacity
:
1
;
z-index
:
0
}
.citrus-slider.transition-downandout
.current-slide
{
z-index
:
1
;
opacity
:
1
}
.citrus-slider.transition-downandout
.prev-slide
{
opacity
:
1
;
z-index
:
2
;
-webkit-animation
:
downandout
1s
forwards
;
animation
:
downandout
1s
forwards
}
@-webkit-keyframes
scope
{
0
%
{
-webkit-clip-path
:
circle
(
0
at
50%
50%
);
clip-path
:
circle
(
0
at
50%
50%
)}
100
%
{
-webkit-clip-path
:
circle
(
100%
);
clip-path
:
circle
(
100%
)}}
@keyframes
scope
{
0
%
{
-webkit-clip-path
:
circle
(
0
at
50%
50%
);
clip-path
:
circle
(
0
at
50%
50%
)}
100
%
{
-webkit-clip-path
:
circle
(
100%
);
clip-path
:
circle
(
100%
)}}
@-webkit-keyframes
scope-reverse
{
0
%
{
-webkit-clip-path
:
circle
(
100%
);
clip-path
:
circle
(
100%
)}
100
%
{
-webkit-clip-path
:
circle
(
0
at
50%
50%
);
clip-path
:
circle
(
0
at
50%
50%
)}}
@keyframes
scope-reverse
{
0
%
{
-webkit-clip-path
:
circle
(
100%
);
clip-path
:
circle
(
100%
)}
100
%
{
-webkit-clip-path
:
circle
(
0
at
50%
50%
);
clip-path
:
circle
(
0
at
50%
50%
)}}
@-webkit-keyframes
background-pan
{
0
%
{
-webkit-transform
:
scale
(
1.2
)
translate
(
5%
,
-5%
);
transform
:
scale
(
1.2
)
translate
(
5%
,
-5%
)}
100
%
{
-webkit-transform
:
scale
(
1.2
)
rotate
(
.001deg
)
translate
(
-5%
,
5%
);
transform
:
scale
(
1.2
)
rotate
(
.001deg
)
translate
(
-5%
,
5%
)}}
@keyframes
background-pan
{
0
%
{
-webkit-transform
:
scale
(
1.2
)
translate
(
5%
,
-5%
);
transform
:
scale
(
1.2
)
translate
(
5%
,
-5%
)}
100
%
{
-webkit-transform
:
scale
(
1.2
)
rotate
(
.001deg
)
translate
(
-5%
,
5%
);
transform
:
scale
(
1.2
)
rotate
(
.001deg
)
translate
(
-5%
,
5%
)}}
@-webkit-keyframes
background-zoom
{
100
%
{
-webkit-transform
:
scale
(
1.1
)
rotate
(
.001deg
);
transform
:
scale
(
1.1
)
rotate
(
.001deg
)}}
@keyframes
background-zoom
{
100
%
{
-webkit-transform
:
scale
(
1.1
)
rotate
(
.001deg
);
transform
:
scale
(
1.1
)
rotate
(
.001deg
)}}
@-webkit-keyframes
zoom-fade-reverse
{
0
%
{
-webkit-transform
:
scale
(
2
)
rotate
(
.001deg
);
transform
:
scale
(
2
)
rotate
(
.001deg
);
opacity
:
0
}
99
%
{
-webkit-transform
:
scale
(
1
)
rotate
(
.001deg
);
transform
:
scale
(
1
)
rotate
(
.001deg
);
opacity
:
1
}
100
%
{
-webkit-transform
:
scale
(
1
)
rotate
(
.001deg
);
transform
:
scale
(
1
)
rotate
(
.001deg
);
opacity
:
1
}}
@keyframes
zoom-fade-reverse
{
0
%
{
-webkit-transform
:
scale
(
2
)
rotate
(
.001deg
);
transform
:
scale
(
2
)
rotate
(
.001deg
);
opacity
:
0
}
99
%
{
-webkit-transform
:
scale
(
1
)
rotate
(
.001deg
);
transform
:
scale
(
1
)
rotate
(
.001deg
);
opacity
:
1
}
100
%
{
-webkit-transform
:
scale
(
1
)
rotate
(
.001deg
);
transform
:
scale
(
1
)
rotate
(
.001deg
);
opacity
:
1
}}
@-webkit-keyframes
zoom-fade
{
0
%
{
-webkit-transform
:
scale
(
1
)
rotate
(
.001deg
);
transform
:
scale
(
1
)
rotate
(
.001deg
);
opacity
:
2
;
z-index
:
2
}
99
%
{
-webkit-transform
:
scale
(
2
)
rotate
(
.001deg
);
transform
:
scale
(
2
)
rotate
(
.001deg
);
opacity
:
0
;
z-index
:
2
}
100
%
{
-webkit-transform
:
scale
(
2
)
rotate
(
.001deg
);
transform
:
scale
(
2
)
rotate
(
.001deg
);
opacity
:
0
;
z-index
:
0
}}
@keyframes
zoom-fade
{
0
%
{
-webkit-transform
:
scale
(
1
)
rotate
(
.001deg
);
transform
:
scale
(
1
)
rotate
(
.001deg
);
opacity
:
2
;
z-index
:
2
}
99
%
{
-webkit-transform
:
scale
(
2
)
rotate
(
.001deg
);
transform
:
scale
(
2
)
rotate
(
.001deg
);
opacity
:
0
;
z-index
:
2
}
100
%
{
-webkit-transform
:
scale
(
2
)
rotate
(
.001deg
);
transform
:
scale
(
2
)
rotate
(
.001deg
);
opacity
:
0
;
z-index
:
0
}}
@-webkit-keyframes
fallaway
{
100
%
{
-webkit-transform
:
translateY
(
100%
)
rotate
(
-40deg
)
rotate
(
.001deg
);
transform
:
translateY
(
100%
)
rotate
(
-40deg
)
rotate
(
.001deg
)}}
@keyframes
fallaway
{
100
%
{
-webkit-transform
:
translateY
(
100%
)
rotate
(
-40deg
)
rotate
(
.001deg
);
transform
:
translateY
(
100%
)
rotate
(
-40deg
)
rotate
(
.001deg
)}}
@-webkit-keyframes
downandout
{
0
%
{
-webkit-transform
:
scale
(
1
)
rotate
(
.001deg
);
transform
:
scale
(
1
)
rotate
(
.001deg
)}
50
%
{
-webkit-transform
:
scale
(
.75
)
rotate
(
.001deg
);
transform
:
scale
(
.75
)
rotate
(
.001deg
)}
100
%
{
-webkit-transform
:
translateX
(
-100%
)
scale
(
.75
)
rotate
(
.001deg
);
transform
:
translateX
(
-100%
)
scale
(
.75
)
rotate
(
.001deg
)}}
@keyframes
downandout
{
0
%
{
-webkit-transform
:
scale
(
1
)
rotate
(
.001deg
);
transform
:
scale
(
1
)
rotate
(
.001deg
)}
50
%
{
-webkit-transform
:
scale
(
.75
)
rotate
(
.001deg
);
transform
:
scale
(
.75
)
rotate
(
.001deg
)}
100
%
{
-webkit-transform
:
translateX
(
-100%
)
scale
(
.75
)
rotate
(
.001deg
);
transform
:
translateX
(
-100%
)
scale
(
.75
)
rotate
(
.001deg
)}}
@-webkit-keyframes
line-grow-right
{
0
%
{
-webkit-transform
:
scaleX
(
0
)
translateY
(
-50%
)
rotate
(
.001deg
);
transform
:
scaleX
(
0
)
translateY
(
-50%
)
rotate
(
.001deg
);
-webkit-transform-origin
:
left
;
transform-origin
:
left
}
50
%
{
-webkit-transform
:
scaleX
(
1
)
translateY
(
-50%
)
rotate
(
.001deg
);
transform
:
scaleX
(
1
)
translateY
(
-50%
)
rotate
(
.001deg
)}
100
%
{
-webkit-transform
:
scaleX
(
0
)
translateY
(
-50%
)
rotate
(
.001deg
);
transform
:
scaleX
(
0
)
translateY
(
-50%
)
rotate
(
.001deg
);
-webkit-transform-origin
:
right
;
transform-origin
:
right
;
border-radius
:
10px
0
0
10px
}}
@keyframes
line-grow-right
{
0
%
{
-webkit-transform
:
scaleX
(
0
)
translateY
(
-50%
)
rotate
(
.001deg
);
transform
:
scaleX
(
0
)
translateY
(
-50%
)
rotate
(
.001deg
);
-webkit-transform-origin
:
left
;
transform-origin
:
left
}
50
%
{
-webkit-transform
:
scaleX
(
1
)
translateY
(
-50%
)
rotate
(
.001deg
);
transform
:
scaleX
(
1
)
translateY
(
-50%
)
rotate
(
.001deg
)}
100
%
{
-webkit-transform
:
scaleX
(
0
)
translateY
(
-50%
)
rotate
(
.001deg
);
transform
:
scaleX
(
0
)
translateY
(
-50%
)
rotate
(
.001deg
);
-webkit-transform-origin
:
right
;
transform-origin
:
right
;
border-radius
:
10px
0
0
10px
}}
@-webkit-keyframes
line-grow-left
{
0
%
{
-webkit-transform
:
scaleX
(
0
)
translateY
(
-50%
)
rotate
(
.001deg
);
transform
:
scaleX
(
0
)
translateY
(
-50%
)
rotate
(
.001deg
);
-webkit-transform-origin
:
right
;
transform-origin
:
right
}
50
%
{
-webkit-transform
:
scaleX
(
1
)
translateY
(
-50%
)
rotate
(
.001deg
);
transform
:
scaleX
(
1
)
translateY
(
-50%
)
rotate
(
.001deg
)}
100
%
{
-webkit-transform
:
scaleX
(
0
)
translateY
(
-50%
)
rotate
(
.001deg
);
transform
:
scaleX
(
0
)
translateY
(
-50%
)
rotate
(
.001deg
);
-webkit-transform-origin
:
left
;
transform-origin
:
left
;
border-radius
:
0
10px
10px
0
}}
@keyframes
line-grow-left
{
0
%
{
-webkit-transform
:
scaleX
(
0
)
translateY
(
-50%
)
rotate
(
.001deg
);
transform
:
scaleX
(
0
)
translateY
(
-50%
)
rotate
(
.001deg
);
-webkit-transform-origin
:
right
;
transform-origin
:
right
}
50
%
{
-webkit-transform
:
scaleX
(
1
)
translateY
(
-50%
)
rotate
(
.001deg
);
transform
:
scaleX
(
1
)
translateY
(
-50%
)
rotate
(
.001deg
)}
100
%
{
-webkit-transform
:
scaleX
(
0
)
translateY
(
-50%
)
rotate
(
.001deg
);
transform
:
scaleX
(
0
)
translateY
(
-50%
)
rotate
(
.001deg
);
-webkit-transform-origin
:
left
;
transform-origin
:
left
;
border-radius
:
0
10px
10px
0
}}
/*# sourceMappingURL=../map/citrus-slider.min.css.map */
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