HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Develop by jSnake</title>
<!--Fontawesome cdn linki-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="app.css">
</head>
<body>
<div class="container">
<span id="numberOfSlide">0/2</span>
<img src="img/1.png" alt="Resim yolu" id="main-image">
<div class="control">
<i class="fa-solid fa-arrow-left" id="previous-picture"></i>
<i class="fa-solid fa-arrow-right" id="next-picture"></i>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
Sass:
*
{
margin: 0;
padding: 0;
}
.container
{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 100px;
}
.container img
{
width: 500px;
height: 330px;
}
.container .control
{
display: flex;
}
.container .control i
{
margin-left: 50px;
font-size: 30px;
cursor: grab;
}
.container span
{
font-size: 30px;
font-family: sans-serif;
}
JavaScript:
const images = ["img/1.png","img/2.jpeg","img/3.jpeg"];
let previous_picture = document.getElementById('previous-picture');
let next_picture = document.getElementById('next-picture');
let main_image = document.getElementById('main-image');
let numberOfSlide = document.getElementById('numberOfSlide');
let num = 0;
next_picture.addEventListener('click',() => {
num++;
if(num > 2){
num = 0;
}
main_image.src = images[num];
numberOfSlide.textContent =num+"/2";
})
previous_picture.addEventListener('click',() => {
num--;
if(num < 0){
num = 2;
}
main_image.src = images[num];
numberOfSlide.textContent = num+"/2";
})
setInterval(() => {
num++;
if(num > 2){
num = 0;
}
main_image.src = images[num];
numberOfSlide.textContent =num+"/2";
}, 2000);Arkadaşlar bugün JavaScript ile bir slider yaptım, istediğiniz yerde kullanabilirsiniz.
Not: SCSS'yi sass compiler eklentisi ile CSS'e dönüştürmeniz lazım.
Son düzenleme: