Last active
November 9, 2016 15:27
-
-
Save juanbrujo/23a7b5c31eee411ac1e85f7b9f73e33d to your computer and use it in GitHub Desktop.
fullSlider: small, vanilla JS fullwidth slideshow used in BeerJS.cl website
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.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; | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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">«</span> | |
<span class="next">»</span> | |
</div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* 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