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

  15. crucou says:

    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!

  16. Nicola says:

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

    Really thanks

    1. Nicola says:

      I mean, how to set start slide number, from another function..

    2. 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:

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

  17. Paul says:

    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.

    1. 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 );
  18. Chris says:

    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

  19. David says:

    Hi Jamy,

    this is really impressive! Thanks a lot… but I do have a question:

    I followed your tutorial for the jQuery-Slider and really liked the ability to show multiple items at once. I didnt find any way to do that with this plugin. Am I missing something? It would be so cool…

    Thanks

    David

    1. Jamy Golden says:

      Hi David, you could faux-show multiple items at once by putting multiple items in one slide. A plugin closer to the slider tutorial I did is a plugin called PlusShift. Let me know if you run into any problems.

  20. andy says:

    I cannot get this to work properly!

    No matter what I do (trying to use the full width slider in the minimal example) it’s always 100px wide, it never fills the container unless the container itself has a fixed width.
    If i set the containers width to 100% the slider is always 100px wide.

    What on earth am I doing wrong?

    1. Jamy Golden says:

      It sounds like you’re setting a width to the wrong element. Do you have a link to an example problem?

  21. andy says:

    I fixed it, it’s because the page faded in ‘delay(0).hide().fadeIn(1000);’, i removed that and it initialised properly.

    1. Tom says:

      I am having a similar problem.
      If I set width=100% for all of the slider’s images.
      Every image resized correctly except the background image.

      Which files will allow me to make the changes?
      I have looked into these files but can not file a solution for it.
      slider1.css, plusslider.css, jquery.plusslider-min.js or jquery.plusslider.js

      This is from the slider1.css file. The support.jpg image
      will not resize correctly.
      If I change the below width =830 to 100%
      The size of the image is remain the same but it shift
      the image to the left

      .slide1 { background: url(../images/support.jpg) no-repeat left top; height: 250px; padding: 0px 0px; width: 830px; }

      Thank you.
      T

  22. Peter Ayers says:

    First things first, this is one of the best slideshows out! I got in as a part of a Joomla! template and it works beautifully. The question I have is can the images slide left to right instead of right to left?

    1. Jamy Golden says:

      Hey Peter, thanks for the compliment! :) At the moment it doesn’t slide that way, however I’ll work on it and implement that functionality and I’ll let you know once it’s done.

  23. Sudhir says:

    This is an awesome content slider, and love the fact theres a responsive option. Just wanted to find out if its possible to show more then one slider at a time. An example would be bx-slider.

    Thanks

    Sudhir

    1. Jamy Golden says:

      Thanks :) Yes you can have as many sliders as you’d like on the page at the same time.

  24. Jay says:

    Hi Jamy,

    Really like your slider! Am using it here http://et.jaydaniells.com/home.php . Just wondering though if you could please provide me some quick assistance? I’m doing a modification of the 100% width version so the next slide is visible and not ‘hidden’ (in the the plusslider.css I’ve changed overflow: hidden; to overflow: visible; ). Works well but noticed the next slide disappears for a moment before sliding. Trying to achieve a smooth slide effect where it doesn’t disappear like on this example site http://www.notforsalecampaign.org/ . Would there be a quick fix solution?

    Thanks,
    Jay

    1. Jamy Golden says:

      Hey Jay, Why are you using the 100% option? Couldn’t you set the width of the slider to whatever you want. I think that may take care of the issue. Let me know how it goes.

    2. Jay says:

      Hi Jamy, Thanks for your reply. Have had a quick play with the various slider setups in the demo download ‘JamyGolden-PlusSlider-d27466e.zip ‘.

      When setting overflow: visible; in each (including the fixed width option) the outer slides still disappears for a moment prior to sliding into frame. I know I’m not exactly using your script the way it was intended. If JavaScript modification is required to make this work as I’m describing could I commission you for this job please?

  25. Brandon says:

    Hi Jamy,

    The slider is working great, thanks a lot! I was just wondering if there was an easy way to make the slides display randomly?

    1. Jamy Golden says:

      Hey Brandon, currently this feature doesn’t exist. I will add it to the todo-feature list though :)

  26. Nitin says:

    Hi Jamy,

    can you please share some documentations on How to use this on joomla?

    1. Jamy Golden says:

      Hi Nitin, unfortunately I’m not familiar with Joomla so I can’t help you here. I am slowly building up a really big PlusSlider release and it should include a joomla plugin.

  27. Leszek says:

    Hello Jamie!

    First of all I’d like to congratulate You the idea and a great plugin. It’s very useful and the possibility to make it 100% wide (out of the box) was very tempting for me. It makes the webpage look a lot more filled – just like I wanted it to look. Big thanks for that!!!

    There’s one thing I’ve noticed that didn’t appear in the comments. When I set:
    sliderType: ‘fader’ I can see that there is no transition from the first to the second slide. The second one just appears over the first. After that I can see a nice fade transition.
    After the first loop when the first slide appears again the transition comes back.
    Strange.
    I can even see it on Your demo (http://css-plus.com/examples/plugins/PlusSlider/) – slider 2.

    It would be great if You could look into it and possibly correct the bug or me if I’m wrong.
    I’ve tested it on different browsers and operating systems and it looks the same.

    1. Jamy Golden says:

      Hi Laszek, I’ve actually fixed this bug a couple of weeks ago. I think perhaps you’re not using the latest version of PlusSlider. I’ve also updated the script on the demo page and it seems to be working correctly now. https://github.com/JamyGolden/PlusSlider

      If you have any other problems or if you’re still experiencing the same bug then let me know and I’ll make sure to fix it.

  28. Leszek says:

    One more thing:
    sliderType: ‘slider’ seems to collide with jQuery UI and the slider stops working.
    Maybe You could come up with a resolution of this problem ?

    Thank You in advance!

    1. Jamy Golden says:

      I’ll look into this, thanks.

  29. Martin says:

    Hi Jamy,

    I love this piece of code. Thanks!
    One question, when i set createarrows to true, there suddenly is some whitespace above the picure. Is there a way to solve this?

    Thanks!

    1. Jamy Golden says:

      Hi Martin, yes there is. This is happening because the arrows are placed above the slides so it is pushing everything else down. If you set the arrows to position: absolute, you could position them that way and it should solve your problem :)

  30. Abilesh says:

    Hi Jamy.. Thanks for the wonderful slide..

    I got this slide attached with a joomla template.

    For me, the slide looks very big “sub.aidees.in”

    I want to reduce the height of the slide.. Please tell me how can i do that.. i am not much of a coder.

    1. Jamy Golden says:

      Hi, could you please send me a link of an online example of what you want to change and just a bit more detailed information about it? http://css-plus.com/contact/

  31. Maik Wendelken says:

    Hi Jamy,
    first i would say “thank you for the great slider”.

    I have a question about the slider.

    How can i realise that the images in the slider at screens greater than 1920px are showing left and right of the active slide?

    Have you any tipp for me? :)

    I use your Slider at this Site: http://www.skwp.de

    Best regards from Munich/Germany
    Maik

    1. Jamy Golden says:

      Hi Maik, thanks for the kind words :)

      You can zoom out: press CTRL + - or View -> Zoom -> Zoom out.

      You can see that only 1 slide is ever visible at any point in time. Let me know if you’ve got any other questions/problems.

  32. Mr A says:

    Hi I am using your slider for one of the website , 100% width slider works fine and it automatically sets the width according to the screen resolution thats wonderful , the only problem i am having is the slider taking time to load at first instance , around 8 seconds to run my test site is on http://selectinteriors.tangent-design.com/ , plz can u tell whats the issue with , i have spend a couple of healthy hours on it without any success.

  33. Ann says:

    Hi,

    I just wanted to say I love your slider! I’m so glad I found it. I’ve been having a problem and I was wondering if you could help me with it. I want to change the default slide to not start on the first slide, so I changed the defaultSlide from 0 to 2, like this:

    defaultSlide : 2,

    When the sliderType is ‘slider’, it works fine. But when I change the sliderType to ‘fader’ with the defaultSlide other than 0, it gives me problems. The first slide always shows up first but the next slide after that is next slide number, in this case slide 3. Also, it looks like the fader is jumping back to the original slide (or has it in the background) as it transitions to the next slide. This isn’t a problem as long as I have images that are bigger than my first slide because you won’t be able to see it, but if the image is smaller than my first slide’s image, then you can see it behind the next slide as it transitions. This problem only occurs during the first rotation of slides and the error doesn’t show up the second time the images are shown in the slideshow. I hope that makes sense, you can try it in the demo version that you have online to see what I’m talking about.

    1. Jamy Golden says:

      Thanks for letting me know. I’ll get this fixed and let you know once it’s been completed.

  34. Rob says:

    Hi Jamy,

    Great work! Just wondering if you could reset the slider on runtime, i.e. replace the slider contents on-the-fly?

    1. Jamy Golden says:

      Haha, you’re the first person to ask that. I’ve JUST actually created a hack for this.

      This would take a long time to add to the library itself since I would have to rewrite a lot and I definitely don’t feel like doing that right now. I say hack because this is pretty dirty, but hey, it works and is a nice quick fix:

      plusslider_app.init = function($slider){
      	$slider.plusSlider({
      		createArrows: false,
      		sliderEasing: 'easeInOutExpo',
      		fullWidth: true
      	});
      };
      
      plusslider_app.addSlide = function($sliderEl, $slide){
      	if(!$slide instanceof jQuery){
      		$slide = $('
      ', { html: $slide }); }; var $newSlider = $sliderEl.clone(), // clone slider $sliderElContainer = $sliderEl.closest('.plusslider'); $newSlider.removeAttr('style').find('.plusslider-clone').remove(); // remove plusslider content $newSlider.append($slide); // append the new slide $newSlider.insertAfter($sliderElContainer); // add the clone to the dom $sliderElContainer.remove(); // remove the old slider plusslider_app.init( $newSlider ); } plusslider_app.editSlide = function($sliderEl, $slide, index){ if(!$slide instanceof jQuery){ $slide = $('
      ', { html: $slide }); }; var $newSlider = $sliderEl.clone(), // clone slider $sliderElContainer = $sliderEl.closest('.plusslider'), $oldSlide = $newSlider.children().not('.plusslider-clone').eq(index); $newSlider.removeAttr('style').find('.plusslider-clone').remove(); // remove plusslider content $slide.insertBefore($oldSlide); // append the new slide $oldSlide.remove(); $newSlider.insertAfter($sliderElContainer); // add the clone to the dom $sliderElContainer.remove(); // remove the old slider plusslider_app.init( $newSlider ); } plusslider_app.init($('#slider'));

      The above code would initialize the slider, the slider options can be set in the plusslider_app.init method.

      You would add a slide by running:

      plusslider_app.addSlide( $('#slider'), 'a string or jQuery object is accepted here' );

      Let me know if you run into any problems.

  35. Leszek says:

    Hi again!
    Is there a Plus slider WordPress plugin? Any plans for this? It’d be great.

  36. Miguel Gomes says:

    Hi! First congratulations for this great Slider!
    And for your webpage, it´s pretty cool!

    But I have a problem…I´m trying to use a big slider 100% width, with responsive design however when I shrink the webpage, the pagination and arrows stay in the same position. They didn´t resize! (this happens in 12 step of your demo with picture 2, 3 and 5)

    But if I erase the :

    /*Slide width/height (required for non-image slides) */
    .plusslider .child {
    	width: 530px;
    	height: 250px;
    }

    Then It resize well but I have a problem in my first slide!
    My first slide didn´t launch and just in the second one it becames right!
    Do you know what went wrong?

    1. Jamy Golden says:

      Hey Miguel.
      The .plusslider .child css that you pointed out is not necessary for a full width slider. You can remove that, but as you said you will find a problem on the first slide. This is because it’s height isn’t set, therefore it is as high as the content included. The image is just a background image and doesn’t add to the height. So the first slide definitely needs a height to be set. Try adding the following CSS (after removing the .child width/height css)

      .slide1 {
          height: 250px;
          width: 530px;
      }

      That should solve the problem of the first slide losing it’s height and width.

      As for the controls and pagination shrinking on resize: That should be done with media queries yourself.

      Let me know if you manage to sort it all out

    2. Miguel Gomes says:

      Hi Jamy!!!

      I´m still fighting with that problem!I tried your suggestion but it didn´t work out!
      I studying how to solve this problem…
      because if I use the .child { height:250….} then my arrows and pagination don´t resize. This means that my image get small but my arrows didn´t change because they are with absolute position. Do you have any other suggestion?

      Best Regards
      And thanks for all….

    3. Miguel Gomes says:

      Hi again!!
      Well I tried a lot of different things and I found that one problem was that I was using the “fader” option and this one didn´t work with my queries! It also didn´t work on the tutorial…maybe it´s a bug or maybe is my problem!??
      Then with the slider option I work on a responsive solution!However I can´t resize everything together….the images resize perfect but the pagination and arrows are grabbed to the .child. And this have a fixed height so the only way I found to resize this icons was to insert a lot of queries options and adapt .child height to the screensize resolution that I want. The result is that the distance between the pagination and my images are always changing a little bit!
      If someone can help with a better solution I will be glad!
      I´m a newbie in this things so if I´m making something stupid please alert me!
      Best regards and thank you for the attention!

  37. Ryan says:

    Jamy,

    Awesome jQuery plugin. It’s exactly what I needed for my site. I’m having problems implimenting it though and I’m not sure why. Maybe it’s having problems with the other jQuery stuff I have going on in my site but it displays the first slide but will not cycle past that slide. Any help would be very much appreciated.

    1. Jamy Golden says:

      Hey, which version of the slider are you using?

  38. Martin says:

    Hi Jamie,

    I got a question about your great script.

    I have a slider named ‘slider1′
    It works great, but i want to place a tekst link somewhere in the page with an onclick event that let te slider show the next slide.

    <a href="#"> my custom next tekst link </a>

    The function below doe not work properly.What am i doing wrong?

    my_custom_function () { 
        slider = $.plusSlider($('#slider1'), {});
        $('#slider1').toSlide('next'); //move slider to next slide
    }
    1. Jamy Golden says:

      It looks like it should work. Do you have an example of the problem somewhere I can see?

Leave a Reply to JonatasCD Cancel reply