Best SEO CompaniesThere are so many JavaScript image slideshow plugins out on the Internet, it can be difficult pinpointing what you need. Developers who are not looking to start from scratch often search the web targeting the perfect solution. And although each technique has its drawbacks, the wide assortment of choices will offer plenty of rewards and something to fit your layout.
In this tutorial I want to focus on using a library called Flux Slider which was created by Joe Lambert. This image slideshow plugin is unique in that it defaults to using CSS3 transitions with JavaScript-controlled alternatives. All modern CSS3-compliant browsers will support the native features which can be set using jQuery or Zepto.js as the core library. Catch a glimpse of the demo we are building in my live example below.
Table of Contents
Building the Document
To get started you should download a copy of the Flux Slider source code for editing. A good place to check is the official Github page which contains a few other extra page contents. Or you can download a minified version directly from Joe’s website.
I will be using the Zepto.js method since this will usually produce the best results. jQuery is a bit trickier in comparison, and the instantiation function did not always run in my test demos. Anyways you can get a local minified Zepto library or grab the links off Github. Otherwise the only other required documents are a page stylesheet and some external Google Web Fonts.
<!doctype html>
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>CSS3/JS Flux Image Slider Demo</title>
<meta name="author" content="Jake Rocheleau">
<link rel="shortcut icon" href="https://www.bestseocompanies.com/favicon.ico">
<link rel="icon" href="https://www.bestseocompanies.com/favicon.ico">
<link rel="stylesheet" type="text/css" media="all" href="https://fonts.googleapis.com/css?family=Skranji:400,700">
<link rel="stylesheet" type="text/css" media="all" href="css/styles.css">
<script type="text/javascript" charset="utf-8" src="js/zepto.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/flux.min.js"></script>
<!--[if lte IE 8]>
<script type="text/javascript" src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>Interesting enough we do not need a whole lot of HTML for the inner body. Flux will run properly when pointing towards a container element which holds a series of image tags. There are parameters we can pass for customization, but the simplicity is what makes this plugin worthwhile.
Flux Image Container
Down in the page body I have a div with the ID #w for the outer wrapper, and #slidecontainer which holds all the images. This will be passed into the object selector when we call Flux in JavaScript later on.
<div id="w">
<h1>Custom CSS3 Animated Slider</h1>
<div id="slidecontainer">
<!-- https://dribbble.com/shots/976821-Flaer-A-new-app-for-iPhone -->
<img src="images/01-jeff-broderick-ios-app-ui.png" alt="iOS App user interface" title="iOS UI by Jeff Broderick">
<!-- https://dribbble.com/shots/976944-Custom-Picker -->
<img src="images/02-iphone-custom-date-picker.png" alt="custom iphone app date picker ui" title="Custom picker by Michael Dolejs">
<!-- https://dribbble.com/shots/977758-UI -->
<img src="images/03-magical-photo-app-interface.png" alt="iphone app interface ui photo editing" title="Simple UI by Prakash Ghodke">
<!-- https://dribbble.com/shots/976988-Sign-In-practice -->
<img src="images/04-iphone-sign-in-app-page.png" alt="iphone app signin form" title="Sign-in practice by Trey McKay" />
</div>
</div>Notice the simplicity of how the HTML does not require a large series of formatted lists. Although Flux can operate on ordered/unordered lists, I do not think it adds much benefit to the website. You can get by rendering less page elements and Google can still figure out the container is an image slideshow.
Page Styles in CSS
There is a fairly decent chunk of styles which are used for hiding the images and sprucing up the outer container. Plus some other special features like image captions and navigation buttons. I am using the container ID in the CSS selector, but it is also possible to use class names. This would allow multiple image slideshows embedded on the same page.
/* page structure */
#w {
width: 830px;
margin: 0 auto;
padding-top: 35px;
}
/* image slider */
#slidecontainer {
padding: 20px 12px;
background: #33363b;
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2), 0 0 9px rgba(0, 0, 0, 0.8) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2), 0 0 9px rgba(0, 0, 0, 0.8) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2), 0 0 9px rgba(0, 0, 0, 0.8) inset;
}
#slidecontainer .fluxslider .surface .images div {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
#slidecontainer .fluxslider .pagination {
margin-top: 5px !important;
font-size: 1.4em;
font-weight: bold;
}
#slidecontainer .fluxslider .pagination li {
padding: 4px 6px;
text-shadow: 1px 1px 0 rgba(255,255,255,0.3);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
#slidecontainer .fluxslider .pagination li:hover, #slidecontainer .fluxslider .pagination li.current {
color: #eee;
background: #000;
}Aside from my default page resets, this block of code will almost complete the entire stylesheet. You can tell it may seem like a lot, but I have also added some extra properties for aesthetics. In reality the Flux Slider is a very small plugin which doesn’t need a lot of intrusive code.
Notice there is a lower internal class named .pagination and this refers to the dot-notation links at the bottom. Users may click these to navigate between images and skip around the slideshow. The default colors work well on dark surfaces, and I have mirrored some of my own custom CSS styles as well. But I think they are easy enough to customize for almost any situation.
Flux Slider JS in Action
Finally we can wrap the whole page together with our JavaScript calls. I have added this block of code at the very bottom of the index page, just before closing the </body> tag. Alternatively you might copy these codes into an external JS file and that would also be fine.
<script type="text/javascript">
$(function(){
// setup the various CSS3 transition options. uncomment the following syntax to combine into one line
// var tarray = ['blinds', 'slide'];
var tarray = new Array();
tarray.push('blinds');
tarray.push('slide');
I split the block into 2 sections so we can focus on each part. These first few lines are instantiating a new variable named tarray, which stands for transitions array. We need to pass an array of transitions into the function, or else it will choose a random one each time. Using the JavaScript push() method we can quickly add them by keywords. Here are a few more you might want to try out:
- bars
- zip
- blocks
- warp
- swipe
- concentric
You may choose to include only a single transition into the array if you’d prefer limiting to only one animation. The random differences can get annoying to some visitors, so the choice is up to you.
window.myFlux = new flux.slider('#slidecontainer', {
autoplay: true,
pagination: true,
captions: false,
transitions: tarray,
delay: 5500
});
});
</script>The function we pass to the window is called flux.slider() and we are using the same div ID as before. Inside the curly brackets are specific parameters which are optional, but can optimize performance features of the slideshow widget. My examples set animations to start once the page loads and includes the small circular pagination links at the bottom. By including a title attribute you may add image captions onto each slide, but I have these turned off.
Then the final two parameters are checking the array of acceptable transitions, and the delay between each new image. The jQuery method is called almost the same way but with some different syntax. I have included a sample from Joe’s documentation page which behaves similar as the Zepto plugin.
$(function(){
window.myFlux = $('#slidecontainer').flux();
});Final Thoughts
You can tell the Flux Slider is a fairly simple plugin to install. By spending just a bit of practice to install and customize, you can get a working Flux image slideshow on your website within a few hours at most. I specifically feel this plugin is very simple and doesn’t require lots of unnecessary HTML/CSS or JavaScript parameters.
Either way Flux is a great choice for nearly any website template. Be sure to download a copy of my demo codes if you want to delve a bit further. It can be easier copying & pasting the working results into your own HTML if you are running into bugs. Additionally let us know your thoughts or questions in the post discussion area below.
Best SEO Companies