162 lines
3.7 KiB
Vue
162 lines
3.7 KiB
Vue
<template lang="pug">
|
|
.container
|
|
.slider
|
|
.slide(data-slide='1' style="background-color: green")
|
|
.slide(data-slide='2' style="background-color: red")
|
|
.slide(data-slide='3' style="background-color: orange")
|
|
.slide.slide--active(data-slide='4' style="background-color: blue")
|
|
.slide(data-slide='5' style="background-color: violet")
|
|
.slide(data-slide='5' style="background-color: primary")
|
|
.slide(data-slide='5' style="background-color: pink")
|
|
.slide(data-slide='5' style="background-color: teal")
|
|
.controls
|
|
#back Back
|
|
#forvard Forvard
|
|
</template>
|
|
|
|
<script setup>
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
renderSlider('.slider');
|
|
});
|
|
|
|
const nextSlide = () => {
|
|
let activeSlide = document.querySelector('.slide--active');
|
|
let nextSlide = activeSlide.nextElementSibling;
|
|
if (nextSlide) {
|
|
activeSlide.classList.remove('slide--active');
|
|
nextSlide.classList.remove('next');
|
|
nextSlide.classList.add('slide--active');
|
|
renderSlides();
|
|
renderBtns();
|
|
}
|
|
|
|
}
|
|
|
|
const renderBtns = () => {
|
|
let nextBtn = document.querySelector('#forvard');
|
|
let prevBtn = document.querySelector('#back');
|
|
|
|
let activeSlide = document.querySelector('.slide--active');
|
|
let prevSlide = activeSlide.previousElementSibling;
|
|
!prevSlide ? prevBtn.classList.add('disabled')
|
|
: prevBtn.classList.remove('disabled');
|
|
|
|
let nextSlide = activeSlide.nextElementSibling;
|
|
!nextSlide ? nextBtn.classList.add('disabled')
|
|
: nextBtn.classList.remove('disabled');
|
|
}
|
|
|
|
const prevSlide = () => {
|
|
let activeSlide = document.querySelector('.slide--active');
|
|
let prevSlide = activeSlide.previousElementSibling;
|
|
if (prevSlide) {
|
|
activeSlide.classList.remove('slide--active');
|
|
prevSlide.classList.remove('prev');
|
|
prevSlide.classList.add('slide--active');
|
|
renderSlides();
|
|
renderBtns();
|
|
}
|
|
}
|
|
|
|
const renderSlides = () => {
|
|
let slides = document.querySelectorAll('.slide');
|
|
if (!slides) {
|
|
return;
|
|
}
|
|
let activeSlide = document.querySelector('.slide--active');
|
|
if (!activeSlide) {
|
|
activeSlide = slides.item(0);
|
|
activeSlide.classList.add('slide--active');
|
|
}
|
|
[].forEach.call(slides, function (slide) {
|
|
slide.classList.remove('prev', 'next')
|
|
});
|
|
|
|
let prevSlide = activeSlide.previousElementSibling;
|
|
prevSlide && prevSlide.classList.add('prev');
|
|
|
|
let nextSlide = activeSlide.nextElementSibling;
|
|
nextSlide && nextSlide.classList.add('next');
|
|
|
|
}
|
|
|
|
const renderSlider = (element) => {
|
|
const slider = document.querySelector(element);
|
|
if (slider) {
|
|
let nextButton = document.querySelector("#forvard");
|
|
nextButton.addEventListener('click', function () {
|
|
nextSlide();
|
|
})
|
|
|
|
let prevButton = document.querySelector("#back");
|
|
prevButton.addEventListener('click', function () {
|
|
prevSlide();
|
|
})
|
|
renderSlides();
|
|
}
|
|
}
|
|
|
|
|
|
</script>
|
|
|
|
<style lang="sass" scoped>
|
|
.container
|
|
display: flex
|
|
flex-flow: column
|
|
justify-content: center
|
|
margin: 50px auto 0
|
|
width: 500px
|
|
height: 300px
|
|
|
|
.controls
|
|
display: flex
|
|
justify-content: center
|
|
|
|
div
|
|
padding: 12px 14px
|
|
cursor: pointer
|
|
border: 1px solid #fff
|
|
color: #fff
|
|
font-size: 16px
|
|
font-weight: bold
|
|
margin: 0 5px
|
|
border-radius: 10px
|
|
|
|
&.disabled
|
|
opacity: 0
|
|
cursor: default
|
|
|
|
|
|
.slider
|
|
position: relative
|
|
width: 100%
|
|
height: 100%
|
|
|
|
.slide
|
|
position: absolute
|
|
top: 25%
|
|
left: 10%
|
|
width: 80%
|
|
height: 50%
|
|
background-color: red
|
|
border: 1px solid #fff
|
|
border-radius: 15px
|
|
opacity: 0
|
|
transition: all 0.7s ease-out
|
|
|
|
&--active
|
|
opacity: 1
|
|
z-index: 9
|
|
|
|
.prev,
|
|
.next
|
|
opacity: .3
|
|
|
|
|
|
.prev
|
|
transform: translate(0, -30%) scale(0.8)
|
|
|
|
.next
|
|
transform: translate(0, 30%) scale(0.8)
|
|
|
|
</style> |