Fashion Responsive Slider Tutorial

grahambill, Tutorials

In this tutorial, we’ll create a responsive slider with new feature of css3 (media queries) to alter the design and layout of a website slider to fit different screen sizes. We have design to change the layout from large screens to smaller screens support, making it responsive display.

demo  download
Responsive design is the best way to fix screen solution problem, In this tutorial, we’ll focus on design of the user experience image slider to make it run better both on computer and mobile devices.

In this slider, we have design to response layout width small than 1000px, it will display slider in smart phone version and layout width bigger than 1000px, it will display menu on computer version.

This slider we’ll be using the following jQuery plugins:

FlexSlider markup is simple and straightforward

Let’s start with the HTML

The Markup

The HTML will be built up viewport meta tag to control layout on mobile browsers

A typical mobile-optimized site contains something like the following:

<head>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/>
</head>

The slider plugin and javascript  function will have the following structure:

 <!-- jQuery -->
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <!-- FlexSlider -->
    <script type="text/javascript" src="js/jquery.flexslider-min.js"></script>
    <script type="text/javascript" charset="utf-8">
    var $ = jQuery.noConflict();
    $(window).load(function() {
    $('.flexslider').flexslider({
          animation: "fade"
    });

	$(function() {
		$('.show_menu').click(function(){
				$('.menu').fadeIn();
				$('.show_menu').fadeOut();
				$('.hide_menu').fadeIn();
		});
		$('.hide_menu').click(function(){
				$('.menu').fadeOut();
				$('.show_menu').fadeIn();
				$('.hide_menu').fadeOut();
		});
	});
  });
</script>

The slider html will have the following structure:

<div class="slider_container">
		<div class="flexslider">
	      <ul class="slides">
	    	<li>
	    		<a href="https://www.freshdesignweb.com"><img src="images/slider/slide1.jpg" alt="" title=""/></a>
	    		<div class="flex-caption">
                     <div class="caption_title_line"><h2>Party Hairstyles</h2><p>Find the perfect hairstyle a la Lauren Conrad for every type of festive fête.</p></div>
                </div>
	    	</li>
	    	<li>
	    		<a href="https://www.freshdesignweb.com"><img src="images/slider/slide2.jpg" alt="" title=""/></a>
	    		<div class="flex-caption">
                     <div class="caption_title_line"><h2>Beautiful Hairstyle</h2><p>The latest hairstyles and instructions on how to create them here. Total Beauty has your complete hairstyles guide</p></div>
                </div>
	    	</li>
	    	<li>
	    		<a href="https://www.freshdesignweb.com"><img src="images/slider/slide3.jpg" alt="" title=""/></a>
	    		<div class="flex-caption">
                     <div class="caption_title_line"><h2>Party Dresses</h2><p>If you are looking for something a little special for your big night out, check out Rare London's collection of stunning party dresses</p></div>
                </div>
	    	</li>
	    	<li>
	    		<a href="https://www.freshdesignweb.com"><img src="images/slider/slide4.jpg" alt="" title=""/></a>
	    		<div class="flex-caption">
                     <div class="caption_title_line"><h2>Bodycon Dresses</h2><p>The bodycon dress is a key silhouette for this season's party girl; from sleek colour-block panelling to geometric prints the bodycon.</p></div>
                </div>
	    	</li>
	    </ul>
	  </div>
   </div>

The Cascading Style Sheets (CSS)

The fashion slider css will have the following code:

.slider_container{ width:920px; margin:auto; clear:both; background:url(images/shadow_top.png) no-repeat top center; padding:30px 0 0 0;}
.flex-caption{ position: absolute; right:11px; bottom:20px;}
.caption_title_line{ width:450px; height:75px; padding:5px 15px 10px 15px;background:url(images/slider_caption_bg.png) repeat;color: #303030;}
.flex-caption h2{ color:#303030;font-size:20px; padding:5px 0 5px 0; margin:0px;font-family: 'Ovo', serif;}

.flex-container a:active,
.flexslider a:active {outline: none;}
.slides,
.flex-control-nav,
.flex-direction-nav {margin: 0; padding: 0; list-style: none;} 

/* FlexSlider Necessary Styles
*********************************/ 
.flexslider {width: 100%; margin: 0; padding: 0 0 30px 0;background:url(images/shadow_bottom.png) no-repeat center bottom;}
.flexslider .slides > li {display: none;} /* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img {max-width: 100%; display: block; border:10px #ededed solid;}
.flex-pauseplay span {text-transform: capitalize;}
.slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;} 
html[xmlns] .slides {display: block;} 
* html .slides {height: 1%;}
.no-js .slides > li:first-child {display: block;}
.flexslider {position: relative; zoom: 1;}
.flexslider .slides {zoom: 1;}
.flexslider .slides > li {position: relative;}
.flex-container {zoom: 1; position: relative;}

/* Direction Nav */
.flex-direction-nav li a {width:45px; height:42px; margin:0; display: block; position: absolute; right:11px; cursor: pointer; text-indent: -9999px;}
.flex-direction-nav li a.next {background:url(images/next.png) no-repeat center; bottom:184px;}
.flex-direction-nav li a.prev {background:url(images/prev.png) no-repeat center;bottom:141px;}
.flex-direction-nav li a.next:hover {background:url(images/next_a.png) no-repeat center;}
.flex-direction-nav li a.prev:hover {background:url(images/prev_a.png) no-repeat center;}
.flex-direction-nav li a.disabled {opacity: .3; filter:alpha(opacity=30); cursor: default;}

/* Control Nav */
.flex-control-nav {width: 100%; position: absolute; bottom: -30px; text-align: center;}
.flex-control-nav li {margin: 0 0 0 5px; display: inline-block; zoom: 1; *display: inline;}
.flex-control-nav li:first-child {margin: 0;}
.flex-control-nav li a {width: 13px; height: 13px; display: block; cursor: pointer; text-indent: -9999px;}
.flex-control-nav li a:hover {background-position: 0 -13px;}
.flex-control-nav li a.active {background-position: 0 -26px; cursor: default;}

The media queries css will have the following code:

@media screen and (max-width: 1000px) {
.slider_container{ width:90%; margin:0 0 0 2%; clear:both; background:none; padding:30px 0 0 0;}
.flexslider {width: 100%; margin: 0; padding:0 0 30px 0;background:none;}
.flex-direction-nav li a {width:45px; height:42px; margin:0; display: block; position: absolute; right:-10px; cursor: pointer; text-indent: -9999px;}
.flex-direction-nav li a.next {background:url(images/next.png) no-repeat center; bottom:85px;}
.flex-direction-nav li a.prev {background:url(images/prev.png) no-repeat center;bottom:40px;}
.flex-caption { display:none;}
}

Now! We have a fashion responsive slider with CSS3. Check out the demo below, and feel free to download this example for future use. I hope you enjoyed this tutorial and find it useful!

Related

40+ Free Responsive Navigation Menu Plugins & Tutorials

20+ PHP jQuery CSS Poll Vote & Survey Code Script

90+ Free Responsive jQuery Image Slider & Slideshow Download

30+ Free HTML5 jQuery Upload File Scripts Example

50+ Useful jQuery CSS3 Loading & Progress Bar Tutorials

Written by

Feedback Leave a comment

Leave a Reply

Your email address will not be published. Required fields are marked *