Commit a6d5f64b authored by Michael Iseard's avatar Michael Iseard
Browse files

add methods, extra settings and layout changes

parent 5de14215
......@@ -24,7 +24,7 @@
crossorigin="anonymous">
<!-- Citrus-Slider CSS -->
<link rel="stylesheet" type="text/css" href="css/citrus-slider.min.css?v=1.0.5">
<link rel="stylesheet" type="text/css" href="css/citrus-slider.min.css?v=1.0.6">
<!-- highlightjs -->
<link rel="stylesheet" href="css/highlightjs.css">
......@@ -43,9 +43,9 @@
font-family: 'Open Sans', sans-serif;
}
.slide-text > * {
.slide-text>* {
font-weight: 700;
text-shadow: 1px 1px 6px #222;
text-shadow: 1px 1px 1px #222;
}
.btn-primary,
......@@ -67,12 +67,18 @@
#intro {
background-color: #59acff;
color: #fff;
padding-bottom: 264px;
}
#intro hr {
border-top: 1px solid rgba(255, 255, 255, 0.53);
}
#slider-demo-1 {
margin-top: -232px;
border: 10px solid #fff;
}
#site-footer {
background-color: #59acff;
color: #fff;
......@@ -84,9 +90,14 @@
<body>
<nav id="main-nav" class="navbar navbar-expand-lg navbar-light rounded">
<nav id="main-nav" class="navbar navbar-expand-lg navbar-light">
<div class="container">
<img src="img/logo.svg?v1.1" width="30" height="30" class="d-inline-block align-top" alt="">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-item nav-link" href="#installation">Installation</a>
......@@ -94,6 +105,9 @@
<li class="nav-item">
<a class="nav-item nav-link" href="#settings">Settings</a>
</li>
<li class="nav-item">
<a class="nav-item nav-link" href="#methods">Methods</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
......@@ -104,6 +118,7 @@
</li>
</ul>
</div>
</div>
</nav>
<div id="intro" class="jumbotron jumbotron-fluid">
<div class="container">
......@@ -114,10 +129,12 @@
<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/Citrus-Slider/archive/1.0.5.zip" role="button">Download</a>
<a class="btn btn-primary btn-lg" href="https://gitea.iseardmedia.com/michael/Citrus-Slider/archive/1.0.6.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>
<span>v1.0.5 <span class="badge badge-primary">beta</span></span>
<span>v1.0.6
<span class="badge badge-danger">beta</span>
</span>
</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="">
......@@ -130,27 +147,27 @@
<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>
<!-- <h2>Light, fast and free</h2> -->
</div>
<div>
<img src="img/2.png?v=1.0.0">
<h2>Highly configurable</h2>
<!-- <h2>Highly configurable</h2>
<br>
<div style="text-align: center;">
<a class="btn btn-primary" href="#settings">Settings</a>
</div>
</div> -->
</div>
<div>
<img src="img/3.png?v=1.0.0">
<h2>Put any text here you want</h2>
<!-- <h2>Put any text here you want</h2> -->
</div>
<div>
<img src="img/4.png?v=1.0.0">
<h2>Find out more below</h2>
<!-- <h2>Find out more below</h2>
<br>
<div style="text-align: center;">
<a class="btn btn-primary" href="#installation">Installation</a>
</div>
</div> -->
</div>
</div>
<p class="small text-right">Images courtesy of
......@@ -163,11 +180,12 @@
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": "downandout"}' href="#">Downandout</a>
<a class="dropdown-item" data-settings='{"slideTransition": "fallaway"}' href="#">Fallaway</a>
<a class="dropdown-item" data-settings='{"slideTransition": "pan"}' href="#">Pan</a>
<a class="dropdown-item" data-settings='{"slideTransition": "scope"}' href="#">Scope</a>
<a class="dropdown-item" data-settings='{"slideTransition": "downandout"}' href="#">Downandout</a>
<a class="dropdown-item" data-settings='{"slideTransition": "slide"}' href="#">Slide</a>
<a class="dropdown-item" data-settings='{"slideTransition": "zoom-fade"}' href="#">Zoom-fade</a>
</div>
</div>
<div class="btn-group col-md-auto">
......@@ -312,6 +330,12 @@
<td>'100%'</td>
<td>Sets the height of the slider</td>
</tr>
<tr>
<td>animationDuration</td>
<td>number in seconds</td>
<td>0.8</td>
<td>Determines how long the animation should take when transitioning slides</td>
</tr>
<tr>
<td>autoHeight</td>
<td>true, false</td>
......@@ -381,6 +405,57 @@
</tbody>
</table>
</section>
<section>
<h2 id="methods" class="display-4">Methods</h2>
<br>
<p>Invoking
<code>citrus</code> will return a slider object with various methods. This will allow you to programmatically control
the slider. For example, to reset the slider you would use
<code>citrus[0].reset()</code>. The
<code>[0]</code> represents the index of the slider. If you have more than one slider on a page you will need to
change this to the slider you intend to target.</p>
<table class="table table-striped table-bordered">
<thead>
<tr>
<th scope="col">Method</th>
<th scope="col">Description</th>
<th scope="col">Example</th>
</tr>
</thead>
<tbody>
<tr>
<td>play()</td>
<td>Unpauses and starts the automatic slideshow</td>
<td>citrus[0].play()</td>
</tr>
<tr>
<td>stop()</td>
<td>Stops and pauses the automatic slideshow</td>
<td>citrus[0].stop()</td>
</tr>
<tr>
<td>prevSlide()</td>
<td>Goes to the previous slide in the sequence</td>
<td>citrus[0].prevSlide()</td>
</tr>
<tr>
<td>nextSlide()</td>
<td>Goes to the next slide in the sequence</td>
<td>citrus[0].nextSlide()</td>
</tr>
<tr>
<td>gotoSlide()</td>
<td>Goes to the specified slide in the sequence</td>
<td>citrus[0].gotoSlide(2)</td>
</tr>
<tr>
<td>reset()</td>
<td>Resets slider by rebuilding and resetting status</td>
<td>citrus[0].reset()</td>
</tr>
</tbody>
</table>
</section>
</div>
<footer id="site-footer" class="footer">
......@@ -398,11 +473,11 @@
crossorigin="anonymous"></script>
<!-- citrus-Slider JS -->
<script src="js/citrus-slider.min.js?v=1.0.5"></script>
<script src="js/citrus-slider.min.js?v=1.0.6"></script>
<script>
var settings = document.getElementById("demo-settings").querySelectorAll(".dropdown-item")
var slider = getSliders[0].settings
var slider = citrus[0].settings
for (let i = 0; i < settings.length; i++) {
settings[i].addEventListener('click', function (e) {
e.preventDefault()
......@@ -410,7 +485,7 @@
for (const key of Object.keys(update)) {
slider[key] = update[key]
}
getSliders[0].reset()
citrus[0].reset()
})
}
</script>
......
Markdown is supported
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