<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link rel="apple-touch-icon" type="image/png" href="https://cpwebassets.codepen.io/assets/favicon/apple-touch-icon-5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png" /> <meta name="apple-mobile-web-app-title" content="CodePen"> <link rel="shortcut icon" type="image/x-icon" href="https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico" /> <link rel="mask-icon" type="image/x-icon" href="https://cpwebassets.codepen.io/assets/favicon/logo-pin-b4b4269c16397ad2f0f7a01bcdf513a1994f4c94b8af2f191c09eb0d601762b1.svg" color="#111" /> <title>CodePen - Javascript image slider</title> <link rel="canonical" href="https://codepen.io/_vidyasheela/pen/zYdpyep"> <script> window.console = window.console || function(t) {}; </script> </head> <body translate="no"> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>image slider</title> <link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" rel="stylesheet"> <style> .image-slider{ width: 100vw; height: 100vh; display: flex; } .image-holder{ width: 80%; height: 500px; border-radius: 25px; margin: 5px auto; box-shadow: 0 0 15px black; transition: all 0.5s ease-in; } .material-icons-outlined{ font-size: 50px; position: relative; top: 225px; border-radius: 30px; background-color: rgba(158, 170, 170, 0.541); height: 50px; padding: 5px; color: rgb(66, 65, 65); box-shadow: 0 0 15px black; cursor: pointer; user-select: none; } .back{ left: 5%; } .back:active{ background-color: rgba(28, 207, 207, 0.541); } .forward{ right: 5%; } .forward:active{ background-color: rgba(28, 207, 207, 0.541); } </style> </head> <body> <div class="image-slider"> <span class="material-icons-outlined back"> arrow_back </span> <img class="image-holder" src="https://cdn.pixabay.com/photo/2021/08/25/20/42/field-6574455_960_720.jpg" alt=""> <span class="material-icons-outlined forward"> arrow_forward </span> </div> <script> let holder = document.querySelector('.image-holder'); let forward = document.querySelector('.forward'); let back = document.querySelector('.back'); // Lets make array of images let img_arr = [ 'https://cdn.pixabay.com/photo/2021/08/25/20/42/field-6574455_960_720.jpg', 'https://cdn.pixabay.com/photo/2021/10/11/18/58/lake-6701636_960_720.jpg', 'https://cdn.pixabay.com/photo/2021/09/20/21/32/lake-6641880_960_720.jpg', 'https://cdn.pixabay.com/photo/2021/10/21/08/14/italy-6728318_960_720.jpg', 'https://cdn.pixabay.com/photo/2021/10/18/08/39/pumpkin-6720424_960_720.jpg' ] let image_count = 0; // Function to increase image count const imageIncrease = ()=>{ holder.src = img_arr[image_count] // console.log(image_count) // console.log(img_arr.length) if (image_count >= img_arr.length-1){ image_count = 0; }else{ image_count ++; } } // function to decrease image count const imageDecrease = ()=>{ holder.src = img_arr[image_count] // console.log(image_count) if (image_count === 0){ image_count = img_arr.length-1; }else{ image_count --; } } forward.addEventListener('click',imageIncrease) back.addEventListener('click',imageDecrease) </script> </body> </html> </body> </html>
დააკოპირეთ
