Special Offer - Get $90 Discount and Host Your Dream Web Site @ Dreamhost for 1 Year Click Here. Promo Code SLJ345
Back To Top
WordPress Web Application Development
Develop Powerfull Web Applications Using Cutting Edge WordPress Development Techniques

Jquery Featured Page Content Slider Plugin Tutorial For Beginners

on 2011/07/21 3:10 PM stored in: Uncategorized and tagged:

Introduction To Jquery Page Content Slider

What is a Page Content Slider

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.

Why We need a Page Content Slider

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
About other slide switchers and names

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.

Innovative Page Slider Demo And Download

You might be a very busy person looking for something in quick time. So before reading this long tutorial you might be interested in looking at the demo first and download the source code.

Innovative Page Slider

Why Innovative Page Slider

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.

Innovative Page Slider Features

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

Planning the Page Content Slider Plugin

I thought explaining the plugin planning process is necessary before the development process since most developers are focused on getting code snippets from Internet and using it straightaway without trying to understand. In early days i used to do this and ran into lots of problems in the middle of projects since i was unable to modify the external code. So i suggest everyone should at least get a basic understanding of how something works before using in a real project.


Lets start by listing the things we need to do to create a slider plugin.

  • 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.

Developing Page Content Slider

Now lets start developing based on the previous points. First I am going to give the structure of our plugin code using jquery and explain.

Basic Structure of Page Slider Plugin

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.
Initializing the Page Slider
		init:function(optionsd) {
			var options = $.extend($.slide_switch.defaults, optionsd);
			slideCount = options.content.length - 1;
			var htm = '';

			for (i=0;i<options.content.length;i++){
				if(i==0){
					htm += "<div id='sli0' style='"+options.containerStyle+"'>"+options.content[i]+"</div>";
				}else{
					htm += "<div id='sli"+i+"' style='display:none;"+options.containerStyle+"'>"+options.content[i]+"</div>";
				}
			}

			$('#start_switch').click(function() {
				status = 1;
				$.slide_switch.startSlide();
			});

			$('#stop_switch').click(function() {
				$.slide_switch.stopSlide();
			});

			$('#prev_slide').click(function() {
				status = 1;
				$.slide_switch.prevSlide();
			});

			$('#next_slide').click(function() {
				$.slide_switch.nextSlide();
			});


			$('#'+options.container).html(htm);
			$.slide_switch.startSlide();
		}
	
  • First i have calculated the number of slides using the content array passed to the plugin.
  • Then inside the for loop actual slides are created. Its necessary to create slides with common id format. Ex: sli0,sli1,sli2.
  • We have to hide display the first slide and hide other slides. So i have used separate styles for first slide and other slides.
  • Then the content passed through array is added to the slides.
  • Then i have defined the functions to be called for each navigation button.
  • Function stopSlide will pause the automatic slide transition.
  • Finally we assign the slides to the slide container and start the page sliding animation by calling startSlide function.
Creating the Slide Navigation Functions
		startSlide:function() {
			if(status==0){
				return;
			}
			$("#sli"+current).css('display','none');
			current++;
			if(current>slideCount){
				current = 0;
			}
			$("#sli"+current).slideDown('1000', function() {

			});

			setTimeout(function() {
				$.slide_switch.startSlide();
			}, 7000);
		},
		nextSlide:function() {

			status = 1;
			if(status==0){
				return;
			}

			$("#sli"+current).css('display','none');
			current++;
			if(current>slideCount){
				current = 0;
			}

			$("#sli"+current).slideDown('1000', function() {

			});
		},
		stopSlide:function() {
			status = 0;
		},
		prevSlide:function() {

			status = 1;
			if(status==0){
				return;
			}

			$("#sli"+current).css('display','none');

			current--;
			if(current<0){
				current = slideCount;
			}

			$("#sli"+current).slideDown('1000', function() {});
		}
	
  • In this section i'll explain the code for our slide navigation functions.
  • startSlide function is used to initiate the automatic page sliding feature..
  • First we check the status var and if it is 0 we abort. Variable status becomes 0 when we click the stop button. If the stop button is pressed
    automatic sliding should be stopped and hence we avoid the next slide when status is 0.
  • Then we hide the current slide by using display none and increase the value of current slide number.
  • Then we check if the current slide is the last slide on the array if so we need to load the first slide using current=0.
  • Next we display the next slide by using jquery slideDown method with an animation.
  • Finally we call the same function (startSlide) in 7 seconds to continue the automatic sliding.
  • nextSlide function is used to manually load the next slide on the slideshow by clicking a button.
  • Same code used for startSlide function is used for this.Only difference is we don't need to call the function repetitively since this is manual slide transition.
  • previousSlide function is used to manually load the previous slide on the slide show by clicking a button.
  • Code is almost same as the nextSlide function. Only difference is that we set the current slide to last slide once it comes to the first slide.
  • stopSlide function is used to stop the automatic sliding effect.
  • Once you set the status to 0 nextSlide function will abort and hence automatic sliding will be paused.
Calling the Plugin to Start the Page Content Slider
		$(document).ready(function() {
			var content = ['<img src="slash1.jpg" />','<img src="slash2.jpg" /&gt','<img src="slash3.jpg" /&gt','<img src="slash0.jpg" /&gt'];
			$.slide_switch.init({
				content:content,
				containerStyle : 'padding:5%;color:#fff;font-size:35px;font-weight:bold;'
			});
		});
	
  • Define the content in a array. This content can be text or any html elements.
  • Pass the contents and styles to $.slide_switch.init method to start sliding content

What's Next

In this tutorial i have created a basic page sliding component with code explanations. Now it's up to you to add more functionalities and develop this plugin further. I hope to hear from you about the explanations or functionality of this plugin.

14 Responses to “Jquery Featured Page Content Slider Plugin Tutorial For Beginners”

  1. Better SEO Says:

    Attention Website Owner. I got to your site on Google and as a seo optimizer I thought that I’d share with you how you could be ranking higher without much work on your part, there is a WordPress SEO plugin that does automated SEO for your site, automated SEO plugins like this are brand new to the blog scene so having this would give your site a huge increase in views. If you are serious about making your blog grow and make money then check it out by clicking my name.

  2. 贍養費 Says:

    This is my first time i visit here! I found so many useful stuff in your website especially its discussion. From the a lot of comments on your articles. I guess Im not the only one receiving the many satisfaction right here! keep up a good job!

  3. Terry Brockmeyer Says:

    you’re doing a great job by posting such awesome stuffs keep it going. loving the work mate

  4. kliknij tutaj Says:

    I think this is one of the most vital info for me. And i am glad reading your article. But want to remark on some general things, The website style is great, the articles is really great : D. Good job, cheers

  5. Cathryn Listen Says:

    Thank you for sharing excellent informations. Your web site is very cool. I’m impressed by the details that you have on this web site. It reveals how nicely you perceive this subject. Bookmarked this web page, will come back for extra articles. You, my friend, ROCK! I found just the information I already searched everywhere and simply couldn’t come across. What an ideal website.

  6. Taccariello Says:

    My partner and I absolutely love your blog and find nearly all of your post’s to be just what I’m looking for. Does one offer guest writers to write content for you personally? I wouldn’t mind producing a post or elaborating on a lot of the subjects you write related to here. Again, awesome site!

  7. admin Says:

    I can give others the chance to guest post. Use the contact form to send information.

  8. website builder Says:

    This article makes sense and makes for very interesting reading. This is unique and enlightening content. Thank you for sharing your expertise and views in this area. I truly enjoyed taking in all this information.

  9. Lenora Gayne Says:

    I will be actually pleased with your ability as a copywriter and in addition using the format on your own blog site. Is that this any paid out style as well as did you adjust the idea yourself? In any case maintain the great good quality composing, it can be unusual to see a good blog site like this one nowadays..

  10. Gayle Marchetti Says:

    Having a photography website is a great way to market your services and grow your business. Create a professional photography website as soon as possible to display your work to the world.

  11. Richard Mouff Says:

    Hello, I couldn’t find the proper contact form so I hope you don’t mind me writing here. Please contact me immeditely at advertisingwithricky at gmail.com , I would like to send you straight cash to advertise on your website.

  12. make money online not fast Says:

    Your website has definitely inspired me to really totally rethink the way I write. I want to let you know I appreciate your great work.

  13. admin Says:

    My contact form is available on this link http://www.innovativephp.com/contact/. thanks for commenting.

  14. admin Says:

    Thanks for your idea. You have got a nice web site too. Everyone shoud check out Gayle Marchetti’s web site.

Leave a Reply

Follow Us On Facebook