همه ما دوست داریم جایی را برای زندگی انتخاب کنیم که گرم و راحت باشد و از گذراندن وقت در آنجا خسته نشویم. این طراحی تزئینی است که به اتاقی خالی و بی روح نشاط تازه می بخشد. در دنیای وب، برنامه نویسان می خواهند صفحات وب را زیباتر و انعطاف پذیرتر کنند تا توجه کاربران را به خود جلب کنند و ترافیک وب سایت را افزایش دهند. یکی از ابزارهای اصلی و ضروری برای بهبود طراحی سایت ساخت اسلایدر با html و css است که در این مقاله می خواهیم آن را به شما معرفی کنیم تا بدانید css چیست و چه کاربردهایی در دنیای وب دارد؟

ساخت اسلایدر حرفه ای با html و css یکی از مهم ترین عناصری هستند که به شدت بر زیبایی و کاربری یک سایت تاثیر می گذارند. استفاده از اسلایدرها در سایت می تواند حجم زیادی از محتوا را بدون اشغال فضای اضافی در سایت نمایش دهد. خیلی از برنامه نویسان برای شکیل تر شدن سایت خود ساخت اسلایدر با html و css را در نظر می گیرند.

ساخت اسلایدر با html و css

زمانی که در جایی صحبت از طراحی وب سایت است اولین سوالی که مطرح می شود این است که html و css چیست؟ با کمک این زبان ها چه کارهایی می توانیم انجام بدهیم؟ این نکته را باید متذکر شویم که صفحات HTML به تنهایی نمی توانند باعث زیبایی سایت شما شوند، اما با کمک برخی از دستورالعمل‌ ها و زبان‌ های دیگر شما قادرید تا یک صفحه وب جذاب و پویا طراحی کنید و به راحتی هر زمان که نیاز بود فرمت صفحه را تغییر دهید.

ساخت اسلایدر با html و css در انواع مختلف، نه تنها از نظر طراحی، ابعاد و رنگ، بلکه از نظر تعامل و انیمیشن نیز وجود دارند. برخی از اسلایدرها را می توان آزادانه به چپ یا راست جابه جا کرد، در حالی که برخی دیگر را فقط می توان به اندازه یک اسلاید به چپ یا راست حرکت داد. برخی با کلیک کردن روی شماره یک مورد پیمایش کرده و متوقف می‌ شوند، در حالی که برخی دیگر هیچ تصویر کوچک یا شماره‌ای ندارند.

فایل css چیست؟

css با ایجاد فایل قادر است تا نمایش صفحه مورد نظر خود را در چند حالت گوناگون Rendering مانند حالت نمایش در زمان چاپ ، نمایش در صفحات مرورگر موبایل، حالت نمایش بر روی مانیتور، و حالت شناسایی صدا ( در مرورگرهایی که قابلیت شناسایی صدا دارند) به درستی تنظیم کند. به سه روش External CSS (عوض کردن ظاهر یک سایت با تغییر دادن یک فایل از قبل ایجاد شده) ،Internal CSS ( دادن استایل مناسب به یک صفحه خاص در سایت) ، Inline CSS ( ایجاد تغییرات در یک تگ خاص) می توان فایل css به فایلhtml اضافه کرد.

مراحل ساخت اسلایدر با html و css

برای ساخت اسلایدر در سایت، روش های زیادی مانند استفاده از JavaScript یا Jquery وجود دارد.

1- کد html برای ساخت اسلایدر

یک نمونه کد html که می توان با آن اسلایدر زیبایی را ساخت در قسمت پایین آورده شده است. کد html اسلایدر در این قطعه برنامه دارای چند div هست.

در div اول یک کلاس بنام academyit1 معرفی شده که قسمت اصلی اسلایدر را تشکیل می دهد.

در مرحله بعد برای هر تصویر یک div با کلاس های mySlides و fade معرفی می کنیم.

در div بعدی با کلاس academyit2 شماره اسلایدر جای دارد.

برای ادامه مراحل یک تصویر در تگ img قرار می دهیم.

در div آخر نیز یک کلاس با نام academyit3 مشخص شده که متن زیر تصویر در آن قرار داده شده است.

پس در نهایت ما می توانیم شماره اسلایدر، تصویر و یک کپشن را داشته باشیم. این یکی از روش های ساخت اسلایدر با html و css است.

<div class="academyit1">
<div class="mySlides fade">
<div class="academyit2">1 / 3</div>
<img src="academyit1.jpg" style="width:100%">
<div class="text">Caption 1</div>
</div>
<div class="mySlides fade">
<div class="academyit2">2 / 3</div>
<img src="academyit3.jpg" style="width:100%">
<div class="text">Caption 2</div>
</div>
<div class="mySlides fade">
<div class="academyit2">3 / 3</div>
<img src="academyit3.jpg" style="width:100%">
<div class="text">Caption 3</div>
</div>
<a class="prev" onclick="plusSlides(-1)">&#10094;</a>
<a class="next" onclick="plusSlides(1)">&#10095;</a>
</div>
<br>
<div style="text-align: center">

2- کد css برای ساخت اسلایدر

در بخش زیر کد css برای ساخت اسلایدر خواهید دید. سعی شده تا کدهای مهم را به صورت کاملاً دقیق برای شما به نمایش در بیاوریم. مراحلی که برای ساخت اسلایدر با html و css در بخش کد css در نظر گرفته ایم به شرح زیر است:

در ابتدای کار کلاس mySlide را مخفی می کنیم و عکس در وسط می گذاریم.

اندازه بخش اصلی با کلاس academyit1 حداکثر هزار پیکسل و در وسط قرار می گیرد.

در دو طرف، دو دکمه با کلاس های next , prev مشخص می کنیم.

دکمه ها باید در وسط و سمت راست و چپ گذاشته شوند.

متن زیر تصویر در کلاس academyit3 قرار دارد.

اعداد یا شماره اسلایدر در کلاس academyit2 است. برای بهتر اجرا شدن کد از دستور position در اسلایدر استفاده کنید.

<style>
* {box-sizing: border-box}
body {font-family: Verdana, sans-serif; margin:0}
.mySlides {display: none}
img {vertical-align: middle;}

.academyit1 {
max-width: 1000px;
position: relative;
margin: auto;
}
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
.academyit3{
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
.academyit2 {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
.active, .dot:hover { background-color: #717171; }
.fade { animation-name: fade; animation-duration: 1.5s; }
@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
@media only screen and (max-width: 300px) {
.prev, .next,.academyit3{font-size: 11px}
}
</style>

3- کد جاوا اسکریپت برای ساخت اسلایدر

برای ساختن یک اسلایدر زیبا با کد جاوا اسکریپت بهتر است از کد زیر استفاده کنید:

<script>
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
</script>

کد کامل ساخت اسلایدر زیبا با html,css

در زیر کد کاملی از ساخت اسلایدر با html و css آورده شده است. این کد را در یک فایل html ذخیره و اجرا کنید تا بتوانید خروجی را ببینید.

این نکته را فراموش نکنید که سه تصاویر با نام های academyit1 , academyit4 , academyit3 با پسوند jpg کنار فایل html قرار داده شود. اگر این کار را انجام ندهید اسلایدر به خوبی اجرا نمی شود.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box}
body {font-family: Verdana, sans-serif; margin:0}
.mySlides {display: none}
img {vertical-align: middle;}

.academyit1 {
max-width: 1000px;
position: relative;
margin: auto;
}
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
.academyit3{
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
.academyit2 {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
.active, .dot:hover { background-color: #717171; }
.fade { animation-name: fade; animation-duration: 1.5s; }
@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
@media only screen and (max-width: 300px) {
.prev, .next,.academyit3{font-size: 11px}
}
</style>
</head>
<body>
<div class="academyit1">
<div class="mySlides fade">
<div class="academyit2">1 / 3</div>
<img src="academyit1.jpg" style="width:100%">
<div class="text">Caption 1</div>
</div>
<div class="mySlides fade">
<div class="academyit2">2 / 3</div>
<img src="academyit3.jpg" style="width:100%">
<div class="text">Caption 2</div>
</div>
<div class="mySlides fade">
<div class="academyit2">3 / 3</div>
<img src="academyit3.jpg" style="width:100%">
<div class="text">Caption 3</div>
</div>
<a class="prev" onclick="plusSlides(-1)">&#10094;</a>
<a class="next" onclick="plusSlides(1)">&#10095;</a>
</div>
<br>
<div style="text-align: center">
<h1>TopSite98.com</h1>
</div>
<script>
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
</script>
</body>
</html>

سخن پایانی

در مطالب بالا یاد گرفتیم که چگونه ساخت اسلایدر با html و css را انجام دهیم. در زمان طراحی اسلایدر برای صفحات وب برنامه نویسان در اکثر موارد از Javascript به همراه CSS و HTML کمک می گیرند. البته این نکته را باید یادآوری کنیم که بدون استفاده کردن از جاوا اسکریپت هم می‌توانید اسلایدرهای جذاب و جالبی درست کرد.

اسلایدرهایی در گذشته برای نمایش در مرورگرهای مانند موزیلا فایرفاکس و گوگل کروم طراحی شده‌اند، ممکن است این روزها در اینترنت اکسپلوررهای جدید به درستی نشان داده نشوند. ولی اگر اسلایدرهای شما بدون جاوا اسکریپت طراحی شوند با وجود سبک ساده و شیک می توانند به راحتی در تمام صفحات استفاده شوند.