Nội dung bài viết
Add JavaScript Files
First of all, grab the jQuery and jQuery UI libraries, if you haven’t already and include them in your page header. For this tutorial, you’ll need jQuery UI version 1.5.3. I usually use Google AJAX libraries to load jQuery and jQuery UI files as it acts as a CDN for your JavaScript files.
<code><script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js" ></script> </code>
The Featured Content Structure
Now create a div with its contents as the tabs structured as a list and content corresponding to each tab within a separate div.
The Featured Content Structure Now create a div with its contents as the tabs structured as a list and content corresponding to each tab within a separate div. - See more at: https://webdeveloperplus.com/jquery/featured-content-slider-using-jquery-ui/#sthash.hWh3GRtl.dpuf
The CSS Styles
Now for the CSS part, I fixed the width and height of the outer container div with id #featured and added a right padding of 250px to make space for the absolutely positioned navigation tabs for our featured content slider. Also, i set its position attribute to relative so that i can absolutely position elements inside #featured div relative to it.
#featured{ width:400px; padding-right:250px; position:relative; height:250px; background:#fff; border:5px solid #ccc; }
#featured ul.ui-tabs-nav{ position:absolute; top:0; left:400px; list-style:none; padding:0; margin:0; width:250px; } #featured ul.ui-tabs-nav li{ padding:1px 0; padding-left:13px; font-size:12px; color:#666; } #featured ul.ui-tabs-nav li span{ font-size:11px; font-family:Verdana; line-height:18px; }
#featured .ui-tabs-panel{ width:400px; height:250px; background:#999; position:relative; overflow:hidden; } #featured .ui-tabs-hide{ display:none; }
#featured li.ui-tabs-nav-item a{/*On Hover Style*/ display:block; height:60px; color:#333; background:#fff; line-height:20px; outline:none; } #featured li.ui-tabs-nav-item a:hover{ background:#f2f2f2; } #featured li.ui-tabs-selected{ /*Selected tab style*/ background:url('images/selected-item.gif') top left no-repeat; } #featured ul.ui-tabs-nav li.ui-tabs-selected a{ background:#ccc; }
#featured ul.ui-tabs-nav li img{ float:left; margin:2px 5px; background:#fff; padding:2px; border:1px solid #eee; }
#featured .ui-tabs-panel .info{ position:absolute; top:180px; left:0; height:70px; width: 400px; background: url('images/transparent-bg.png'); } #featured .info h2{ font-size:18px; font-family:Georgia, serif; color:#fff; padding:5px; margin:0; overflow:hidden; } #featured .info p{ margin:0 5px; font-family:Verdana; font-size:11px; line-height:15px; color:#f0f0f0; } #featured .info a{ text-decoration:none; color:#fff; } #featured .info a:hover{ text-decoration:underline; }
The JavaScript Code
Finally the JavaScript code, that’ll make our featured content slider work. I’m using rotating tabs feature of jQuery UI library that makes the content panels rotate automatically after given time interval.
$(document).ready(function(){ $("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true); });
Nguồn: Sưu tầm