Galarie
Pure CSS, No JS. As simple as that.
Custom controls at an #anchors distance
Its pure HTML & CSS, so the sky is the limit
Get it together
What you need to get started
-
Include
galarie.css
&galarie.theme.css
<link rel="stylesheet" href="css/galarie.theme.css"> <link rel="stylesheet" href="css/galarie.min.css">
-
Mark up your carousel
<div class="galarie items-3"> <div id="item-1" class="control-operator"></div> <div id="item-2" class="control-operator"></div> <div id="item-3" class="control-operator"></div> <figure class="item"> <h1>1</h1> </figure> <figure class="item"> <h1>2</h1> </figure> <figure class="item"> <h1>3</h1> </figure> <div class="controls"> <a href="#item-1" class="control-button">•</a> <a href="#item-2" class="control-button">•</a> <a href="#item-3" class="control-button">•</a> </div> </div>
Want your carousel to autoplay? Add the
autoplay
class!<div class="galarie autoplay items-3">