Page Content Sliders are a widely used component in modern web development. Basically a slider provides the functionality used in a presentation.The content is divided into slide components as in presentations and the slider automatically changes the content using a sliding animation effect in specific time intervals. Also users can stop the automatic changing and manually switch through the slides using slider navigation bar.

Sliders allows to display web page content in a more user friendly manner. My personal experience on web page content is that users are more likely to visit and stay in web sites that have related images on the content rather than just text content. Also users prefers web sites which interacts with the user when they make some action on the content. Changing link colors on mouseover, changing the opacity of images on mouse over and animation effects on content are some of the best i have seen. Sliders are a one easy way of achieving this. Sliders can be used to

• Display long of content in a small space
• Give the ability to choose the content to view, instead of scrolling long pages to find something
• Provide interaction between user actions
• View content like a video without making any action

There are many jquery sliders available for free which provides lots of functionality on slide transition and some amazing animation techniques. Just Google
“Jquery Sliders” and you will get complete list of different kind of sliders. Even though basically we call it a slider there are many categories of sliders according to their functionality such as “Slideshows”, “Image Switcher” ,”Slide Switcher” “Sliding Panel” ,”Sliding Forms” ..etc. Choosing the right kind of slider for your application is up to you.

I have mentioned that there are many great jquery sliders available.So you may have question why i am developing another slider. Answer is every application has its pros and cons depending on the context we are using. I have been working in web development for the last 4 years and one thing i identifies is some plugins has too much features and some plugins have too less features. Understanding and modifying the external plugins in a small time can be a very difficult task. Hence i thought i need to write my own plugin and make it simple and understandable as possible so anyone can expand the functionalities according to their requirement.

In this tutorial i am going to explain how to create a very simple jquery page content slider plugin for the beginners. In this example i am only focusing
on creating the functionalities such as

• Automatic Slide Switching
• Manual Slide Switching
• Automatic to Manual Slide Transition

• We should be able to display any type of content in the slider page content box.

  This means we need to create a reusable plugin which can take any type of content such as text,images,html elements and we need to pass the content for each slide to the plugin.

• Slider should automatically change the slides in a given time period.

  We need to have a function which calls in a given time interval to show the next slide.

• We should have a method to stop the automatic sliding.

  We need a action on navigation menu to break the repetitive function call in given time period.

• We should have a method to start automatic sliding.

  We need a action on navigation menu to start the repetitive function call in given time period.

• We should be able to go to next and previous slides easily.

  We need a action on navigation menu to find the previous and next slides and display them.

var current = 0;
var slideCount;
var status = 1;

(function($) {
        $.page_slider= {
                defaults:{
                        content : '',
                        container: 'slide_container',
                        containerStyle : 'padding:5%;width: 470px;height: 220px;background-color: #000;color:#fff;font-size:35px;font-weight:bold;',
                        nextSlide:function(){},
                        prevSlide:function(){},
                        stopSlide:function(){},
                        startSlide:function(){}
                }
        };
})(jQuery);

• I have defined 3 variable before the plugin which will be used to store the current slide number,number of slides and automatic/manual status respectively.
• I have named this plugin as “page_slider”. Defaults section contains the default variable values and functions of jquery plugin.
• Variable content is used to pass the page content for slides. We have to pass the content of slides as an array.
• Variable container is used as the main container for slider. All the slides should be included within this element.
• Variable containerStyle is used to define the css styles for the slide content.
• You can assign default values to variable in case if the values are not passed to the function.
• Next 4 items are the functions need to achive our requirements.
• Functions nextSlide and previousSlide is used to view the next and previous slides respectively.
• Function stopSlide will pause the automatic slide transition.
• Function startSlide will restart the automatic slide transition.

                init:function(optionsd) {
                        var options = $.extend($.slide_switch.defaults, optionsd);
                        slideCount = options.content.length - 1;
                        var htm = '';

                        for (i=0;i"+options.content[i]+"