Skip to content
GitLab
Commit 0f279b0c authored by Michael Iseard's avatar Michael Iseard
Browse files

add Settings section and controls to demo

parent 2beedb34
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">
&lt;link rel="stylesheet" href="css/citrus-slider.min.css"&gt;
&lt;script src="js/citrus-slider.min.js?v=1.0.31"&gt; &lt;/script&gt;
&lt;link rel="stylesheet" href="css/citrus-slider.min.css"&gt;
&lt;script src="js/citrus-slider.min.js?v=1.0.31"&gt; &lt;/script&gt;
</code>
</pre>
<h3>Add markup</h3>
<p>A simple container
<code>&lt;div&gt;</code>, with each child
<code>&lt;div&gt;</code> as a separate slide. The first
<code>&lt;img&gt;</code> tag will be used as the slide background image.</p>
<pre>
<code class="html">
&lt;div class="citrus-slider"&gt;
&lt;div&gt;&lt;img src="img/slide-1.jpg"&gt;&lt;/div&gt;
&lt;div&gt;&lt;img src="img/slide-2.jpg"&gt;&lt;/div&gt;
&lt;div&gt;&lt;img src="img/slide-3.jpg"&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;div class="citrus-slider"&gt;
&lt;div&gt;&lt;img src="img/slide-1.jpg"&gt;&lt;/div&gt;
&lt;div&gt;&lt;img src="img/slide-2.jpg"&gt;&lt;/div&gt;
&lt;div&gt;&lt;img src="img/slide-3.jpg"&gt;&lt;/div&gt;
&lt;/div&gt;
</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">
&lt;div class="citrus-slider"&gt;
&lt;div&gt;&lt;img src="img/slide-1.jpg"&gt;&lt;h2&gt;Slide 1&lt;/h2&gt;&lt;/div&gt;
&lt;div&gt;&lt;img src="img/slide-2.jpg"&gt;&lt;h2&gt;Slide 2&lt;/h2&gt;&lt;/div&gt;
&lt;div&gt;&lt;img src="img/slide-3.jpg"&gt;&lt;h2&gt;Slide 3&lt;/h2&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;div class="citrus-slider"&gt;
&lt;div&gt;&lt;img src="img/slide-1.jpg"&gt;&lt;h2&gt;Slide 1&lt;/h2&gt;&lt;/div&gt;
&lt;div&gt;&lt;img src="img/slide-2.jpg"&gt;&lt;h2&gt;Slide 2&lt;/h2&gt;&lt;/div&gt;
&lt;div&gt;&lt;img src="img/slide-3.jpg"&gt;&lt;h2&gt;Slide 3&lt;/h2&gt;&lt;/div&gt;
&lt;/div&gt;
</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">
&lt;div class="citrus-slider" data-citrus='{"duration" : 4000, "transition" : "pan"}'&gt;
&lt;div&gt;&lt;img src="img/slide-1.jpg"&gt;&lt;/div&gt;
&lt;div&gt;&lt;img src="img/slide-2.jpg"&gt;&lt;/div&gt;
&lt;div&gt;&lt;img src="img/slide-3.jpg"&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;div class="citrus-slider" data-citrus='{"duration" : 4000, "transition" : "pan"}'&gt;
&lt;div&gt;&lt;img src="img/slide-1.jpg"&gt;&lt;/div&gt;
&lt;div&gt;&lt;img src="img/slide-2.jpg"&gt;&lt;/div&gt;
&lt;div&gt;&lt;img src="img/slide-3.jpg"&gt;&lt;/div&gt;
&lt;/div&gt;
</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>
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment