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
0f279b0c
Commit
0f279b0c
authored
Apr 10, 2018
by
Michael Iseard
Browse files
add Settings section and controls to demo
parent
2beedb34
Changes
1
Hide whitespace changes
Inline
Side-by-side
index.html
View file @
0f279b0c
...
...
@@ -35,15 +35,15 @@
.btn-primary
:active
,
.btn-primary
:visited
,
.btn-primary
:focus
{
background-color
:
#F49E4C
;
border-color
:
#
F28A27
;
background-color
:
transparent
;
border-color
:
#
fff
;
}
.btn-primary
:not
(
:disabled
)
:not
(
.disabled
)
.active
,
.btn-primary
:not
(
:disabled
)
:not
(
.disabled
)
:active
,
.show
>
.btn-primary.dropdown-toggle
{
background-color
:
#F49E4C
;
border-color
:
#
F28A27
;
background-color
:
transparent
;
border-color
:
#
fff
;
}
#intro
{
...
...
@@ -73,6 +73,9 @@
<li
class=
"nav-item"
>
<a
class=
"nav-item nav-link"
href=
"#installation"
>
Installation
</a>
</li>
<li
class=
"nav-item"
>
<a
class=
"nav-item nav-link"
href=
"#settings"
>
Settings
</a>
</li>
</ul>
<ul
class=
"navbar-nav ml-auto"
>
<li
class=
"nav-item"
>
...
...
@@ -104,8 +107,8 @@
</div>
</div>
</div>
<
section
>
<
div
class=
"container"
>
<
div
class=
"container"
>
<
section
>
<div
id=
"slider-demo-1"
class=
"citrus-slider"
style=
"height: 400px;"
>
<div>
<img
src=
"img/1.png?v=1.0.0"
>
...
...
@@ -125,11 +128,86 @@
<h2>
Find out more below
</h2>
</div>
</div>
</div>
</section>
<br/>
<section>
<div
class=
"container"
>
<br>
<div
id=
"demo-settings"
>
<div
class=
"btn-group"
>
<button
class=
"btn btn-secondary dropdown-toggle"
type=
"button"
id=
"transitionButton"
data-toggle=
"dropdown"
aria-haspopup=
"true"
aria-expanded=
"false"
>
Transition
</button>
<div
class=
"dropdown-menu"
aria-labelledby=
"transitionButton"
>
<a
class=
"dropdown-item"
data-settings=
'{"slideTransition": "pan"}'
href=
"#"
>
Pan
</a>
<a
class=
"dropdown-item"
data-settings=
'{"slideTransition": "zoom-fade"}'
href=
"#"
>
Zoom-fade
</a>
<a
class=
"dropdown-item"
data-settings=
'{"slideTransition": "fallaway"}'
href=
"#"
>
Fallaway
</a>
<a
class=
"dropdown-item"
data-settings=
'{"slideTransition": "scope"}'
href=
"#"
>
Scope
</a>
<a
class=
"dropdown-item"
data-settings=
'{"slideTransition": "downandout"}'
href=
"#"
>
Downandout
</a>
</div>
</div>
<div
class=
"btn-group"
>
<button
class=
"btn btn-secondary dropdown-toggle"
type=
"button"
id=
"effectButton"
data-toggle=
"dropdown"
aria-haspopup=
"true"
aria-expanded=
"false"
>
Effect Type
</button>
<div
class=
"dropdown-menu"
aria-labelledby=
"effectButton"
>
<a
class=
"dropdown-item"
data-settings=
'{"effectType": "pan"}'
href=
"#"
>
Pan
</a>
<a
class=
"dropdown-item"
data-settings=
'{"effectType": "zoom"}'
href=
"#"
>
Zoom
</a>
</div>
</div>
<div
class=
"btn-group"
>
<button
class=
"btn btn-secondary dropdown-toggle"
type=
"button"
id=
"animTextButton"
data-toggle=
"dropdown"
aria-haspopup=
"true"
aria-expanded=
"false"
>
Animate Text
</button>
<div
class=
"dropdown-menu"
aria-labelledby=
"animTextButton"
>
<a
class=
"dropdown-item"
data-settings=
'{"animateText": true}'
href=
"#"
>
True
</a>
<a
class=
"dropdown-item"
data-settings=
'{"animateText": false}'
href=
"#"
>
False
</a>
</div>
</div>
<div
class=
"btn-group"
>
<button
class=
"btn btn-secondary dropdown-toggle"
type=
"button"
id=
"indicatorsButton"
data-toggle=
"dropdown"
aria-haspopup=
"true"
aria-expanded=
"false"
>
Indicators
</button>
<div
class=
"dropdown-menu"
aria-labelledby=
"indicatorsButton"
>
<a
class=
"dropdown-item"
data-settings=
'{"showIndicators": true}'
href=
"#"
>
True
</a>
<a
class=
"dropdown-item"
data-settings=
'{"showIndicators": false}'
href=
"#"
>
False
</a>
</div>
</div>
<div
class=
"btn-group"
>
<button
class=
"btn btn-secondary dropdown-toggle"
type=
"button"
id=
"arrowsButton"
data-toggle=
"dropdown"
aria-haspopup=
"true"
aria-expanded=
"false"
>
Arrows
</button>
<div
class=
"dropdown-menu"
aria-labelledby=
"arrowsButton"
>
<a
class=
"dropdown-item"
data-settings=
'{"showArrows": true}'
href=
"#"
>
True
</a>
<a
class=
"dropdown-item"
data-settings=
'{"showArrows": false}'
href=
"#"
>
False
</a>
</div>
</div>
<div
class=
"btn-group"
>
<button
class=
"btn btn-secondary dropdown-toggle"
type=
"button"
id=
"autoPauseButton"
data-toggle=
"dropdown"
aria-haspopup=
"true"
aria-expanded=
"false"
>
Auto Pause
</button>
<div
class=
"dropdown-menu"
aria-labelledby=
"autoPauseButton"
>
<a
class=
"dropdown-item"
data-settings=
'{"autoPause": true, "paused" : false}'
href=
"#"
>
True
</a>
<a
class=
"dropdown-item"
data-settings=
'{"autoPause": false, "paused" : false}'
href=
"#"
>
False
</a>
</div>
</div>
<div
class=
"btn-group"
>
<button
class=
"btn btn-secondary dropdown-toggle"
type=
"button"
id=
"durationButton"
data-toggle=
"dropdown"
aria-haspopup=
"true"
aria-expanded=
"false"
>
Slide Duration
</button>
<div
class=
"dropdown-menu"
aria-labelledby=
"durationButton"
>
<a
class=
"dropdown-item"
data-settings=
'{"slideDuration": 5000, "paused" : false}'
href=
"#"
>
5s
</a>
<a
class=
"dropdown-item"
data-settings=
'{"slideDuration": 2000, "paused" : false}'
href=
"#"
>
2s
</a>
</div>
</div>
</div>
</section>
<hr
class=
"my-4"
>
<br/>
<section>
<h2
id=
"installation"
class=
"display-4"
>
Installation
</h2>
<br/>
<h3>
Include required files
</h3>
...
...
@@ -137,42 +215,128 @@
<code>
head
</code>
tag.
</p>
<pre>
<code
class=
"html"
>
<
link rel="stylesheet" href="css/citrus-slider.min.css"
>
<
script src="js/citrus-slider.min.js?v=1.0.31"
>
<
/script
>
<
link rel="stylesheet" href="css/citrus-slider.min.css"
>
<
script src="js/citrus-slider.min.js?v=1.0.31"
>
<
/script
>
</code>
</pre>
<h3>
Add markup
</h3>
<p>
A simple container
<code>
<
div
>
</code>
, with each child
<code>
<
div
>
</code>
as a separate slide. The first
<code>
<
img
>
</code>
tag will be used as the slide background image.
</p>
<pre>
<code
class=
"html"
>
<
div class="citrus-slider"
>
<
div
><
img src="img/slide-1.jpg"
><
/div
>
<
div
><
img src="img/slide-2.jpg"
><
/div
>
<
div
><
img src="img/slide-3.jpg"
><
/div
>
<
/div
>
<
div class="citrus-slider"
>
<
div
><
img src="img/slide-1.jpg"
><
/div
>
<
div
><
img src="img/slide-2.jpg"
><
/div
>
<
div
><
img src="img/slide-3.jpg"
><
/div
>
<
/div
>
</code>
</pre>
<h3>
Add desired text
</h3>
<h3>
Add desired content
</h3>
<p>
This can include even include other images. Remember that the first image will be used as the slide background.
</p>
<pre>
<code
class=
"html"
>
<
div class="citrus-slider"
>
<
div
><
img src="img/slide-1.jpg"
><
h2
>
Slide 1
<
/h2
><
/div
>
<
div
><
img src="img/slide-2.jpg"
><
h2
>
Slide 2
<
/h2
><
/div
>
<
div
><
img src="img/slide-3.jpg"
><
h2
>
Slide 3
<
/h2
><
/div
>
<
/div
>
<
div class="citrus-slider"
>
<
div
><
img src="img/slide-1.jpg"
><
h2
>
Slide 1
<
/h2
><
/div
>
<
div
><
img src="img/slide-2.jpg"
><
h2
>
Slide 2
<
/h2
><
/div
>
<
div
><
img src="img/slide-3.jpg"
><
h2
>
Slide 3
<
/h2
><
/div
>
<
/div
>
</code>
</pre>
<h3>
Customize settings
</h3>
<p>
Add
<code>
data-citrus
</code>
followed by a JSON string of the
<a
href=
"#settings"
>
settings
</a>
you would like to change.
</p>
<pre>
<code
class=
"html"
>
<
div class="citrus-slider" data-citrus='{"duration" : 4000, "transition" : "pan"}'
>
<
div
><
img src="img/slide-1.jpg"
><
/div
>
<
div
><
img src="img/slide-2.jpg"
><
/div
>
<
div
><
img src="img/slide-3.jpg"
><
/div
>
<
/div
>
<
div class="citrus-slider" data-citrus='{"duration" : 4000, "transition" : "pan"}'
>
<
div
><
img src="img/slide-1.jpg"
><
/div
>
<
div
><
img src="img/slide-2.jpg"
><
/div
>
<
div
><
img src="img/slide-3.jpg"
><
/div
>
<
/div
>
</code>
</pre>
</div>
</section>
</section>
<hr
class=
"my-4"
>
<br/>
<section>
<h2
id=
"settings"
class=
"display-4"
>
Settings
</h2>
<br>
<table
class=
"table table-striped"
>
<thead>
<tr>
<th
scope=
"col"
>
Key
</th>
<th
scope=
"col"
>
Value
</th>
<th
scope=
"col"
>
Default
</th>
<th
scope=
"col"
>
Description
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
slideTransition
</td>
<td>
'pan', 'zoom-fade', 'scope', 'fallaway', 'downandout'
</td>
<td>
'pan'
</td>
<td>
Slide transition animation
</td>
</tr>
<tr>
<td>
slideIndex
</td>
<td>
1,2,3 etc.
</td>
<td>
1
</td>
<td>
Indicate which slide the slider should start on
</td>
</tr>
<tr>
<td>
slideDuration
</td>
<td>
number in ms (e.g 5000)
</td>
<td>
5000
</td>
<td>
Delay between slide transitions
</td>
</tr>
<tr>
<td>
effect
</td>
<td>
true, false
</td>
<td>
true
</td>
<td>
Enable or disable slide resting animation
</td>
</tr>
<tr>
<td>
effectType
</td>
<td>
'zoom', 'pan'
</td>
<td>
'zoom'
</td>
<td>
Slide resting animation type
</td>
</tr>
<tr>
<td>
animateText
</td>
<td>
true, false
</td>
<td>
true
</td>
<td>
Enable or disable slide content animating in after slide transition
</td>
</tr>
<tr>
<td>
showIndicators
</td>
<td>
true, false
</td>
<td>
true
</td>
<td>
Enable or disable slide indicators
</td>
</tr>
<tr>
<td>
showArrows
</td>
<td>
true, false
</td>
<td>
true
</td>
<td>
Enable or disable slide arrows
</td>
</tr>
<tr>
<td>
paused
</td>
<td>
true, false
</td>
<td>
false
</td>
<td>
Enable or disable automatic, timed slide transition
</td>
</tr>
<tr>
<td>
autoPause
</td>
<td>
true, false
</td>
<td>
true
</td>
<td>
Enable or disable automatic pausing (e.g. when user interacts with slider)
</td>
</tr>
</tbody>
</table>
</section>
</div>
<footer
id=
"site-footer"
class=
"footer"
>
<div
class=
"container"
>
...
...
@@ -191,6 +355,21 @@
<!-- citrus-Slider JS -->
<script
src=
"js/citrus-slider.min.js?v=1.0.31"
></script>
<script>
var
settings
=
document
.
getElementById
(
"
demo-settings
"
).
querySelectorAll
(
"
.dropdown-item
"
)
var
slider
=
sliderObject
[
0
].
settings
for
(
let
i
=
0
;
i
<
settings
.
length
;
i
++
)
{
settings
[
i
].
addEventListener
(
'
click
'
,
function
(
e
)
{
e
.
preventDefault
()
var
update
=
JSON
.
parse
(
e
.
target
.
dataset
.
settings
)
for
(
const
key
of
Object
.
keys
(
update
))
{
slider
[
key
]
=
update
[
key
]
}
sliderInit
(
sliderObject
[
0
],
clearTimeouts
(
sliderObject
[
0
]),
autoSlide
(
sliderObject
[
0
]))
})
}
</script>
<!-- highlight.js -->
<script
src=
"https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"
></script>
<script>
...
...
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