Call me!
cell: 612-730-9540

Responsive jQuery Flexslider

Project Fall 2013:

Responsive jQuery Flexslider by Valeriu Timbuc

I decided to look up free responsive jQuery sliders that have touch sliding built in. My search first brought me to DesignsCrazed 20 Free Responsive jQuery Image Sliders article where I worked my way down the list on my Android to see what works best with a smartphone. The solution needed: a) a previous and next button, b) a select frame navigation, and, c) finger swiping capabilities. Out of the 20 listed I narrowed it down to 3, then 2, then finally settled on Valeriu Timbuc's tutorial on creating a responsive jQuery slider using WooThemes Flexslider. Rather than rewrite the tutorial I'll speak to my own individual changes.

  • Homage to Chuck Close, 18in x 24in, Fall 2013

    Title: Homage to Chuck Close, 18in x 24in, Fall 2013

  • Homage to Willem Dekooning, 18in x 24in, Summer 2013

    Title: Homage to Willem Dekooning, 18in x 24in, Summer 2013

  • Blue Abstract, 18in x 24in, Spring 2013

    Title: Blue Abstract, 18in x 24in, Spring 2013

  • Orange, 18in x 24in, Fall 2012

    Title: Orange, 18in x 24in, Fall 2012

  • September 26, 18in x 24in, Fall 2013

    Title: September 26, 18in x 24in, Fall 2013

The Code Reveal:

First: The HTML


<div class="flex-container">
    <div class="flexslider">
        <ul class="slides">
            <li><img src="myArt01.jpg" class="bigpic" alt="Homage to Chuck Close, 18in x 24in, Fall 2013" />
                <p><strong>Title:</strong> Homage to Chuck Close, 18in x 24in, Fall 2013</p>
            </li>
            <li><img src="myArt02.jpg" class="bigpic" alt="Homage to Willem Dekooning, 18in x 24in, Summer 2013" />
                <p><strong>Title:</strong> Homage to Willem Dekooning, 18in x 24in, Summer 2013</p>
            </li>
            <li><img src="myArt03.jpg" class="bigpic" alt="Blue Abstract, 18in x 24in, Spring 2013" />
                <p><strong>Title:</strong> Blue Abstract, 18in x 24in, Spring 2013</p>
            </li>
            <li><img src="myArt04.jpg" class="bigpic" alt="Orange, 18in x 24in, Fall 2012" />
                <p><strong>Title:</strong> Orange, 18in x 24in, Fall 2012</p>
            </li>
            <li><img src="myArt05.jpg" class="bigpic" alt="September 26, 18in x 24in, Fall 2013" />
                <p><strong>Title:</strong> September 26, 18in x 24in, Fall 2013</p>
            </li>
        </ul>
    </div>
</div>

Right-click the images as they come up in my slider to download them to whatever folder you want them on you desktop or do your own. The tutorial shows a few different ways you can mark up the images - you can add a link to go to another page, have no link (just the image) and you can add text elements using the CSS provided to move them around and style them up however you want.

Next: The Script


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="jquery.flexslider-min.js"></script>
<script>
	$(document).ready(function () {
		$('.flexslider').flexslider({
			animation: 'fade',
			controlsContainer: '.flexslider'
		});
	});
</script>

Place the script inbetween the <head> </head> tags or below the footer, if you're progressive. Make sure you download the jquery.flexslider-min.js file and place it where ever you want. The script does everything you want - even dynamically creating the frame button navigation seen below the images and titles - and you can add additional options. Go to WooThemes Flexslider page to see what options you can have.

Lastly: The CSS


<style>
.flex-container a:active,
.flexslider a:active,
.flex-container a:focus,
.flexslider a:focus  { outline: none; }
 
.slides,
.flex-control-nav,
.flex-direction-nav { margin: 0; padding: 0; list-style: none; }
 
.flexslider a img { outline: none; border: none; }
 
.flex-container { margin: 0 0 15px; }
.flexslider { margin: 0; padding: 0; }
.slides { }
.flexslider .slides > li { display: none; -webkit-backface-visibility: hidden; }
#content section .flexslider ul, #content section .flexslider ol { width: 67.79661016949153%!important; padding: 0!important; margin: 0 0 0 15%!important; }
#content section ul.slides li { text-align: center; z-index: 99; }
#content section ul.flex-direction-nav li a { z-index: 999; }
.flexslider .slides img { display: block; margin: 0 0 20px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; }
.slides:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
 
html[xmlns] .slides { display: block; }
* html .slides { height: 1%; }
.flexslider { position: relative; zoom: 1; padding: 10px; background: #e9eff5; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: 0px 1px 1px rgba(0,0,0, .2); -moz-box-shadow: 0px 1px 1px rgba(0,0,0, .2); box-shadow: 0px 1px 1px rgba(0,0,0, .2); }
 
.flexslider .slides { zoom: 1; }
.flex-direction-nav a { display: block; position: absolute; margin: 0; width: 75px; height: 75px; top: 40%; cursor: pointer; text-indent: -9999px; }
.flex-direction-nav a:before { z-index: 99999; display: block; position: absolute; content: ''; width: 9px; height: 13px; top: 11px; left: 11px; }
 
.flex-direction-nav a:after {  }
.flex-direction-nav .flex-next { right: -5px; -webkit-border-radius: 3px 0 0 3px; -moz-border-radius: 3px 0 0 3px; border-radius: 3px 0 0 3px; background: url(../../images/go-next-icon.png) no-repeat; margin: 0 10px 0 0; }
 
.flex-direction-nav .flex-prev { left: -5px; -webkit-border-radius: 0 3px 3px 0; -moz-border-radius: 0 3px 3px 0; border-radius: 0 3px 3px 0; background: url(../../images/go-previous-icon.png) no-repeat; margin: 0 0 0 10px; }
 
.flex-direction-nav .flex-next:before { background-position: -9px 0; left: 15px; }
.flex-direction-nav .flex-prev:before { background-position: 0 0; }
 
.flex-direction-nav .flex-next:after { right: 0; border-bottom: 5px solid transparent; border-left: 5px solid #31611e; }
 
.flex-direction-nav .flex-prev:after { left: 0; border-bottom: 5px solid transparent; border-right: 5px solid #31611e; }
.flexslider .flex-control-nav { text-align: center; }
 
.flex-control-nav li { display: inline-block; zoom: 1; }
 
.flex-control-paging li a { display: block; cursor: pointer; text-indent: -9999px; width: 35px; height: 35px; margin: 0 3px; background-color: #b6b6b6 \9; -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; -webkit-box-shadow: inset 0 0 0 2px #b6b6b6; -moz-box-shadow: inset 0 0 0 2px #b6b6b6; box-shadow: inset 0 0 0 2px #b6b6b6; }
 
.flex-control-paging li a.flex-active { background-color: #2361A1; background-image: -webkit-gradient(linear, left top, left bottom, from(#2361A1), to(#071320)); background-image: -webkit-linear-gradient(top, #2361A1, #071320); background-image: -moz-linear-gradient(top, #2361A1, #071320); background-image: -o-linear-gradient(top, #2361A1, #071320); background-image: linear-gradient(to bottom, #2361A1, #071320); -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; }
.flexslider .slides p {  }
@media screen and (min-width: 780px) and (max-width: 960px){
	.flex-container { width: 90%; padding: 2.41935483870968%; }
	.bigpic { width: 100%; height: auto; }
	}
@media screen and (min-width: 650px) and (max-width: 779px){
	.bigpic { width: 100%; height: auto; }
	.flex-direction-nav a { top: 30%; }
}
@media screen and (max-width: 649px){
	.bigpic { width: 90%; height: auto; }
	.flex-direction-nav a { top: 30%; width: 55px; height: 55px; }
	#content section .flexslider ul { margin: 0 0 0 20%!important; }
	#content section .flexslider ol { margin: 0 0 0 15%!important; }
	.flex-direction-nav .flex-next { background-size: 55px 55px; }
 
.flex-direction-nav .flex-prev { background-size: 55px 55px; }
}
</style>

I massaged the CSS to suit my needs, such as changing where the text lays out, which previous/next navigation images I want and I added additional media queries to taylor the look to suit dimensions for various breakpoints on mobile devices.

Contact me

If you would like to speak with me more about my qualifications, experiences and what I can do for you please feel free to contact me.