اسلایدر عکس به صورت html5 و css3

طبیعتا تا سخن از اسلایدر عکس در وب سایت میشود , همه ی توسعه دهندگان وب یاد جاوا اسکریپت و یا jquery می افتند . اما چرا css3 نه ؟؟؟

در ابن پست از سایت اسکریپت دات کام , قصد دارم آموزش ساخت اسلایدر عکس با استفاده از Html5 و Css3 را آموزش دهم .

در این آموزش هیچ گونه زبان دیگری استفاده نمیشود که باعث سبکی در کدنویسی میشود . ضمنا در صورت داشتن دانش در مورد html5 و css3 میتوانید به هر نحوی که دوست دارید , ویرایش نمایید .

و اما آموزش :

ابتدا در html کد زیر را وارد نمایید :

<div id="vms-slider">
    <figure>
        <img src="images/vms1.jpg" alt="Vms">
        <img src="images/vms2.jpg" alt="Vms">
        <img src="images/vms3.jpg" alt="Vms">
        <img src="images/vms4.jpg" alt="Vms">
        <img src="images/vms5.jpg" alt="Vms">
    </figure>
</div>

سپس کد های زیر را در css وب سایت خود قرار دهید :

div#vms-slider {
	width:600px;
	height:300px;
	overflow: hidden; 
}
div#vms-slider figure img {
	width: 20%;
	height: auto;
	float: left;
}
div#vms-slider figure {
	position: relative;
	width: 500%;
	margin: 0;
	padding: 0;
	font-size: 0;
	left: 0;
	text-align: left;
	animation: 30s vms infinite; 
	-webkit-animation: 30s vms infinite; 
	-moz-animation: 30s vms infinite; 
	-o-animation: 30s vms infinite; 
	-ms-animation: 30s vms infinite; 
}
@keyframes vms { 
	0%  { left: 0%; }
	20% { left: 0%; }
	25% { left: -100%; }
	45% { left: -100%; }
	50% { left: -200%; }
	70% { left: -200%; } 
	75% { left: -300%; }
	95% { left: -300%; }
	100% { left: -400%; } 
}
@-webkit-keyframes vms { 
	0%  { left: 0%; }
	20% { left: 0%; }
	25% { left: -100%; }
	45% { left: -100%; }
	50% { left: -200%; }
	70% { left: -200%; } 
	75% { left: -300%; }
	95% { left: -300%; }
	100% { left: -400%; } 
}

نکته مهم : کد های بالا برای 5 عکس به صورت پیش فرض آماده شده است و بدیهی است در صورت کم کردن یا زیاد کردن عکس در html , باید تغییراتی در css انجام دهید .

دموی اسلاید به صورت آماده

دانلود دموی اسلاید

پخش اختصاصی

آموزش : وحید مجیدی