<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="slider-container">
<h1><iframe width="375" height="211" src="https://www.youtube.com/embed/2GBzYu59YLQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe><br/>
<a onclick="window.open('http://fm.tc/live-broadcast-fm-1372.html','POPUP','width=503,height=260,scrollbars=0,resizable=0');return false;" href="#"><img src="https://res.cloudinary.com/tercuman-b-l-m-merkez/image/upload/v1560459863/mdialogo_dckk4m.ico" title="7/24 ONLİNE KESİNTİSİZ MÜZİK YAYINI" border="0"></a>
<a onclick="window.open('http://fm.tc/live-broadcast-tv-1845.html','POPUP','width=503,height=260,scrollbars=0,resizable=0');return false;" href="#"><img src="https://res.cloudinary.com/tercuman-b-l-m-merkez/image/upload/v1560460160/ttgrtlogo_eqthwz.ico" title="LİVE BROADCAST TV" border="0"></a></h1>
<div class="slide" style="background-image: url('https://res.cloudinary.com/tercuman-b-l-m-merkez/image/upload/v1574751674/16442994_1720628841517058_1290232932_o_qovium.jpg')"></div>
<div class="slide" style="background-image: url('https://res.cloudinary.com/tercuman-b-l-m-merkez/image/upload/v1564267218/create_thumb1_xhgkvp.png')"></div>
<div class="slide" style="background-image: url('https://res.cloudinary.com/tercuman-b-l-m-merkez/image/upload/v1562344727/1_p2hfau.jpg')"></div>
<div class="controls-container">
<div class="control"></div>
<div class="control"></div>
<div class="control"></div>
</div>
</div>
@import url('https://fonts.googleapis.com/css?family=Roboto:900&display=swap');
* {
box-sizing: border-box;
}
body {
font-family: 'Roboto', sans-serif;
margin: 0;
}
.slider-container {
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
height: 100vh;
width: 100vw;
}
.slider-container h1 {
color: #fff;
font-size: 100px;
letter-spacing: 5px;
position: relative;
z-index: 100;
text-align: center;
}
.slider-container::after {
background-color: #000;
content: '';
position: absolute;
opacity: 0.3;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 1;
}
.slide {
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
position: absolute;
top: 0;
left: 0;
opacity: 0;
height: 100%;
width: 100%;
transform: scale(1.15);
transition: opacity .6s ease;
}
.slide.active {
animation: grow 4s linear forwards;
opacity: 1;
}
@keyframes grow {
0%, 20% {
transform: scale(1);
}
75%, 100% {
transform: scale(1.15);
}
}
.controls-container {
position: absolute;
top: 50%;
right: 10px;
display: flex;
flex-direction: column;
transform: translateY(-50%);
z-index: 2;
}
.control {
background-color: #fff;
cursor: pointer;
opacity: 0.5;
margin: 6px;
height: 40px;
width: 5px;
transition: opacity 0.3s, background-color 0.3s, transform 0.3s;
}
.control.active, .control:hover {
background-color: #fff;
opacity: 1;
transform: scale(1.2);
}
const slides = document.querySelectorAll('.slide');
const controls = document.querySelectorAll('.control');
let activeSlide = 0;
let prevActive = 0;
changeSlides();
let int = setInterval(changeSlides, 4000);
function changeSlides() {
slides[prevActive].classList.remove('active');
controls[prevActive].classList.remove('active');
slides[activeSlide].classList.add('active');
controls[activeSlide].classList.add('active');
prevActive = activeSlide++;
if(activeSlide >= slides.length) {
activeSlide = 0;
}
console.log(prevActive, activeSlide);
}
controls.forEach(control => {
control.addEventListener('click', () => {
let idx = [...controls].findIndex(c => c === control);
activeSlide = idx;
changeSlides();
clearInterval(int);
int = setInterval(changeSlides, 4000);
});
});
