PlusSlider 1.0

10 Jan

I’ve been working on PlusSlider and I’ve finally finished Version 1 as promised.

The two features I’m most proud of:

the ability to swap between fading & sliding seamlessly
Extremely easy to use

Compatibility

I’ve tested PlusSlider 1.0 on IE7+, Chrome 8, Firefox 3.6, Safari 5, Opera 10.63 and it works perfectly.

If you find any problems or would like new features, let me know and I’ll work on it.

What say you?

Jonatas CD says:

28 Mar2011

Hey!

great job!

look, how to show numbers in controls? I`ve tryed createPagination: true but they dindt show up – tips?

cheers

Reply
1. Jamy Golden says:
  
  29 Mar2011
  
  Thanks =)
  
  They actually show up by default, the CSS property ‘text-indent’ hides the numbers.
JonatasCD says:

03 Apr2011

Hey!

Actually I found where to change (in the code I’ve got from github) when I saw that font-size:0; declaration
=]

anyway, thanks for your answer!

Reply
Ron Ferraro says:

20 Apr2011

I wanted to let you know that I used your PlusSlider on a website I did for the company I work for. I hope that’s okay. Great work! I’ve been very unhappy with just about every slider I’ve come across until I stumbled onto yours. Works in nearly all browsers perfectly, allows just about any element, so I can have SEO text visibly & prominently included, you’ve got pagination, fading, sliding, and back/next buttons… Works like a Dream, Thank you so much!

My only glitch is in IE6, but who cares about that crap? It doesn’t happen on your demo, but I get the last pagination link overflowing to the next line. No big deal, just annoying. Works fine on everything else. Who expects ie6 to work anyway?

Reply
Jordan Lev says:

22 Apr2011

Thank you for making this slider, which appears to be perfectly suited for my needs. Something I think might be really helpful is providing an example of what the “generated HTML” looks like — that way it would be really easy to see which css classes need to be styled in certain ways.

Also, it would be great if in addition to the sample code you provide with the download, there was also an example that didn’t have any styling at all (or at least very minimal styling). Like just showing the navigation links as an unstyled bullet list off to the side of the slideshow, and the “previous” and “next” buttons just a plain link off to the side as well.

This would make it much easier to figure out how to customize it yourself (which seems to be your intended purpose with this, as opposed to some of the more full-featured slideshows that are attempting to provide a fully-themed experience “out of the box”).

Thanks again!

Reply
bandinvence says:

27 Apr2011

Hi, I love this slider!!! would it be circle with horizontal effect?? I mean, without returning to the first one, I’d like it to be continuous..

Thks!!

Reply
1. Jamy Golden says:
  
  29 Apr2011
  
  Hi and thanks =)
  I’m going to work on this for the next version release.
William says:

19 May2011

Brilliant Work! This is by far simplest, most easy slider I’ve found.

One question though – how do you adjust the width of div.plusSlider-controls? It appears to be generated in the JS but I can’t figure it out. Any help would be greatly appreciated!

Reply
1. Jamy Golden says:
  
  20 May2011
  
  Thanks William. .plusSlider-controls width is automatically and dynamically generated with this option: paginationWidth: true. Just add paginationWidth: false to turn that off and you will have full control via the CSS. Let me know if there is anything else I can help you with =)
egiova says:

16 Jul2011

Just Coooool! I agree with your statement: it works the right way. Simple and straight. Many thanks for sharing.
As soon (sooner than later) I use it in a project I’ll let you notice. You earned a reader today.
Cheers! (and yes, I read the comments before cheering you…)

Reply
ajaxified says:

18 Jul2011

very nice solution, I took the liberty to list this on my little site, kinda of a hobby of mine

Reply
Tristam Reeves says:

04 Aug2011

Excellent slider/fader. Much more flexible that the others I have used. Good work !

Reply
Chris says:

03 Oct2011

Is there anyway to integrate video via iframes?

Reply
1. Jamy Golden says:
  
  03 Oct2011
  
  Yeah, if you dropped in the youtube embed code it should work perfectly.
Kelsey says:

11 Nov2011

Great slider! It’s exactly what I’ve been looking for, and I’ve been looking for a while…

One quick question (which may have an obvious answer, but I’m pretty new at all of this) — how would I show the .plusslider-controls for #slider, but hide them for #slider2?

Reply
1. Jamy Golden says:
  
  16 Nov2011
  
  Hi Kelsey,
  
  You can do this by editing the javascript PlusSlider createPagination option.
  $('#slider').plusSlider({ createPagination: true });
  $('#slider2').plusSlider({ createPagination: false });
  You can see the rest of the options available on the slider demo page or on the github page – Make sure to scroll down to the “Default Options” area.
  
  Let me know if you have any other questions.
2. Kelsey says:
  
  17 Nov2011
  
  When I replace ” createPagination: true ” with this code, I just get errors. Am I putting it where I’m supposed to be in the javascript?
3. Jamy Golden says:
  
  22 Nov2011
  
  Perhaps I explained it in a confusing way. You should change “createPagination: true” to “createPagination: false”
Christian says:

18 Nov2011

Hi there,

First I must say that you did a great job with this slider. Beautiful and extremely easy to use. Though, I’ve noticed a bug I think. When you click on the first bullet it acts like the next link. It doesn’t return to the first slide, but instead goes to the next slide. Press it again and continues to the next slide just like the next button. Is there a fix for this?

Cheers and thank you again.

Reply
1. Jamy Golden says:
  
  21 Nov2011
  
  Hi Christian,
  
  Thanks for the kind words and for spotting that! I’ll publish a fix sometime today – So it should be updated before 22/11/11.
2. Jamy Golden says:
  
  22 Nov2011
  
  This bug has been fixed.

Adam Zwakenberg says:

19 Nov2011

Hey there,

I’m wondering what’s the best way to do a full width slider with this plugin. I’ve tried a few things but I can’t get it quite right. Any insight?

Jamy Golden says:

21 Nov2011

Hey Adam, I’ve seen this done before but I haven’t done it myself. I’ll give it a try tonight and I’ll let you by tomorrow know how it’s done.
Christian says:

21 Nov2011
Hey there,

I’ve used this great script and achieved great results setting it up for full width. Try styling the divs responsible for the slides with style:
```
.first_slide {
background url(image_url) no-repeat center;
width: 100%;
height: 300px /* change this accordingly */
}
```
Cheers!
Jamy Golden says:

22 Nov2011

Update: I’m working on this functionality for the slider version and I’ll let you know once it’s done.

As Christian said, you could simply set the width to 100% which would work nicely on the fader version.
Gene says:

28 Jan2012

I have a ? where are you putting this CSS code I already have the slide-show installed?
Gene says:

28 Jan2012

Am I editing in the
jquery.plusslider.js
or the
plusslider.css

I cant find the tables you are talking about
cssplus-admin says:

28 Jan2012

jquery.plusslider.js should never be edited – unless you are trying to extend the plugin itself. plusslider.css should be edited to achieve the desires style. I usually start off with the minimal version. If you download the plugin via github, it should come with a minimal version ( stripped of unnecessary styles ).

Gene says:

29 Jan2012

I’m new a CSS coding, here is my script, I dont want to redo the position it took me long enough to get it where its at I just want to make the width flush with all resolution – so the banner up top looks presentable here is my coding if you can help me out that would be great-full and for future reference I would like to purchase a license for commercial use if at all possible

/**
	PlusSlider Version 1.1
	By Jamy Golden
	http://css-plus.com
**/

/* PlusSlider Styling */
#slider{height: 850px; width: 100%; position: relative; left: 0; }

.plusSlider{
	height: 850px;
	margin: 0 auto;
	overflow: hidden;
	width:  100%;
	position: relative;
	z-index: 1;
}
.plusSlider .child{float: left;overflow:hidden; position:relative;}
/* Controls */
.plusSlider-controls-wrapper {
	height: 40px;
	width: 100%;
	position: absolute;
	left: 0;
	bottom: 235px;
	z-index: 500;
}
.plusSlider-controls{
	margin: 0 auto;
	padding: 15px 0;
}
.plusSlider-controls a{
	border:1px solid #fff;
	display: block;
	float: left;
	height: 10px;
	margin: 0 3px;
	width: 10px;
	text-indent: -9999px; /*IE6 fix */
	font-size: 0;
	opacity:0.3;
	filter:alpha(opacity=30);
	-webkit-border-radius:6px;
	-moz-border-radius:6px;
	border-radius:6px;
}
.plusSlider-controls a.current, .plusSlider-controls a:hover{
	opacity:1;
	filter:alpha(opacity=100);
}
#slideshow a.arrow{
	background: url(../images/plus-sprite.png) no-repeat left top;
	display: block;
	height: 32px;
	opacity: 0;
	width: 32px;
	position: absolute;
	bottom: 220px;
	z-index: 200;
	text-indent: -9999px;
	outline:none !important;
	/* Fade in/out .arrows on hover */
	-moz-transition-property: opacity;
	-moz-transition-duration: 0.2s;
	-moz-transition-timing-function: ease-in;
	-webkit-transition-property: opacity;
	-webkit-transition-duration: 0.2s;
	-webkit-transition-timing-function: ease-in;
	transition-property: opacity;
	transition-duration: 0.2s;
	transition-timing-function: ease-in;
}
#slideshow:hover  a.arrow{opacity: 1;}
#slideshow a.prev{background-position: 0 -32px; left:0px;
-webkit-border-top-right-radius: 3px;
-webkit-border-bottom-right-radius: 3px;
-moz-border-radius-topright: 3px;
-moz-border-radius-bottomright: 3px;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
#slideshow a.prev:hover{background-position: 0 0;}
#slideshow a.next{background-position: -32px -32px; right: 0px; top:130px;
-webkit-border-top-left-radius: 3px;
-webkit-border-bottom-left-radius: 3px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-bottomleft: 3px;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
#slideshow a.next:hover{background-position: -32px 0;}

/* PlusFader Specific */
.fader .child{display: none; position: absolute; left: 0; top: 0;}
.fader .plusSlider-controls{position: relative; z-index: 200;}

/* no-javascript fallback */
#slider > *, #slider2 > *{display: none;}
#slider > *:first-child, #slider2 > *:first-child{display: block;}
/* end no-javascript fallback */

cssplus-admin says:

30 Jan2012

Do you have an example of the slider somewhere? I’d need to see your CSS and the plugin options to make sure it should be full width. No need to purchase a commercial license – Anyone may use the plugin commercially for free.

PauloOliveira says:

22 Nov2011

hi, Jamy!

as all the other guys, 1st I want to thank you for this great slider – its just what need. Yet, I need a favor: is it possible to disable the back button/arrow on the 1st slide and the forward button/arrow on the last slide?

Reply
1. Jamy Golden says:
  
  23 Nov2011
  
  Hey Paulo, I’ve just added this functionality. To disable both the previous and next button add the following to the rest of the options:
  disableLoop: 'both'
  So you would have something like this:
  $('#slider').plusSlider({ disableLoop: 'both' });
2. PauloOliveira says:
  
  24 Nov2011
  
  Jamy, many thanks!
  
  If one day you come to Porto, let me know, because I want to pay you a coffee (on the most expensive coffee shop here).
  
  Now I’ll try to hide the previous and next arrows on the 1st and last items of the slideshow
  
  this script needs some buzzing I’ll use my twitter account to get it some more publicity
crucou says:

22 Nov2011

This is ridiculous!!!!!!! HOT!!!!!

Is there any way to add thumbnails instead of numbers for the pagination? That would put this slider in charge or all others! It is so sleek and smooth in my browsers… which is rare for most sliders!

Thanks for any help!

Reply
Nicola says:

13 Dec2011

Hi,
stupid question…
How can I set the slider start at slide “2″ or at slide “itsname”
?

Really thanks

Reply
1. Nicola says:
  
  13 Dec2011
  
  I mean, how to set start slide number, from another function..
2. cssplus-admin says:
  
  13 Dec2011
  Hi Nicola, what do you mean by ‘from another function’?
  
  You can set the starting slide by changing the index on the defaultSlide option.
```
$('#slider').plusSlider({
    defaultSlide : 0  // Sets the default starting slide - Number based on item index. 1st slide = 0, 2nd = 1, etc
});
```
3. Nicola says:
  
  13 Dec2011
  
  Hi
  I can’t find any reference to that option here.
  http://www.arieni.com/modules/mod_plusslider/assets/jquery.plusslider.js
  
  I tried “current” before… And what I mean is this:
  http://pastebin.com/ymQ3Ygpv
  but it doesn’t work surely because of an improper use of the syntax
4. cssplus-admin says:
  
  13 Dec2011
  Check out the github page. It has some documentation which could help. Version 1.2 (your link) is relatively old.
  
  In the current version you could change the slide by making use of the various callback options within the plugin or by doing something like this:
```
var slider = null;

$(document).ready(function(){
    slider = new $.plusSlider($('#slider'), {});
});
slider.toSlide('next); //move slider to next slide
slider.toSlide('prev'); //move slider to previous slide
slider.toSlide(3); //move slider to arbitrary index (first slide is 0, second is 1, etc.)
```
  This is also all in the documention on the github page.
  
  Note: Some of the PlusSlider generated markup / class names have changed since version 1.2
Paul says:

21 Dec2011

Hi Jamy,

Thanks for a great fader. It looks nice in mozilla browsers, but unfortunately not as good in IE 7. It looks nice in IE9, but everyone doesn’t have that as you know.

I wonder how to center the little dots underneath and give the whole thing a frame as well in IE 7. Or take away the frame so I can make my own in a surrounding div…
Thankful for hints.

Reply
1. cssplus-admin says:
  
  21 Dec2011
  Hey Paul, the slider doesn’t have a frame in IE7 because the border-color CSS property on .plusSlider contains an RGBA value. If you change that to a normal hex colour, such as #333333 it should display correctly. Also the little dots ( pagination ) is off center in IE7 because IE7 doesn’t support the ‘display: table’ CSS property and value and that’s the most simple way to horizontally center an element with a dynamic size with CSS. I’d say the most simple solution would probably be to give the pagination container a set width, it should automatically center after that.
  
  Let me know if you run into any (other) problems.
  
  Edit: Add this after your current script – it should center the controls:
```
$('.plusslider-controls').width( $('.plusslider-controls').children().first().outerWidth(true) * $('.plusslider-controls').children().length );
```
Chris says:

11 Jan2012

Hi Jamy,

I’m using your great slider on this site: http://www.tienda.com/ I’m having what I think is a z-index issue with the Google powered autocomplete search in the header.

Once the page loads, if you start typing in the search box, the results pop down, but when another slide fades in, it is positioned above the results returned from Google. I can’t find anywhere on the Google side of things to adjust the layer position.

Any ideas??

Thanks, Chris

Reply

Compatibility

What say you?

Cancel reply