BaseShift

Version 1.02

BaseShift is built on Jquery 1.3.2. This is a small demonstration page for it.

Download

Requires jQuery 1.3.2. In the tarball you will find the next/prev buttons, css and the javascript: [tar.gz] | [zip]

Test 1: Simple carousel


  • You can add text
  • Or whatever html you want
  • Just look at this code

If you view the source, you will see that you can define three different callbacks: first, last and std (standard). Std will be called for every "normal, non end" element, and first and last are called for the first and last elements..

Notice the phantom element on the third slide to replace the missing image.

Test 2: Infinite carousel with in box buttons (visible on mouseover)

Just a little place holder to demonstrate in box buttons. Make sure the buttons are gif's, or add a pngfix for ie compatibility.

Test 3: Infinite single image switcher

Test 4: Simple in box image switcher

View the source for this example to see how the first and last callbacks are used to hide the buttons when reaching the ends...

The HTML for all these examples is pretty much the same:


	  <a class="prev" id="prev" ></a>
		<div class="BS_slider" id="slidertest">	
		  <ul>
			<li><img src="images/image1.JPG"><br /a>You can add text</li>
			<li><img src="images/image2.JPG">Or whatever html you want</li>
			<li><img src="images/image3.JPG">Just look at this code</li>
			<li><img src="images/image4.JPG"></li>
			<li><img src="images/image5.JPG"></li>			
		  </ul>	
		</div>
	  <a class="next" id="next"></a>

The JQuery code is quite simple as well:


	  $("#slidertest").baseshift();

This will produce an infinite slider with two elements and use .prev and .next for the buttons ( these are the default values ). The examples should be fairly easy to understand.

Here is the javascript for all of the examples


	  $(document).ready(function() {
		$("#slidertest").baseshift({
		  step: 2,
		  visible:2, 
		  last: function(){
			$("#next").fadeTo("fast",0.2);				
			$("#prev").fadeTo("fast",1);
		  },
		  first: function(){
			$("#prev").fadeTo("fast",0.2);
			$("#next").fadeTo("fast",1);				
		  },
		  std: function(){
			$("#prev").fadeTo("fast",1);
			$("#next").fadeTo("fast",1);	
		  },
		  next: "#next",
		  prev: "#prev"
		});						
		$("#slidertest_inf").baseshift({
		  step: -1,
		  inbox: 1,
		  visible: 3,
		  next: "#next2",
		  prev: "#prev2"
		});
	
		$("#slidertest_single").baseshift({
		  step: -1,
		  inbox: 0,
		  visible: 1,
		  next: "#next3",
		  prev: "#prev3"
		});
		  
		$("#slidertest_inf_inbox").baseshift({
		  step: 2,
		  inbox: 1,
		  visible:2,
		  prev: "#prev4",
		  next: "#next4",
		  first: function(){
			$("#prev4").fadeTo("fast",0.01);
		  },
		  last: function(){
			$("#next4").fadeTo("fast",0.01);
		  },
		  std: function(){}
		});
	  });

Options:

  • prev: Contains the jquery selector for the prev button (".prev" by default)

  • next: Contains the jquery selector for the next button (.next" by default)

  • inbox: When set to 1, next_inbox and prev_inbox styles will be added to the next / prev buttons to achieve the "In box effect"

  • visible: Number of items visible in one window/view port. Be aware that this number determines the width of the whole slider, as it gets the first elements width and uses that to set the entire width. Visible should always be a multiple of step for the slider to work correctly.

  • step: Number of items the slider scrolls on each press of next or previous button. (Default is -1 which steps by number of visible elements)

  • first: last: std: The slider uses these callbacks to determine whether or not you want an infite carousel. If you definie 'first:' and 'last:' the carousel will not be infinit. In addition to this you can use them for customized behaviour.

Notes

  • The module has not had heavy browser testing, but has been tested lightly on Firefox, IE6 & IE8 and google chrome.

  • Baseshift was inspired by this article on jqueryfordesigners.com (big thanks). Of course, we added a little bit of magic here and there...

  • We use this module for many of our projects and are constantly improving it. We will make efforts to update this page and the released BasaeShift version.

  • We wrote this module for our own use and did not intend to release it. It will not tell you the meaning of life, it will not cure world hunger and it is not perfect, but it does the trick.