PlusSlider 1.0

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.

Any questions or comments?

  1. Jonatas CD says:

    Hey!

    great job!

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

    cheers

    1. Jamy Golden says:

      Thanks =)

      They actually show up by default, the CSS property ‘text-indent’ hides the numbers.

  2. JonatasCD says:

    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!

  3. Ron Ferraro says:

    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?

  4. Jordan Lev says:

    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!

  5. bandinvence says:

    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!!

    1. Jamy Golden says:

      Hi and thanks =)
      I’m going to work on this for the next version release.

  6. William says:

    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!

    1. Jamy Golden says:

      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 =)

  7. egiova says:

    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…)

  8. ajaxified says:

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

  9. Tristam Reeves says:

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

  10. Chris says:

    Is there anyway to integrate video via iframes?

    1. Jamy Golden says:

      Yeah, if you dropped in the youtube embed code it should work perfectly.

  11. Kelsey says:

    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?

    1. Jamy Golden says:

      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:

      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:

      Perhaps I explained it in a confusing way. You should change “createPagination: true” to “createPagination: false”

  12. Christian says:

    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.

    1. Jamy Golden says:

      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.

  13. 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?

    1. Jamy Golden says:

      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.

    2. Christian says:

      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!

    3. Jamy Golden says:

      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.

    4. Gene says:

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

    5. Gene says:

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

      I cant find the tables you are talking about

    6. 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 ).

    7. Gene says:

      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 */
    8. 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.

  14. 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?

    1. Jamy Golden says:

      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. 1
    45
    45

    Hi ChristlNicolc,need. dould hmeanorroll le6;fromntouys, 1nality. ll let p>Cheers see the ridth tsf wie th̵rrothis divs re200;} sableLOption{
    /*ipt fallba"ider').plusSlider({

  15. 46
    46

    Hi Christd });s my $("http://css-plumzwakrienirel=/moduginsmod_der-1-0/#c/mmeets/plusslider.js shouldnofollow">has beenss-plumzwakrienirel=/moduginsmod_der-1-0/#c/mmeets/plusslider.js shouldite> < cant fi few tcreatePa .plus to Rbut I

    "http://css-plupastebirel='/ymQ3Ygpvnofollow">has beenss-plupastebirel='/ymQ3Ygpvite> code> tead ’t return cely sho wca pluofmpleimy: opa pluofmth tsyntaxdiv>
46
46
  • 1c26
    1c26
  • 70
    70
  • 10352
    10352
  • 11362
  • 12952
    12952
  • 14592
    14592
  • 1540
    1540
  • 1550
    1550
  • 16531
  • 208
    208
  • 23462
    23462
  • 346
    346
  • 2441
    441
  • 6496
  • 27625
  • 8996
  • 3718
  • 37318
  • 38166
  • 3821
  • 48108
    48108