Commit 4a2d6a63 authored by Michael Iseard's avatar Michael Iseard
Browse files

bug fixes + add image credit

parent 496a334c
......@@ -11,7 +11,7 @@
crossorigin="anonymous">
<!-- Citrus-Slider CSS -->
<link rel="stylesheet" type="text/css" href="css/citrus-slider.min.css?v=1.0.4">
<link rel="stylesheet" type="text/css" href="css/citrus-slider.min.css?v=1.0.41">
<!-- highlightjs -->
<link rel="stylesheet" href="css/highlightjs.css">
......@@ -30,6 +30,15 @@
font-family: 'Open Sans', sans-serif;
}
.slide::before {
content: '';
background: #000;
position: absolute;
width: 100%;
height: 100%;
opacity: 0.2;
}
.btn-primary,
.btn-primary:hover,
.btn-primary:active,
......@@ -68,7 +77,7 @@
<nav id="main-nav" class="navbar navbar-expand-lg navbar-light rounded">
<div class="container">
<!-- <img src="img/logo.svg" width="30" height="30" class="d-inline-block align-top" alt=""> -->
<img src="img/logo.svg" width="30" height="30" class="d-inline-block align-top" alt="">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-item nav-link" href="#installation">Installation</a>
......@@ -96,10 +105,10 @@
<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.3.zip" role="button">Download</a>
<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.3</p>
<p>v1.0.4</p>
</div>
<div class="col d-none d-lg-block">
<img src="img/logo.svg?v1.0" width="300px" height="300px" class="d-inline-block align-top" alt="">
......@@ -117,7 +126,10 @@
<div>
<img src="img/2.png?v=1.0.0">
<h2>Highly configurable</h2>
<p>Lots of options</p>
<br>
<div style="text-align: center;">
<a class="btn btn-primary" href="#settings">Settings</a>
</div>
</div>
<div>
<img src="img/3.png?v=1.0.0">
......@@ -126,84 +138,90 @@
<div>
<img src="img/4.png?v=1.0.0">
<h2>Find out more below</h2>
<br>
<div style="text-align: center;">
<a class="btn btn-primary" href="#installation">Installation</a>
</div>
</div>
</div>
<br>
<div id="demo-settings">
<div class="btn-group">
<button class="btn btn-outline-dark 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>
<p class="small text-right">Images courtesy of
<a target="_blank" href="https://www.junkanoomedia.com">Junkanoo Media</a>
</p>
<div id="demo-settings" class="row justify-content-center d-none d-lg-flex">
<div class="btn-group col-md-auto">
<button class="btn btn-outline-dark 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 class="btn-group">
<button class="btn btn-outline-dark 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 col-md-auto">
<button class="btn btn-outline-dark 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 class="btn-group">
<button class="btn btn-outline-dark 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 col-md-auto">
<button class="btn btn-outline-dark 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 class="btn-group">
<button class="btn btn-outline-dark 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 col-md-auto">
<button class="btn btn-outline-dark 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 class="btn-group">
<button class="btn btn-outline-dark 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 col-md-auto">
<button class="btn btn-outline-dark 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 class="btn-group">
<button class="btn btn-outline-dark 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 col-md-auto">
<button class="btn btn-outline-dark 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 class="btn-group">
<button class="btn btn-outline-dark 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 class="btn-group col-md-auto">
<button class="btn btn-outline-dark 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/>
......@@ -353,22 +371,22 @@
crossorigin="anonymous"></script>
<!-- citrus-Slider JS -->
<script src="js/citrus-slider.min.js?v=1.0.41"></script>
<script src="js/citrus-slider.min.js?v=1.0.42"></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>
var settings = document.getElementById("demo-settings").querySelectorAll(".dropdown-item")
var slider = sliderObjects[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]
}
sliderObjects[0].reset()
})
}
</script>
<!-- highlight.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></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