ஸ்லைட்ஷோ உருவாக்குவது எப்படி: HTML, CSS, மற்றும் JavaScript பயன்படுத்தி
இன்றைய இணையதளங்களில் ஸ்லைட்ஷோ என்பது மிகவும் பொதுவான அம்சமாகியுள்ளது. ஸ்லைட்ஷோ மூலம் பல்வேறு படங்களை அல்லது தகவல்களை நம் பார்வையாளர்களுக்கு காட்சிப்படுத்த முடியும். இந்த பதிவில், HTML, CSS, மற்றும் JavaScript பயன்படுத்தி எளிமையான ஸ்லைட்ஷோ ஒன்றை எப்படி உருவாக்குவது என்று பார்ப்போம்.
கட்டமைப்பு (HTML)
முதலில், நமக்கு தேவையான HTML கட்டமைப்பை உருவாக்குவோம். இதன் மூலம் ஸ்லைட்ஷோவில் வரும் படங்களை அணிவகுப்பாக அமைக்கலாம்.
<!DOCTYPE html>
<html lang="ta">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ஸ்லைட்ஷோ</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="slideshow-container">
<div class="slide fade">
<img src="img1.jpg" alt="Image 1">
</div>
<div class="slide fade">
<img src="img2.jpg" alt="Image 2">
</div>
<div class="slide fade">
<img src="img3.jpg" alt="Image 3">
</div>
</div>
<script src="script.js"></script>
</body>
</html>வடிவமைப்பு (CSS)
இப்போது, CSS மூலம் ஸ்லைட்ஷோவுக்கு தேவையான அழகிய வடிவமைப்பை கொடுப்போம்.
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f3f3f3;
}
.slideshow-container {
position: relative;
max-width: 100%;
margin: auto;
overflow: hidden;
}
.slide {
display: none;
}
.slide img {
width: 100%;
border-radius: 10px;
}
.fade {
animation-name: fade;
animation-duration: 1.5s;
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}செயல்பாடு (JavaScript)
இறுதியாக, JavaScript மூலம் ஸ்லைட்ஷோவை செயல்படுத்துவோம். இதன் மூலம் படங்கள் தானாக மாறும்.
let slideIndex = 0;
showSlides();
function showSlides() {
let slides = document.getElementsByClassName("slide");
for (let i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 1}
slides[slideIndex-1].style.display = "block";
setTimeout(showSlides, 3000); // Change image every 3 seconds
}முடிவு
இந்த நடைமுறைகளின் மூலம், நீங்கள் HTML, CSS, மற்றும் JavaScript கொண்டு எளிமையான மற்றும் செயல்பாட்டு ஸ்லைட்ஷோவை உருவாக்கலாம். இந்த ஸ்லைட்ஷோவில் நீங்கள் உங்கள் படங்களை சேர்க்கலாம் மற்றும் உங்கள் தேவைக்கு ஏற்ப மாற்றங்களை செய்யலாம். இது உங்கள் இணையதளத்திற்கு அழகிய மற்றும் நவீன தோற்றத்தை வழங்கும்.
