<article class="slider_item active"
data-slider-bg="file:///C:/Users/Lenovo/Desktop/zm/img/slide/image__5.png">
</article>
<article class="slider_item"
data-slider-bg="file:///C:/Users/Lenovo/Desktop/zm/img/slide/image__7.png">
</article>
<article class="slider_item"
data-slider-bg="file:///C:/Users/Lenovo/Desktop/zm/img/slide/image__8.png">
</article>
</div>
<div class="slider-prev"><</div>
<div class="slider-next">></div>
</section><code lang="html">
</code>
.slider {
display: block;
width: 100%;
float: left;
position: absolute;
}
.slider .slider_item {
display: block;
float: left;
width: 100%;
height: 600px;
background-size: cover;
background-position: center;
background-color: #fff;
position: absolute;
transition-property: all;
transition-duration: 0.5s;
transition-timing-function: ease-in;
transition-delay: 0.3s;
opacity: 0;
}
.slider .slider_item.active {
opacity: 1;
}
.slider .slider_item img {
width: 100%;
display: block;
float: left;
}
.slider .slider_box {
float: left;
width: 100%;
height: 100%;
position: relative;
}
.slider .slider_content {
display: block;
float: left;
width: 100%;
height: 100%;
padding: 150px 20% 15px 20%;
background: rgba(0, 0, 0, 0.38);
position: absolute;
bottom: 0;
left: 0;
text-align: center;
}
.slider .slider_content h2 {
font-size: 3.5em;
color: #fff;
text-transform: uppercase;
padding-bottom: 45px;
font-weight: bold;
transition-property: all;
transition-duration: 0.8s;
transition-timing-function: ease-in;
transition-delay: 0.3s;
}
.slider .slider_content p {
display: block;
float: left;
width: 100%;
color: #fff;
font-size: 1.8em;
font-weight: lighter;
text-align: center;
transition-property: all;
transition-duration: 0.8s;
transition-timing-function: ease-in;
transition-delay: 0.8s;
}
.slider .active h2,
.slider .active p {
top: 0;
opacity: 1;
}
.slider-next,
.slider-prev {
width: 120px;
height: 120px;
color: #fff;
text-align: center;
font-size: 3em;
line-height: 120px;
font-weight: lighter;
border-radius: 100px;
background: rgba(0, 0, 0, 0.5);
position: absolute;
top: 220px;
left: 15px;
z-index: 99;
}
.slider-next {
right: 15px;
left: auto;
z-index: 100;
}
.slider-next:hover,
.slider-prev:hover {
background: rgba(0, 0, 0, 0.8);
transition-property: all;
transition-duration: 0.5s;
transition-timing-function: ease-out;
transition-delay: 0.2s;
cursor: pointer;
}
(function ($) {
(function ($) {
$('.slider_item').each(function () {
var sliderBg = $(this).data('slider-bg');
$(this).css({ 'background-image': 'url(' + sliderBg + ')' });
});
}(jQuery));
var nextSlider = function () {
if ($('.slider_item.active').next('.slider_item').size()) {
$('.slider_item.active').each(function () {
$(this).next('.slider_item').addClass('active');
$(this).removeClass('active');
});
} else {
$('.slider_item.active').each(function () {
$('.slider_item').removeClass('active');
$('.slider_item:eq(0)').addClass('active');
});
}
}
var prevSlider = function () {
if ($('.slider_item.active').index() > 1) {
$('.slider_item.active').each(function () {
$(this).prev('.slider_item').addClass('active');
$(this).removeClass('active');
});
} else {
$('.slider_item.active').each(function () {
$('.slider_item').removeClass('active');
$('.slider_item:last-of-type').addClass('active');
});
}
}
var sliderAuto = setInterval(nextSlider, 3000);
$('.slider_content, .slider-next, .slider-prev').hover(function () {
clearInterval(sliderAuto);
}, function () {
sliderAuto = setInterval(nextSlider, 3000);
});
$('.slider-next').click(function (event) {
event.preventDefault();
nextSlider();
});
$('.slider-prev').click(function (event) {
event.preventDefault();
prevSlider();
});
}(jQuery))
