Full Width Slider 2 is easy to use jQuery image slider optimized for full screen width.
Features:
1. jQuery driven.
2. Responsive design.
3. Adjustable transition speed.
4. Auto slideshow with pause on hover.
5. Compatible with all major browsers (IE8 and above , Chrome, Firefox, Safari and Opera)
6. Can add Title, Description and Link button to each slide.
Demonya sobat bisa lihat disini...
CSS::
/* ------------------------------- 1. Resets ------------------------------- */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,small, strong, sub, sup, var,
b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }
body { line-height: 1; }
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { display: block; }
nav ul {list-style: none;}
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after { content: ''; content: none; }
a { margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent; }
abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; }
table { border-collapse: collapse; border-spacing: 0; }
input, select { vertical-align: middle; }
.head { width:100%; height:100px; background-color:#fff; text-align:center; }
.head h1 { font-family:Arial, Helvetica, sans-serif; color:#000; line-height:100px; font-family: 'Open Sans'; font-style: normal; font-weight: 400; font-size:30px;}
/* ------------------------------- 3. Slider Styles ------------------------------- */
#fwslider {
position: relative;
background:#000;
width:100%;
}
#fwslider .slider_container {
}
#fwslider .slide {
display: none;
position: absolute;
top:0;
left:0;
z-index: 0;
width:100%;
}
#fwslider .slide img {
width:100%;
}
#fwslider .slidePrev {
background:#000;
width:50px;
height:50px;
position: absolute;
top:50%;
left:-50px;
opacity:0.5;
z-index: 10;
}
#fwslider .slidePrev span {
background-image:url("http://www.jbmarket.net/demos/fws-slider2/img/left_arrow.png");
width:50px;
height:50px;
float:left;
background-position: 50% 50%;
background-repeat: no-repeat;
cursor: pointer;
}
#fwslider .slideNext {
background:#000;
width:50px;
height:50px;
position: absolute;
top:50%;
right:-50px;
opacity:0.5;
z-index: 10;
}
#fwslider .slideNext span {
background-image:url("http://www.jbmarket.net/demos/fws-slider2/img/right_arrow.png");
width:50px;
height:50px;
float:left;
background-position: 50% 50%;
background-repeat: no-repeat;
cursor: pointer;
}
#fwslider .timers {
height:4px;
position: absolute;
bottom:15px;
right:0;
z-index: 3;
}
#fwslider .timer {
height:4px;
width:40px;
background-color: #000;
float:left;
margin-right: 10px;
}
#fwslider .progress {
height:4px;
width:0%;
background-color: #FC3;
float:left;
}
#fwslider .slide_content {
top:0;
left:0;
position: absolute;
width:100%;
height:100%;
}
#fwslider .slide_content_wrap { /* Slider Text Content Container Style */
max-width:1280px;
margin:15% auto;
}
#fwslider .title { /* Slider Title Style */
opacity: 0;
color:#fff;
font-size:36px;
background:#000;
padding:10px;
float:left;
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
}
#fwslider .description { /* Slider Description Style */
opacity: 0;
color:#FC3;
font-size:18px;
background:#000;
padding:10px;
clear:both;
float:left;
margin-top:2px;
line-height:24px;
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
}
#fwslider .readmore { /* Slider Read More button Style */
opacity: 0;
clear:both;
float:left;
text-transform:uppercase;
font-size:10px;
color:#919191;
background:#000;
padding:10px;
text-decoration: none;
margin-top:2px;
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
}
#fwslider .readmore:hover {
color:#fff;
}
/* ------------------------------- 4. Media Query Max Width 1300, Min Width 720 ------------------------------- */
@media only screen and (min-width:720px) and (max-width: 1300px) {
#fwslider .slide_content_wrap { margin-left:50px; margin-top:15%;}
#fwslider .title { font-size:26px; }
#fwslider .description { font-size:12px;}
}
/* ------------------------------- 5. Media Query Max Width 719 ------------------------------- */
@media only screen and (max-width:719px) {
#fwslider .slide_content_wrap { display:none; }
#fwslider .timers { display:none; }
#fwslider .slide_content {cursor: pointer;}
}
SCRIPT::
<!-- Java Scripts -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<script src="http://www.jbmarket.net/demos/fws-slider2/js/css3-mediaqueries.js"></script>
<script src="http://www.jbmarket.net/demos/fws-slider2/js/fwslider.js"></script>
HTML::
<div id="fwslider">
<div class="slider_container">
<!-- ****************** STEP 3: ADD SLIDES ****************** -->
<!-- Duplicate to create more slides -->
<div class="slide">
<!-- Slide image -->
<img src="http://www.jbmarket.net/demos/fws-slider2/img/slide.jpg">
<!-- /Slide image -->
<!-- Texts container -->
<div class="slide_content">
<div class="slide_content_wrap">
<!-- Text title -->
<h4 class="title">New York, USA</h4>
<!-- /Text title -->
<!-- Text description -->
<p class="description">Nam sed porta est. Vestibulum id massa eu odio rhoncus eleifend.</p>
<!-- /Text description -->
<!-- Learn more button -->
<a class="readmore" href="#">Learn More</a>
<!-- /Learn more button -->
</div>
</div>
<!-- /Texts container -->
</div>
<!-- /Duplicate to create more slides -->
<!-- ****************** /STEP 3: ADD SLIDES ****************** -->
<div class="slide">
<img src="http://www.jbmarket.net/demos/fws-slider2/img/slide2.jpg">
<div class="slide_content">
<div class="slide_content_wrap">
<h4 class="title">London, United Kingdom</h4>
<p class="description">Pellentesque non neque egestas libero. Nam sed porta est. Vestibulum id massa eu odio rhoncus eleifend.</p>
<a class="readmore" href="#">Learn More</a>
</div>
</div>
</div><!--/slide -->
<div class="slide">
<img src="http://www.jbmarket.net/demos/fws-slider2/img/slide3.jpg">
<div class="slide_content">
<div class="slide_content_wrap">
<h4 class="title">Chicago, USA</h4>
<p class="description">Aenean mi turpis, euismod id auctor. Vestibulum id massa eu odio rhoncus eleifend.</p>
<a class="readmore" href="#">Learn More</a>
</div>
</div>
</div><!--/slide -->
</div>
<div class="timers"></div>
<div class="slidePrev"><span></span></div>
<div class="slideNext"><span></span></div>
</div> <!--/slider -->
<!-- SLIDER END HERE -->
Silahkan anda utak-atik sendiri kode CSS, SCRIPT & HTML diatas!
Semoga berhasil.. ^^
Semoga berhasil.. ^^
Posting Komentar