Skip to content

Instantly share code, notes, and snippets.

@juanbrujo
Last active November 9, 2016 15:27
Show Gist options
  • Save juanbrujo/23a7b5c31eee411ac1e85f7b9f73e33d to your computer and use it in GitHub Desktop.
Save juanbrujo/23a7b5c31eee411ac1e85f7b9f73e33d to your computer and use it in GitHub Desktop.
fullSlider: small, vanilla JS fullwidth slideshow used in BeerJS.cl website
.fullSlider {
position: relative;
display: block;
overflow: hidden;
}
.fullSlider figure {
position: absolute;
opacity: 0;
margin: 0;
-webkit-transition: 1s opacity;
transition: 1s opacity;
}
.fullSlider figcaption {
position: absolute;
font-size: 1.8em;
bottom: .75em;
right: .35em;
padding: .25em .5em;
color: #fff;
background: rgba(0,0,0, .25);
border-radius: 4px;
}
.fullSlider figure.show {
opacity: 1;
position: static;
-webkit-transition: 1s opacity;
transition: 1s opacity;
}
.fullSlider .next,
.fullSlider .prev {
color: #fff;
position: absolute;
margin-top: -.75em;
padding: 10px 20px 15px 20px;
top: 50%;
z-index: 1;
background: rgba(0,0,0, .6);
font-size: 2em;
opacity: .3;
user-select: none;
}
.fullSlider .next:hover,
.fullSlider .prev:hover{
cursor: pointer;
opacity: 1;
}
.fullSlider .next{
right: 0;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
.fullSlider .prev{
left: 0;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
<div class="fullSlider">
<figure class="show"><!-- first must have this class, TBI -->
<img src="assets/ediciones/201611-cumplo.jpg" width="100%" />
<figcaption>Noviembre 2016 | Cumplo</figcaption>
</figure>
<figure>
<img src="assets/ediciones/201610-socialab.jpg" width="100%" />
<figcaption>Octubre 2016 | Socialab</figcaption>
</figure>
<figure>
<img src="assets/ediciones/201609-yapo.jpg" width="100%" />
<figcaption>Septiembre 2016 | Yapo.cl</figcaption>
</figure>
<span class="prev">&laquo;</span>
<span class="next">&raquo;</span>
</div>
/**
* fullSlider();
* License: MIT
*/
(function fullSlider(){
var counter = 0,
$items = document.querySelectorAll('.fullSlider figure'),
numItems = $items.length;
var showCurrent = function(){
var itemToShow = Math.abs(counter%numItems);
[].forEach.call( $items, function(el){
el.classList.remove('show');
});
$items[itemToShow].classList.add('show');
};
document.querySelector('.next').addEventListener('click', function() {
counter++;
showCurrent();
}, false);
document.querySelector('.prev').addEventListener('click', function() {
counter--;
showCurrent();
}, false);
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment