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
4912ac5d
Commit
4912ac5d
authored
Apr 13, 2018
by
Michael Iseard
Browse files
add additional settings
parent
5167554c
Changes
1
Hide whitespace changes
Inline
Side-by-side
index.html
View file @
4912ac5d
...
...
@@ -24,7 +24,7 @@
crossorigin=
"anonymous"
>
<!-- Citrus-Slider CSS -->
<link
rel=
"stylesheet"
type=
"text/css"
href=
"css/citrus-slider.min.css?v=1.0.
41
"
>
<link
rel=
"stylesheet"
type=
"text/css"
href=
"css/citrus-slider.min.css?v=1.0.
5
"
>
<!-- highlightjs -->
<link
rel=
"stylesheet"
href=
"css/highlightjs.css"
>
...
...
@@ -121,7 +121,7 @@
<a
class=
"btn btn-primary btn-lg"
href=
"https://gitea.iseardmedia.com/michael/citrus-Slider/archive/1.0.4.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.
4
</p>
<p>
v1.0.
5
</p>
</div>
<div
class=
"col d-none d-lg-block"
>
<img
src=
"img/logo.svg?v1.1"
width=
"300px"
height=
"300px"
class=
"d-inline-block align-top"
alt=
""
>
...
...
@@ -131,7 +131,7 @@
</div>
<div
class=
"container"
>
<section>
<div
id=
"slider-demo-1"
class=
"citrus-slider"
data-citrus=
'{"slideTransition" : "zoom-fade"}'
style=
"height: 400px;"
>
<div
id=
"slider-demo-1"
class=
"citrus-slider"
data-citrus=
'{
"height" : "400px",
"slideTransition" : "zoom-fade"}'
>
<div>
<img
src=
"img/1.png?v=1.0.0"
>
<h2>
Light, fast and free
</h2>
...
...
@@ -294,7 +294,7 @@
<section>
<h2
id=
"settings"
class=
"display-4"
>
Settings
</h2>
<br>
<table
class=
"table table-striped"
>
<table
class=
"table table-striped
table-bordered
"
>
<thead>
<tr>
<th
scope=
"col"
>
Key
</th>
...
...
@@ -304,6 +304,24 @@
</tr>
</thead>
<tbody>
<tr>
<td>
width
</td>
<td>
any valid css width (e.g 400px, 100%)
</td>
<td>
'100%'
</td>
<td>
Sets the width of the slider
</td>
</tr>
<tr>
<td>
height
</td>
<td>
any valid css height (e.g 400px, 100%)
</td>
<td>
'100%'
</td>
<td>
Sets the height of the slider
</td>
</tr>
<tr>
<td>
autoHeight
</td>
<td>
true, false
</td>
<td>
'100%'
</td>
<td>
Automatically sets the height of the slider based on the height of the content
</td>
</tr>
<tr>
<td>
slideTransition
</td>
<td>
'pan', 'zoom-fade', 'scope', 'fallaway', 'downandout'
</td>
...
...
@@ -384,11 +402,11 @@
crossorigin=
"anonymous"
></script>
<!-- citrus-Slider JS -->
<script
src=
"js/citrus-slider.min.js?v=1.0.
42
"
></script>
<script
src=
"js/citrus-slider.min.js?v=1.0.
5
"
></script>
<script>
var
settings
=
document
.
getElementById
(
"
demo-settings
"
).
querySelectorAll
(
"
.dropdown-item
"
)
var
slider
=
s
lider
Object
s
[
0
].
settings
var
slider
=
getS
liders
[
0
].
settings
for
(
let
i
=
0
;
i
<
settings
.
length
;
i
++
)
{
settings
[
i
].
addEventListener
(
'
click
'
,
function
(
e
)
{
e
.
preventDefault
()
...
...
@@ -396,7 +414,7 @@
for
(
const
key
of
Object
.
keys
(
update
))
{
slider
[
key
]
=
update
[
key
]
}
s
lider
Object
s
[
0
].
reset
()
getS
liders
[
0
].
reset
()
})
}
</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