سلایدشۆیەکی جوان دیاری بۆ خاوەن ماڵپەڕەکانCSS و HTML

خۆشەویستانی مالپەری تۆری تەکنەلۆژیای زانیاری کوردی ئەمجارەش هاتمەوە خزمەتان لە بابەتی ئەمجارەمدا سلایدشۆیەکی جوانم ئامادەکردووە بۆ خاوەن مالپەرەکان ئەم سلایدشۆیە تەکنیکێکی جوانی هەیە دەتوان سودی لێوەربگرن بۆ ماڵپەرەکانتان بەهیوای سود لێوەرگرتن..

چۆنیەتی دروستکرنی :

سەرەتا لە پڕگەی HTML ئەم کۆدانە بنووسە : مەبەستم لەوە ئەبیت ئەم کۆدە لەو لاپەرەی دابنیت کە دەتەوێت ئەم سلایدشۆکە دەربەکەویت نموونە لە لاپەرەی index کە لە زۆربەی مالپەرەکان لاپەرەی سەرەکیە….

<script type="text/javascript" src="js/jquery-1.8.2.js" ></script>
<script type="text/javascript" src="js/jquery-ui-1.9.0.custom.min.js" ></script>
<script type="text/javascript" src="js/jquery-ui-tabs-rotate.js" ></script>
<script type="text/javascript">
	$(document).ready(function(){
		$("#featured").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
	});
</script>

پڕگەی HTML ئەم کۆدانە بنووسە:  بەهەمان شێوەیە ئەم کۆدەش لەو لاپەرەی دابنی کە خۆت مەبەستە دەتوانیت لاپەری سەربەخۆ بیت یان لە ناو index دای بنێت.

 <!-- بەشی سەردێر -->
		<div id="featured" >
		  <ul class="ui-tabs-nav">
	        <li class="ui-tabs-nav-item" id="nav-fragment-1"><a href="#fragment-1"><img src="images/image1-small.jpg" alt="" /><span>بۆتاقی کردنەوە نوسراوە ئەم بابەتە</span></a></li>
	        <li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><img src="images/image2-small.jpg" alt="" /><span>بۆتاقی کردنەوە نوسراوە ئەم بابەتە</span></a></li>
	        <li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3"><img src="images/image3-small.jpg" alt="" /><span>بۆتاقی کردنەوە نوسراوە ئەم بابەتە</span></a></li>
	        <li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4"><img src="images/image4-small.jpg" alt="" /><span>بۆتاقی کردنەوە نوسراوە ئەم بابەتە</span></a></li>

	      </ul>

	    <!-- بەشی کورتەی بابەت -->
	    <div id="fragment-1" class="ui-tabs-panel" style="">
			<img src="images/image1.jpg" alt="" />
			 <div class="info" >
				<h2><a href="#" >بۆتاقی کردنەوە نوسراوە ئەم بابەتە</a></h2>
				<p>بۆتاقی کردنەوە نوسراوە ئەم بابەتە بۆتاقی کردنەوە نوسراوە ئەم بابەتە<a href="#" >درێژە</a></p>
			 </div>
	    </div>

	    <!-- بەشی کورتەی بابەت -->
	    <div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style="">
			<img src="images/image2.jpg" alt="" />
			 <div class="info" >
				<h2><a href="#" >بۆتاقی کردنەوە نوسراوە ئەم بابەتە</a></h2>
				<p>بۆتاقی کردنەوە نوسراوە ئەم بابەتە بۆتاقی کردنەوە نوسراوە ئەم بابەتە بۆتاقی کردنەوە نوسراوە ئەم بابەتە<a href="#" >دڕێژە</a></p>
			 </div>
	    </div>

	   <!-- بەشی کورتەی بابەت -->
	    <div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style="">
			<img src="images/image3.jpg" alt="" />
			 <div class="info" >
				<h2><a href="#" >بۆتاقی کردنەوە نوسراوە ئەم بابەتە</a></h2>
				<p>بۆتاقی کردنەوە نوسراوە ئەم بابەتە بۆتاقی کردنەوە نوسراوە ئەم بابەتە<a href="#" >دڕیژە</a></p>
	         </div>
	    </div>

	  <!-- بەشی کورتەی بابەت -->
	    <div id="fragment-4" class="ui-tabs-panel ui-tabs-hide" style="">
			<img src="images/image4.jpg" alt="" />
			 <div class="info" >
				<h2><a href="#" >بۆتاقی کردنەوە نوسراوە ئەم بابەتە</a></h2>
				<p>بۆتاقی کردنەوە نوسراوە ئەم بابەتە بۆتاقی کردنەوە نوسراوە ئەم بابەتە بۆتاقی کردنەوە نوسراوە ئەم بابەتە<a href="#" >درێژە..</a></p>
	         </div>
	    </div>

وە لە پڕگەی css ئەم کۆدە  بنووسە :

#featured{ 
	width:400px; 
	padding-right:250px; 
	position:relative; 
	border:5px solid #eee; 
	-webkit-box-shadow:1px 1px 6px #ddd;
	-moz-box-shadow:1px 1px 6px #ddd;
	box-shadow:1px 1px 6px #ddd;
	-webkit-text-shadow:1px 1px 0 white;
	-moz-text-shadow:1px 1px 0 white;
	height:250px; overflow:hidden;
	background:#fff;
}
#featured ul.ui-tabs-nav{ 
	position:absolute; 
	top:0; left:400px; 
	list-style:none; 
	padding:0; margin:0; 
	width:250px; height:250px;
	overflow:auto;
	overflow-x:hidden;
}
#featured ul.ui-tabs-nav li{ 
	padding:1px 0; padding-left:13px;  
	font-size:12px; 
	font-family: Tahoma,Arial,serif;
	color:#666; 
	text-align:right;
}
#featured ul.ui-tabs-nav li img{ 
	float:left; margin:2px 5px; 
	background:#fff; 
	padding:2px; 
	border:1px solid #eee;
}
#featured ul.ui-tabs-nav li span{ 
	font-size:12px; 
	font-family: Tahoma,Arial,serif;
	line-height:18px; 
	text-align:right;
}
#featured li.ui-tabs-nav-item a{ 
	display:block; 
	height:60px; text-decoration:none;
	color:#333;  background:#fff; 
	line-height:20px; outline:none;
}
#featured li.ui-tabs-nav-item a:hover{ 
	background:#f2f2f2; 
}
#featured li.ui-tabs-selected, #featured li.ui-tabs-active{ 
	background:url('images/selected-item.gif') top left no-repeat;  
}
#featured ul.ui-tabs-nav li.ui-tabs-selected a, #featured ul.ui-tabs-nav li.ui-tabs-active a{ 
	background:#ccc; 
}
#featured .ui-tabs-panel{ 
	width:400px; height:250px; 
	background:#999; position:relative;
}
#featured .ui-tabs-panel .info{ 
	position:absolute; 
	bottom:0; left:0; 
	height:70px; 
	background: url('images/transparent-bg.png'); 
}
#featured .ui-tabs-panel .info a.hideshow{
	position:absolute; 
	color:#f0f0f0; 
	font-size:12px; 
	font-family: Tahoma,Arial,serif;
	text-align:right;
	right:10px; top:-20px;
	line-height:20px;
	margin:0; 
	outline:none; 
	background:#000;
}
#featured .info h2{ 
	font-size:14px; 
	font-family: Tahoma,Arial,serif;
	text-align:right;
	color:#fff; padding:5px; margin:0; font-weight:bold;
	overflow:hidden; 
}
#featured .info p{ 
	margin:0 5px; 
	font-size:12px; 
	font-family: Tahoma,Arial,serif;
	text-align:right;
	line-height:15px; color:#f0f0f0;
}
#featured .info a{ 
	text-decoration:none; 
	color:#fff; 
}
#featured .info a:hover{ 
	text-decoration:underline; 
}
#featured .ui-tabs-hide{ 
	display:none; 
}

نموونەی زیندوو