Skip to content

Instantly share code, notes, and snippets.

@55sketch

55sketch/Fluid-No-JS-LESS-Slider.markdown

Created July 21, 2014 09:46
Show Gist options
  • Save 55sketch/9f51f69281dfb28c10cd to your computer and use it in GitHub Desktop.
Save 55sketch/9f51f69281dfb28c10cd to your computer and use it in GitHub Desktop.
Download ZIP
A Pen by Nick Moreton.
Raw
Fluid-No-JS-LESS-Slider.markdown

Fluid No-JS LESS Slider

Using checkbox hack and LESS loop to output CSS in order to 'place' previous and next slides, based on total number of slides

A Pen by Nick Moreton on CodePen.

License.

Raw
index.html
<h1>Fluid No-JS LESS Slider</h1>
<p>Slider built using the CSS checkbox hack and LESS loops to control colours and slide positioning</p>
<div class="slider">
<!-- 'fa' classes are for Font Awesome icons http://fontawesome.io -->
<input type="radio" id="control-1" name="slider-control" checked>
<label for="control-1" class="fa fa-circle-o"></label>
<label for="control-1" class="fa fa-circle"></label>
<input type="radio" id="control-2" name="slider-control">
<label for="control-2" class="fa fa-circle-o"></label>
<label for="control-2" class="fa fa-circle"></label>
<input type="radio" id="control-3" name="slider-control">
<label for="control-3" class="fa fa-circle-o"></label>
<label for="control-3" class="fa fa-circle"></label>
<input type="radio" id="control-4" name="slider-control">
<label for="control-4" class="fa fa-circle-o"></label>
<label for="control-4" class="fa fa-circle"></label>
<input type="radio" id="control-5" name="slider-control">
<label for="control-5" class="fa fa-circle-o"></label>
<label for="control-5" class="fa fa-circle"></label>
<div class="slide" id="slide-1">
<label for="control-5" class="fa fa-chevron-left fa-4x previous"></label>
<label for="control-2" class="fa fa-chevron-right fa-4x next"></label>
</div>
<div class="slide" id="slide-2">
<label for="control-1" class="fa fa-chevron-left fa-4x previous"></label>
<label for="control-3" class="fa fa-chevron-right fa-4x next"></label>
</div>
<div class="slide" id="slide-3">
<label for="control-2" class="fa fa-chevron-left fa-4x previous"></label>
<label for="control-4" class="fa fa-chevron-right fa-4x next"></label>
</div>
<div class="slide" id="slide-4">
<label for="control-3" class="fa fa-chevron-left fa-4x previous"></label>
<label for="control-5" class="fa fa-chevron-right fa-4x next"></label>
</div>
<div class="slide" id="slide-5">
<label for="control-4" class="fa fa-chevron-left fa-4x previous"></label>
<label for="control-1" class="fa fa-chevron-right fa-4x next"></label>
</div>
</div>
Raw
script.js
/* For automation, remove comments - animation cycles through and checks radio buttons. Slider pauses and plays on mouseenter/mouseleave
$(document).ready(function(){
var time = 4000;
var index = 1;
var count = $('.slide').length;
function slide() {
if (index > count)
index = 1;
$("#control-"+index).click();
index++;
}
var slider = setInterval(slide,time);
$('.slider').mouseenter(function(){
clearInterval(slider);
slider = null;
});
$('.slider').mouseleave(function(){
slider = setInterval(slide,time);
});
});
*/
Raw
style.less
//LESS
//Match number of slides
@slides: 5;
// Set up 'spin' degree for a range of colours
@degree: 360/@slides;
// Set up base color
@base: #ff0000;
// Loop for main slide
.i-loop (@i) when (@i > 0) {
// Background color of each slide
#slide-@{i}{
background: spin(@base,(@i * @degree));
}
// Dot colour
#control-@{i} ~ label[for="control-@{i}"] {
color: spin(@base,(@i * @degree));
}
// Show full dot when checked
#control-@{i}:checked ~ label[for="control-@{i}"].fa-circle {
display:inline-block;
}
// Hide hollow dot
#control-@{i}:checked ~ label[for="control-@{i}"].fa-circle-o {
display:none;
}
// Show 'checked' slide
input[type=radio]#control-@{i}:checked ~ div#slide-@{i} {
left:0;
}
// Loop for all previous slides up to @i variable
@maxj: @i - 1;
.j-loop (@j) when (@j > 0 ) {
//Place slides off to the left
input[type=radio]#control-@{i}:checked ~ div#slide-@{j} {
left:((@i - @j) * -100%);
}
.j-loop(@j - 1);
}
.j-loop (0) {}
.j-loop(@maxj);
// Loop for all 'next' slides from @i up to total @slides
@maxk: @slides;
.k-loop (@k) when (@k > @i ) {
// place slides off to the right
input[type=radio]#control-@{i}:checked ~ div#slide-@{k} {
left:((@k - @i) * 100%);
}
.k-loop(@k - 1);
}
.k-loop (0) {}
.k-loop(@maxk);
.i-loop(@i - 1);
}
.i-loop (0) {}
.i-loop(@slides);
// See http://stackoverflow.com/questions/17011090/how-do-i-create-nested-loops-with-less-css for more information on nested loops
// CSS
* {
box-sizing:border-box;
}
body {
text-align:center;
padding-bottom:30px;
}
input[type=radio] {
position: absolute;
top: -9999px;
left: -9999px;
}
label {
margin: 10px 0;
cursor: pointer;
}
.slider {
// Width can be changed, slides will automatically resize
width:100%;
margin:auto;
height:400px;
overflow:hidden;
position:relative;
}
.slide {
width:100%;
height:400px;
position:absolute;
transition: left ease-in-out 500ms;
color:white;
}
.previous {
float:left;
margin-top:160px;
display:block;
opacity:0;
transition: opacity ease-in-out 300ms;
}
.slide:hover > .previous {
opacity:0.6;
}
.previous:hover{
opacity:1 !important;
}
.next {
float:right;
margin-top:160px;
display:block;
opacity:0;
transition: opacity ease-in-out 300ms;
}
.slide:hover > .next {
opacity:0.6;
}
.next:hover{
opacity:1 !important;
}
.fa-circle {
display:none;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment