Submit your widget

jQuery iOS-Style Content Slider effect

Created 5 years ago   Views 46979   downloads 11019    Author designm
jQuery iOS-Style Content Slider effect
View DemoDownload 946.3 KB
90
Share |

the demo focus on one of these plugins  and we'll called iosSlider.

Typically web developers have been using jQuery to enhance the media in these content sliders. Many other ideas have come to fruition and this has spurred a generation of brand new plugins for jQuery developers.

First we want to create our bare HTML5 webpage and setup the core HTML structure. There are a lot of tags we need to include which relate to each image in the slideshow. Plus we are using custom headings and page text inside each of the sliding panels. But first we should take a peek at the document heading section.

<!doctype html>
<html lang="en-US">
<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  <script type="text/javascript" charset="utf-8" src="jquery.easing-1.3.js"></script>
  <script type="text/javascript" charset="utf-8" src="jquery.iosslider.min.js"></script>
</head>

Take note that I am including a series of JS files to ensure that our plugin works to the maximum capacity. First is the latest jQuery library hosted by Google APIs. Then followed by jQuery easing and finally our iosSlider plugin codes. All of the working JavaScript has been added into the bottom of the HTML body inside <script></script> tags.

Moving on we should now examine the internal HTML and see how this works to generate the basic slideshow. By including a series of content wrappers the goal is to keep our widget fully responsive to display properly on mobile smartphones. The functionality is already built using jQuery so it is worth the extra HTML.