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
e0371c55
Commit
e0371c55
authored
Apr 08, 2018
by
Michael Iseard
Browse files
rename to Citrus
parent
71c7aed3
Changes
3
Hide whitespace changes
Inline
Side-by-side
css/citrus-slider.min.css
0 → 100644
View file @
e0371c55
.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
;
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
.slide-text
h2
{
margin
:
0
}
.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
:
''
;
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
{
background-image
:
url(../img/chevron.svg)
;
-webkit-transform
:
rotate
(
180deg
);
transform
:
rotate
(
180deg
)}
.citrus-slider
.right-arrow
{
right
:
0
}
.citrus-slider
.right-arrow
:before
{
background-image
:
url(../img/chevron.svg)
}
.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.zoom-effect
.current-slide
.slide
{
-webkit-animation
:
background-zoom
16s
forwards
;
animation
:
background-zoom
16s
forwards
}
.citrus-slider.zoom-effect.animating
.prev-slide
.slide
{
-webkit-animation
:
background-zoom
16s
forwards
;
animation
:
background-zoom
16s
forwards
}
.citrus-slider.pan-effect
.current-slide
.slide
{
-webkit-transform
:
scale
(
1.2
)
translate
(
5%
,
-5%
);
transform
:
scale
(
1.2
)
translate
(
5%
,
-5%
);
-webkit-animation
:
background-pan
linear
16s
forwards
;
animation
:
background-pan
linear
16s
forwards
}
.citrus-slider.pan-effect.animating
.prev-slide
.slide
{
-webkit-transform
:
scale
(
1.2
)
translate
(
5%
,
-5%
);
transform
:
scale
(
1.2
)
translate
(
5%
,
-5%
);
-webkit-animation
:
background-pan
linear
16s
forwards
;
animation
:
background-pan
linear
16s
forwards
}
.citrus-slider.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.pan
.slide-wrap
{
position
:
relative
}
.citrus-slider.zoom-fade
.current-slide
{
z-index
:
1
;
opacity
:
1
}
.citrus-slider.zoom-fade.forwards
.next-slide
{
opacity
:
1
;
z-index
:
0
}
.citrus-slider.zoom-fade.forwards
.prev-slide
{
opacity
:
1
;
-webkit-animation
:
zoom-fade
1s
forwards
;
animation
:
zoom-fade
1s
forwards
}
.citrus-slider.zoom-fade.backwards
.next-slide
{
opacity
:
0
;
z-index
:
0
}
.citrus-slider.zoom-fade.backwards
.prev-slide
{
opacity
:
1
;
z-index
:
1
}
.citrus-slider.zoom-fade.backwards
.current-slide
{
z-index
:
2
;
-webkit-animation
:
zoom-fade-reverse
1s
forwards
;
animation
:
zoom-fade-reverse
1s
forwards
}
.citrus-slider.scope
.current-slide
{
z-index
:
1
;
opacity
:
1
}
.citrus-slider.scope.forwards
.next-slide
{
opacity
:
0
;
z-index
:
0
}
.citrus-slider.scope.forwards
.prev-slide
{
opacity
:
1
;
z-index
:
1
}
.citrus-slider.scope.forwards
.current-slide
{
z-index
:
2
;
-webkit-animation
:
scope
1s
forwards
;
animation
:
scope
1s
forwards
}
.citrus-slider.scope.backwards
.next-slide
{
opacity
:
0
;
z-index
:
0
}
.citrus-slider.scope.backwards
.prev-slide
{
opacity
:
1
;
z-index
:
2
;
-webkit-animation
:
scope-reverse
1s
forwards
;
animation
:
scope-reverse
1s
forwards
}
.citrus-slider.scope.backwards
.current-slide
{
z-index
:
1
}
.citrus-slider.slide
.next-slide
{
opacity
:
1
;
z-index
:
0
}
.citrus-slider.slide
.current-slide
{
z-index
:
1
;
opacity
:
1
}
.citrus-slider.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.slide.forwards
.prev-slide
{
-webkit-transform
:
translateX
(
-100%
)
rotate
(
.001deg
);
transform
:
translateX
(
-100%
)
rotate
(
.001deg
)}
.citrus-slider.slide.backwards
.prev-slide
{
-webkit-transform
:
translateX
(
100%
)
rotate
(
.001deg
);
transform
:
translateX
(
100%
)
rotate
(
.001deg
)}
.citrus-slider.fade
.current-slide
{
z-index
:
1
;
opacity
:
1
}
.citrus-slider.fade
.prev-slide
{
opacity
:
0
;
z-index
:
2
;
-webkit-transition
:
opacity
1s
ease
;
transition
:
opacity
1s
ease
}
.citrus-slider.fade
.slides
{
position
:
absolute
}
.citrus-slider.fallaway
.next-slide
{
opacity
:
1
;
z-index
:
0
}
.citrus-slider.fallaway
.current-slide
{
z-index
:
1
;
opacity
:
1
}
.citrus-slider.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.downandout
.next-slide
{
opacity
:
1
;
z-index
:
0
}
.citrus-slider.downandout
.current-slide
{
z-index
:
1
;
opacity
:
1
}
.citrus-slider.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
{
100
%
{
-webkit-transform
:
scale
(
1.2
)
rotate
(
.001deg
)
translate
(
-5%
,
5%
);
transform
:
scale
(
1.2
)
rotate
(
.001deg
)
translate
(
-5%
,
5%
)}}
@keyframes
background-pan
{
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
}}
\ No newline at end of file
index.html
View file @
e0371c55
...
...
@@ -10,13 +10,13 @@
<link
rel=
"stylesheet"
href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity=
"sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin=
"anonymous"
>
<!--
Skroll
-Slider CSS -->
<link
rel=
"stylesheet"
type=
"text/css"
href=
"css/
skroll
-slider.min.css?v=1.0.31"
>
<!--
Citrus
-Slider CSS -->
<link
rel=
"stylesheet"
type=
"text/css"
href=
"css/
citrus
-slider.min.css?v=1.0.31"
>
<!-- highlightjs -->
<link
rel=
"stylesheet"
href=
"https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css"
>
<title>
Skroll
-Slider Demo
</title>
<title>
Citrus
-Slider Demo
</title>
<style>
.btn-primary
,
...
...
@@ -71,12 +71,12 @@
</nav>
<div
id=
"intro"
class=
"jumbotron jumbotron-fluid"
>
<div
class=
"container"
>
<h1
class=
"display-3"
>
Skroll
Slider
</h1>
<h1
class=
"display-3"
>
Citrus
Slider
</h1>
<p
class=
"lead"
>
A modern JavaScript carousel with no third party requirements.
</p>
<hr
class=
"my-4"
>
<p
class=
"lead"
>
<a
class=
"btn btn-primary btn-lg"
href=
"https://gitea.iseardmedia.com/michael/
Skroll
-Slider/archive/1.0.3.zip"
role=
"button"
>
Download
</a>
<a
class=
"btn btn-primary btn-lg"
href=
"https://gitea.iseardmedia.com/michael/
Skroll
-Slider"
role=
"button"
>
Source
</a>
<a
class=
"btn btn-primary btn-lg"
href=
"https://gitea.iseardmedia.com/michael/
citrus
-Slider/archive/1.0.3.zip"
role=
"button"
>
Download
</a>
<a
class=
"btn btn-primary btn-lg"
href=
"https://gitea.iseardmedia.com/michael/
citrus
-Slider"
role=
"button"
>
Source
</a>
</p>
<p>
v1.0.3
</p>
</div>
...
...
@@ -84,7 +84,7 @@
<section>
<div
class=
"container"
>
<h2
id=
"demo"
class=
"display-4"
>
Demo
</h2>
<div
id=
"slider-demo-1"
class=
"
skroll
-slider"
style=
"width:100%; height: 400px;"
>
<div
id=
"slider-demo-1"
class=
"
citrus
-slider"
style=
"width:100%; height: 400px;"
>
<div>
<img
src=
"img/1.png?v=1.0.0"
>
<h2>
Light, fast and free
</h2>
...
...
@@ -113,7 +113,7 @@
<h3>
Basic
</h3>
<pre>
<code
class=
"html"
>
<
div class="
skroll
-slider"
>
<
div class="
citrus
-slider"
>
<
div
><
img src="img/1.jpg"
><
/div
>
<
div
><
img src="img/2.jpg"
><
/div
>
<
div
><
img src="img/3.jpg"
><
/div
>
...
...
@@ -123,7 +123,7 @@
<h3>
With text
</h3>
<pre>
<code
class=
"html"
>
<
div class="
skroll
-slider"
>
<
div class="
citrus
-slider"
>
<
div
><
img src="img/1.jpg"
><
h2
>
Slide 1
<
/h2
><
/div
>
<
div
><
img src="img/2.jpg"
><
h2
>
Slide 2
<
/h2
><
/div
>
<
div
><
img src="img/3.jpg"
><
h2
>
Slide 3
<
/h2
><
/div
>
...
...
@@ -133,7 +133,7 @@
<h3>
Customize settings
</h3>
<pre>
<code
class=
"html"
>
<
div class="
skroll
-slider" data-
skroll
='{"duration" : 4000, "transition" : "pan"}'
>
<
div class="
citrus
-slider" data-
citrus
='{"duration" : 4000, "transition" : "pan"}'
>
<
div
><
img src="img/1.jpg"
><
/div
>
<
div
><
img src="img/2.jpg"
><
/div
>
<
div
><
img src="img/3.jpg"
><
/div
>
...
...
@@ -157,8 +157,8 @@
<script
src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity=
"sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin=
"anonymous"
></script>
<!--
Skroll
-Slider JS -->
<script
src=
"js/
skroll
-slider.min.js?v=1.0.31"
></script>
<!--
citrus
-Slider JS -->
<script
src=
"js/
citrus
-slider.min.js?v=1.0.31"
></script>
<!-- highlight.js -->
<script
src=
"https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"
></script>
...
...
js/citrus-slider.min.js
0 → 100644
View file @
e0371c55
let
sliders
=
document
.
getElementsByClassName
(
"
citrus-slider
"
);
for
(
var
sliderObjects
=
[],
i
=
0
;
i
<
sliders
.
length
;
i
++
){
var
el
=
sliders
[
i
],
num
=
el
.
children
.
length
,
imgElements
=
el
.
querySelectorAll
(
"
img
"
),
slides
=
el
.
children
,
imgUrls
=
Array
.
from
(
el
.
querySelectorAll
(
"
img
"
)).
map
(
function
(
e
,
s
){
return
e
.
remove
(),
e
.
src
}),
slideText
=
{};
for
(
let
e
=
0
;
e
<
slides
.
length
;
e
++
)
slideText
[
e
]
=
slides
[
e
];
if
(
sliderObjects
[
i
]
=
{
slider
:
el
,
img
:
imgElements
,
slideText
:
slideText
,
imgUrls
:
imgUrls
,
num
:
num
,
settings
:{
effect
:
"
zoom
"
,
animateText
:
!
0
,
showIndicators
:
!
0
,
showArrows
:
!
0
,
paused
:
!
1
,
autoPause
:
!
1
,
slideIndex
:
1
,
duration
:
5
e3
,
transition
:
"
pan
"
}},
el
.
hasAttribute
(
"
data-citrus
"
)){
var
settings
=
JSON
.
parse
(
el
.
dataset
.
citrus
);
for
(
const
e
of
Object
.
keys
(
settings
))
sliderObjects
[
i
].
settings
[
e
]
=
settings
[
e
]}
sliderObjects
[
i
].
settings
.
slideIndex
>
sliderObjects
[
i
].
num
||
sliderObjects
[
i
].
settings
.
slideIndex
<=
0
?
sliderObjects
[
i
].
settings
.
slideIndex
=
0
:
sliderObjects
[
i
].
settings
.
slideIndex
--
,
sliderConstruct
(
sliderObjects
[
i
])}
function
sliderConstruct
(
e
){
e
.
slider
.
classList
.
add
(
e
.
settings
.
transition
),
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
.
prepend
(
t
),
e
.
arrows
=
[
n
,
d
];
var
r
=
document
.
createElement
(
"
DIV
"
);
e
.
slides
=
r
,
r
.
classList
.
add
(
"
slides
"
),
"
pan
"
===
e
.
settings
.
transition
&&
(
r
.
style
.
width
=
e
.
num
+
"
00%
"
),
"
pan
"
===
e
.
settings
.
transition
&&
(
r
.
style
.
width
=
e
.
num
+
"
00%
"
,
r
.
style
.
transform
=
"
translateX(-
"
+
e
.
settings
.
slideIndex
/
e
.
num
*
100
+
"
%)
"
);
var
l
=
{
slide
:
null
,
slideWrap
:
null
};
for
(
let
s
=
0
;
s
<
e
.
num
;
s
++
)
l
.
slideWrap
=
document
.
createElement
(
"
DIV
"
),
s
===
e
.
settings
.
slideIndex
?
l
.
slideWrap
.
setAttribute
(
"
class
"
,
"
slide-wrap current-slide
"
):
l
.
slideWrap
.
setAttribute
(
"
class
"
,
"
slide-wrap
"
),
l
.
slide
=
document
.
createElement
(
"
DIV
"
),
l
.
slide
.
setAttribute
(
"
class
"
,
"
slide
"
),
l
.
slideText
=
e
.
slideText
[
s
],
l
.
slideText
.
setAttribute
(
"
class
"
,
"
slide-text
"
),
l
.
slide
.
style
.
backgroundImage
=
"
url(
"
+
e
.
imgUrls
[
s
]
+
"
)
"
,
l
.
slideWrap
.
appendChild
(
l
.
slide
),
l
.
slideWrap
.
appendChild
(
l
.
slideText
),
r
.
appendChild
(
l
.
slideWrap
);
s
.
appendChild
(
r
),
e
.
indicators
=
{};
var
a
=
document
.
createElement
(
"
DIV
"
);
0
==
e
.
settings
.
showIndicators
?
a
.
setAttribute
(
"
class
"
,
"
indicators hidden
"
):
a
.
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
),
a
.
appendChild
(
c
),
s
.
appendChild
(
a
),
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
.
transition
&&
(
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
.
duration
))}
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
"
)}
\ No newline at end of file
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