[keep] $slider.find issue 2
HTML
<div class="b-slider" data-slider>
<div class="b-slider__arrow b-slider__arrow_l" data-slider-prev>←</div>
<div class="b-slider__arrow b-slider__arrow_r" data-slider-next>→</div>
<div data-slide data-content="1.1"></div>
<div data-slide data-content="1.2"></div>
<div data-slide data-content="1.3"></div>
</div>
SCSS
.b-slider {
width: 100px;
height: 100px;
position: relative;
background: rgba(0,0,0,0.5);
margin: 5%;
padding: 5%;
}
[data-slide] {
padding-top: 30px;
background: rgba(175,175,175,0.5);
text-align: center;
position: absolute;
top: 10px;
left: 10px;
bottom: 10px;
right: 10px;
display: none;
z-index: 1;
}
.b-slider__arrow {
background: #fff;
opacity: .3;
height: 100%;
width: 10%;
z-index: 10;
position: absolute;
top: 0;
bottom: 0;}
.b-slider__arrow:hover {
cursor: pointer;
opacity: 1;
}
.b-slider__arrow_l {
left: 0;
}
.b-slider__arrow_r {
right: 0;
}
JavaScript
// Slider function itself.
function slider( _direction ) {
var $slide = $('[data-slide]'),
$inactive = $('[data-slide]:not([data-slide-active])'),
$active = $('[data-slide][data-slide-active]');
if ( $active.length == 0 ) var $active = $slide.first();
var content = $active.attr('data-content');
// Functions for loaded slider.
if ( _direction == 'load') {
$inactive.hide();
$active.show()
.text(content)
.attr('data-slide-active', '');
}
// Functions for any slider button.
else {
$inactive.hide();
// Functions for next slider button.
if ( _direction == 'next') {
var $next = $active.next('[data-slide]').length ? $active.next('[data-slide]')
: $slide.first();
}
// Functions for prev. slider button.
else if ( _direction == 'prev') {
var $next = $active.prev('[data-slide]').length ? $active.prev('[data-slide]')
: $slide.last();
}
// Functions for any slider action.
$next.show()
.text(content)
.attr('data-slide-active', '');
$active.hide().removeAttr('data-slide-active');
}
}
// Slider loaded
$('[data-slider-next]').ready(function() {
slider('load');
});
// & next button
var $slider_next_btn = $('div[data-slider-next]');
$($slider_next_btn).on('click', function() {
slider('next');
});
// & prev. button
var $slider_prev_btn = $('[data-slider-prev]');
$(document).on('click', $slider_prev_btn, function() {
slider('prev');
});