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

این اسلایدر کاملا با html5 و css3 ساخته شده و به هیچ عنوان java script و یا … به کار نرفته است . ضمنا این اسلایدر قابلیت درج توضیح مختصر برای هر عکس را دارا می باشد .

و اما آموزش :

برای درج اسلایدر در وب سایت خود , ابتدا کد html زیر را در صفحه ی خود قرار داده :

<div class="vms-sliding-gallery">
    <ul>
        <li><figure><img src="images/vms1.jpg" width="980" height="350" alt=""><figcaption>متن مورد نظر مربوط به عکس</figcaption></figure></li>
        <li><figure><img src="images/vms2.jpg" width="980" height="350" alt=""><figcaption>متن مورد نظر مربوط به عکس</figcaption></figure></li>
        <li><figure><img src="images/vms3.jpg" width="980" height="350" alt=""><figcaption>متن مورد نظر مربوط به عکس</figcaption></figure></li>
        <li><figure><img src="images/vms4.jpg" width="980" height="350" alt=""><figcaption>متن مورد نظر مربوط به عکس</figcaption></figure></li>
        <li><figure><img src="images/vms5.jpg" width="980" height="350" alt=""><figcaption>متن مورد نظر مربوط به عکس</figcaption></figure></li>
    </ul>
</div>

سپس کدهای استایل زیر را در فایل css خود قرار دهید .

.vms-sliding-gallery *{
	margin:0;
	padding:0;
	border:none;
	outline:none;
}
.vms-sliding-gallery{
	width:980px;
	height:350px;
	overflow:hidden;
}
.vms-sliding-gallery ul{
	width:100%;
	height:100%;	
}
.vms-sliding-gallery ul li{
	width:20%;
	height:100%;
	list-style-type:none;
	float:left;
	-webkit-transition:all 1s;
	-moz-transition:all 1s;
	-o-transition:all 1s;
	-ms-transition:all 1s;
	transition:all 1s;
	position:relative;
}
.vms-sliding-gallery ul li img{
	position:absolute;
	z-index:1;
	border-left:1px solid #fff;
}
.vms-sliding-gallery ul li figcaption{
	position:absolute;
	z-index:2;
	bottom:5px;
	left:5px;
	width:80%;
	height:30px;
	background-color:rgba(0,0,0,0.7);
	color:#fff;	
	opacity:0;
	text-align:center;
	font-family:tahoma;
	padding-top:5px;
	transition:all 1s;
}
.vms-sliding-gallery ul li:hover figcaption{
	opacity:1;
}	
.vms-sliding-gallery ul:hover li{
	width:40px;
}
.vms-sliding-gallery ul li:hover{
	width:820px;
}

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

دموی آماده اسلایدر

دانلود فایل دموی آماده اسلایدر

پخش اختصاصی

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