Post by Elli on Dec 29, 2019 11:28:31 GMT -7
Simple Slider
A simple slider component with next/previous navigation arrows that appear on hover. No limit on the number of slides. Not animated.
HTML
CSS
JavaScript
HTML
<div class="simple-slider">
<div class="simple-slider__navigation">
<button id="js-prev-arrow" title="Previous Slide" class="simple-slider__navigation-arrow simple-slider__navigation-arrow--left">
<i class="fas fa-arrow-left" aria-hidden="true"></i>
</button>
<button id="js-next-arrow" title="Next Slide" class="simple-slider__navigation-arrow simple-slider__navigation-arrow--right">
<i class="fas fa-arrow-right" aria-hidden="true"></i>
</button>
</div>
<!-- Containing div needed for script -->
<div>
<div class="simple-slider__slide simple-slider__slide--active">
Slide 1
</div>
<div class="simple-slider__slide">
Slide 2
</div>
<div class="simple-slider__slide">
Slide 3
</div>
<div class="simple-slider__slide">
Slide 4
</div>
</div>
</div>
CSS
/* ======================================================
* Simple Slider
* ====================================================== */
/*
* 1. Height of the slider, should have same height as
* `.simple-slider__slide`
*/
.simple-slider {
background-color: #fff;
height: 200px; /* 1 */
margin: 0 auto;
padding: 10px;
position: relative;
width: 1200px;
}
/* Slider Navigation
* ====================================================== */
.simple-slider__navigation {
left: 0;
opacity: 0;
position: absolute;
right: 0;
top: ~"calc(50% + 20px)";
-webkit-transition: opacity 0.4s ease;
-o-transition: opacity 0.4s ease;
transition: opacity 0.4s ease;
}
.simple-slider:hover .simple-slider__navigation,
.simple-slider:focus .simple-slider__navigation {
opacity: 1;
}
.simple-slider__navigation-arrow {
background-color: #f1f1f1;
border: 0;
color: #000;
display: none;
font-size: 24px;
height: 50px;
line-height: 1;
padding: 12px 14px;
position: absolute;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
width: 50px;
}
.simple-slider__navigation-arrow:hover,
.simple-slider__navigation-arrow:focus {
background-color: #000;
color: #fff;
}
.simple-slider__navigation-arrow--left {
left: 0;
}
.simple-slider__navigation-arrow--right {
right: 0;
}
/* Slides
* ====================================================== */
/*
* 1. Height of the slider, should have same height as
* `.simple-slider`
*/
.simple-slider__slide {
display: none;
height: 200px; /* 1 */
}
.simple-slider__slide--active {
display: block;
}
JavaScript
<script>
$(function() {
// Simple Slider
(function simpleSlider() {
var currentSlideIndex = 0;
var $prevArrow = $('#js-prev-arrow');
var $nextArrow = $('#js-next-arrow');
function slide(index) {
if ($('.simple-slider__slide:eq(' + index + ')').length) {
$('.simple-slider__slide').removeClass('simple-slider__slide--active');
$('.simple-slider__slide:eq(' + index + ')').addClass('simple-slider__slide--active');
currentSlideIndex = index;
toggleNavigation();
}
}
function prevSlide() {
slide(currentSlideIndex - 1);
}
function nextSlide() {
slide(currentSlideIndex + 1);
}
function toggleNavigation() {
var isFirstSlide = currentSlideIndex === 0;
var isLastSlide = currentSlideIndex === $('.simple-slider__slide').length - 1;
if (isFirstSlide) {
$prevArrow.hide();
} else {
$prevArrow.show();
}
if (isLastSlide) {
$nextArrow.hide();
} else {
$nextArrow.show();
}
}
toggleNavigation();
$prevArrow.on('click', prevSlide);
$nextArrow.on('click', nextSlide);
})();
});
</script>