آموزش ساخت اسلایدر زیبا با css
آموزش ساخت اسلایدر زیبا با html,css بصورت پروژه محور . کد کامل آن را در اختیار شما عزیزان قرار می دهیم. کد ساخت اسلایدر یا اسلایدشو با html ,css را می توانید در یک فایل با پسوند html ذخیره و سپس اجرا کنید.
در این بخش از آموزش css ازتاپ سایت 98 به سراغ ساختاسلایدر یا اسلایدشو می رویم.
ساخت اسلایدشو با html,css :
ساخت اسلایدشو با html,css از کدهای html و css و جاواسکریپت استفاده می کنیم و با ترکیب آنها یک اسلایدشو زیبا ایجاد می کنیم.
کد html ساخت اسلایدر زیبا با html,css :
کد html ساخت اسلایدر زیبا با html,css را در قسمت پایین مشاهده می کنید.
ابتدا کدهای html را توضیح می دهیم وسپس به سراغ بقیه کدها می رویم.
در انتهای آموزش می توانید کد کامل را مشاهده و استفاده نمایید.
کد html اسلایدر شامل چند div میباشد.
در div اول یک کلاس بنام slideshow-container معرفی شده است که قسمت اصلی اسلایدر میباشد.
سپس برای هر تصویر یک div با کلاس های mySlides و fade معرفی شده است.
در div بعدی با کلاس numbertext شماره اسلایدر قرار گرفته است.
سپس یک تصویر در تگ img قرار داده شده است.
در div آخر نیز یک کلاس با نام text مشخص شده که متن زیر تصویر در آن قرار داده شده است.
پس ما شماره اسلایدر یا اسلایدشو ، تصویر و یک کپشن را خواهیم داشت.
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="a1.jpg" style="width:100%">
<div class="text">Caption 1</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="a3.jpg" style="width:100%">
<div class="text">Caption 2</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="a3.jpg" style="width:100%">
<div class="text">Caption 3</div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<div style="text-align: center">
کد css ساخت اسلایدر زیبا با html,css :
کد css ساخت اسلایدر زیبا با html,css را در بخش زیر خواهید دید.کدهای مهم را توضیح خواهیم داد.
کلاس mySlide ابتدا مخفی خواهد بود. عکس در وسط قرار خواهد گرفت.
اندازه بخش اصلی با کلاس slideshow-container حداکثر هزار پیکسل خواهد بود و در وسط قرار می گیرد.
دو دکمه در دو طرف قرار می گیرد که با کلاس های next , prev مشخص است.
دکمه ها باید در سمت راست و چپ و وسط قرار بگیرند.
متن زیر تصویردر کلاس text قرار دارد.
اعداد یا شماره اسلایدر در کلاس numbertext می باشد. ازدستور position در اسلایدر یا اسلایدشو استفاده می شود.
* {box-sizing: border-box}
body {font-family: Verdana, sans-serif; margin:0}
.mySlides {display: none}
img {vertical-align: middle;}
.slideshow-container {
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);
}
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
.numbertext {
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,.text {font-size: 11px}
}
</style>
کد جاوااسکریپت ساخت اسلایدر :
کد جاوااسکریپت ساخت اسلایدر یا اسلایدشو را در قسمت زیرمی بینید.
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 ذخیره واجرا کنید تا نتیجه را مشاهده نمایید.
حتما بایستی سه تصاویر با نام های a1 , a4 , a3 با پسوند jpg کنار فایل 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;}
.slideshow-container {
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);
}
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
.numbertext {
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,.text {font-size: 11px}
}
</style>
</head>
<body>
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="a1.jpg" style="width:100%">
<div class="text">Caption 1</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="a3.jpg" style="width:100%">
<div class="text">Caption 2</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="a3.jpg" style="width:100%">
<div class="text">Caption 3</div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</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>
نظرات کاربران
از دیدگاه مرتبط با موضوع استفاده نمایید.
از تبلیغ سایت یا شبکه اجتماعی خودداری فرمایید.
برای پاسخ گویی بهتر در سایت ثبت نام نمایید و سپس سوال خود را مطرح فرمایید.
اگر به دنبال کار پاره وقت هستید با ما تماس بگیرید.
اگر سوال یا نظری دارید در بخش کامنت ها بنویسید.اگر موضوع خاصی مد نظر شماست که در سایت موجود نیست در بخش کامنت ها بنویسید