@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,400;0,500;0,700;0,800;1,300;1,400;1,500;1,600;1,700&display=swap');
* {
box-sizing: border-box;
}
body {
margin: 0px;
}
img {
max-width: 100%;
height: auto;
}
.slider-group *, .slider-group {
--base-fm: 'Rubik', sans-serif;
--bnr-cont-w: 800px;
--sub-title: 18px;
--title: 150px;
--subtitle: 50px;
--base-clr: #ffffff;
--secound-clr: #000000;
}
.slider-group {
width: 100%;
position: relative;
font-family: var(--base-fm);
font-size: var(--sub-title);
color: var(--base-clr);
}
.sliders {
width: 100%;
position: relative;
overflow: hidden;
text-align: center;
}
.sliders .slide {
width: 100%;
opacity: 0;
transition: .3s;
height: 0;
position: relative;
}
.sliders .slide img {
display: block;
}
.sliders .slide.active {
opacity: 1;
height: auto;
}
/**Arrows**/
.arrows-controls .arr-left, .arrows-controls .arr-right {
position: absolute;
top: 50%;
z-index: 99;
transform: translateY(-50%);
width: 40px;
height: 70px;
background-color: rgba(255, 255, 255, 0.7);
font-size: 0px;
cursor: pointer;
}
.arrows-controls .arr-left:before, .arrows-controls .arr-right:before {
content: '';
position: absolute;
width: 20px;
height: 20px;
border-left: #000 2px solid;
border-bottom: #000 2px solid;
left: 0;
top: 50%;
margin: -10px auto 0 auto;
right: -12px;
}
.arrows-controls .arr-left:before {
transform: rotate(45deg);
}
.arrows-controls .arr-left {
left: 20px;
}
.arrows-controls .arr-right {
right: 20px;
}
.arrows-controls .arr-right:before {
transform: rotate(-135deg);
right: 12px;
}
/**Arrows**/
/**Slide Content**/
.slide-cont {
position: absolute;
left: 0px;
top: 50%;
width: 100%;
max-width: var(--bnr-cont-w);
z-index: 88;
transform: translateY(-50%);
color: #fff;
padding: 20px 60px;
font-size: 18px;
line-height: 1.5;
text-align: center;
opacity: 0;
transition: 0.5s all;
}
.active .slide-cont {
opacity: 1;
}
.slide-cont-inner {
max-width: 550px;
width: 100%;
margin: auto;
}
.bnr-cont-right {
left: auto;
right: 0px;
}
.slide-cont .cmn-btn {
background-color: #000;
color: #fff;
padding: 12px 40px;
border-radius: 30px;
text-decoration: none;
display: inline-block;
font-size: 18px;
}
.slide-cont h2 {
font-size: var(--subtitle);
line-height: normal;
text-transform: uppercase;
letter-spacing: 2px;
margin: 0px 0 15px 0;
}
@media(max-width:1200px) {
.slide-cont h2 {
font-size: calc(var(--subtitle) - 12px);
}
.slide-cont {
max-width: calc(var(--bnr-cont-w) - 150px);
}
.slide-cont-inner {
max-width: 500px;
}
.arrows-controls .arr-left {
left: 10px;
width: 35px;
height: 60px;
}
.arrows-controls .arr-right {
right: 10px;
width: 35px;
height: 60px;
}
.arrows-controls .arr-left:before, .arrows-controls .arr-right:before {
width: 14px;
height: 14px;
margin-top: -8px;
}
}
@media(max-width:767px) {
.arrows-controls .arr-left {
left: 10px;
width: 28px;
height: 38px;
}
.arrows-controls .arr-right {
right: 10px;
width: 28px;
height: 38px;
}
.slide-cont {
padding: 10px 40px;
font-size: 14px;
line-height: 1.3;
}
.slide-cont h2 {
font-size: calc(var(--subtitle) - 24px);
margin-bottom: 5px;
}
.slide-cont h2 br {
display: none;
}
.slide-cont p {
margin: 5px 0px;
}
.slide-cont .cmn-btn {
padding: 9px 18px;
font-size: 14px;
}
}
function Slider() {
let items= document.querySelectorAll('.slide')
let i = 0;
function sliderItemNext() {
i++
if (items.length -1 < i) {
i = 0
}
items.forEach(item => {
item.classList.remove('active')
})
items[i].classList.add('active')
}
function sliderItemPrev() {
i--
if (items.length - 1 < i || i < 0) {
i = items.length - 1
}
items.forEach(item => {
item.classList.remove('active')
})
items[i].classList.add('active')
}
setInterval(function () {
sliderItemNext();
},5000);
document.getElementById("slideNext").addEventListener("click", function(){
sliderItemNext();
});
document.getElementById("slidePrev").addEventListener("click", function(){
sliderItemPrev();
});
}
Slider()