In full-screen mode can’t start auto play when autoplayOnHover is set to pause.
It seems that there is no way to move the mouse pointer outside the slider container to trigger startAutoplay().

I noticed that only the arrows are clickable, not a vertical band on both sides of the slider.
This resulted on "mis-clicks", especially on smaller devices. Nuisance when people click and nothing happens, annoying when there's a link attached to the slide and the user gets send off to that location.

I forked the repo, and started to fix this, but am running in some issues.
I'm not a JS-ninja, so this might be noob-territory, but how do I get the slideHeight from the current slide?

I now use: var slideHeight = this.options.height; in arrows.js but if a user hasn't set the height option it'll break the implementation. I'd rather use the current height of the slider (or is the mask gets auto-updated than that's fine as well)

On a related note, the arrows get ugly on fullScreen. How can I update/rerun the calculation from _arrowsOnUpdate whenever a user turns to fullScreen mode?

My forked repo: hivre@5211db5

Here's a weird issue I ran into. The slider runs fine in ALL major browsers and is responsive in ALL major browsers as well, but I ran into an issue where then I resize the browser with the slider-pro displayed, and I let go of the corner or I turn the orientation of my mobile device, the slider will either skip entirely, or show the next slide for a split-second, then go to the slide after that.

When the slider comes around again to the slide is skipped, it will play fine. I am wondering if there is a play/pause I can instill while resizing the browser window, that will pause the slider while I am resizing, and then start up again after I have stopped resizing the window.

Hello,

Maybe I'm missing something, but can the slider be initiated in full width?

Let me know :)

Hi !
Great slider and great coding!
Is it possible to embed sliders within sliders without going like an elephant in a china shop ?
I tried and got like 3 sets of slides in the same row, all working nicelly though !

Is there a way to make the thumbnails with variable width of the items?

Hi,

This slider has support to click or touch one slider and go to a url?

my slider div was filled with php
i make a click Funktion on the link and i want load my filled div with jquery .load(link ' #mydiv')
to load it to an div, the data (Pictures, videos, thumbs) are loaded but the init function not works so my div loos crazy. Here ar my two scripts can you tell me what is wrong? Thanks.

Here's my set up:

  $('#media-player .slider-pro').sliderPro({
    buttons: false,
    autoplay: false,
    loop: false,
    thumbailWidth: '250',
    thumbnailHeight: '120'
  });

Despite this, the slideshow loops and the thumbnail width is unaffected. I'm able to force the thumbnail width with some heavy handed css, but the setting in the js doesn't seem to affect it.

Thumbnail containers end up looking like this:

<div class="sp-thumbnail-container" style="width: 100px; height: 120px;" data-loaded="true">
<div class="sp-thumbnail" data-index="4" data-init="true" style="width: auto; height: 100%; margin-left: 0px; margin-top: 0px;">
        <p class="sp-thumbnail-text">Bay Area Bike Share</p>
        <img width="150" src="/images/media-gallery/aep_228b.jpg">
      </div>
</div>

As you can see the inline styling is setting the width to 100px, despite me setting it to 250. Also, interesting is that the thumbnailHeight seems to work fine.

I've tested slider-pro example1.html.
Set with loop:true or let it default setting and coded just 2 sp-slide, blank part will come with each slide.

Hi,

I'm trying to create a slider that is 100% the width and height of the viewport. I have the slider inside a div that is already has an explicit height set, but when I set the slider to '100%' I dont have any luck - it just collapses to 0 height. I've tried adding the following css:

.slider-pro,
.sp-slides-container,
.sp-slides {
height: 100%;
}

and that means my .sp-image slide is now full height of its container but the image for some reason is not centered in the slide, there is a margin-left that is pushing the image halfway out of the viewport.

What I have tried is when initialising the plugin, setting the height to a variable that contains the viewport height which means when the slider loads it does indeed fill the viewport and with correctly centered slides. The problem is, if the browser window is resized then the height of the slider remains at the initial height. Is there a way I can re-set the height value via the api once the slider is going?

Hi there,

Your slider is working pretty good with many property that can be control with js scripts.

However, i'm stuck with the layout below.

Since the structure with foundation 5 is:

I notice that your script moving main photo, descriptions to your div, then make my div empty to make your slideshow.

Is there anyway for me to keep my html format?

Best regards,

Is it possible with config to change the amount of thumbnails that show?

Hi bqworks,
i using your slider, and its very good to use with its Flexibility
Good luck

Thanks for your work
I want to ask you about "Progress Bar" , if its exist in this plugin ?

Hi,

I need to create slider which need to be 100% percent of window width. However, i put:
$('.photo_album').sliderPro({ width: '100%',height:'100%'});
it will not show the slider?

Hi there,

Is there any config that disable caption fade effect when click next slide?

And when you swipe slider, there are a small space between 2 slide, how can i remove that space?

Many thanks,

Init fires before the _resizeHeightTo animation is complete. When working with a masonry I need to reload the masonry after the slider animates to it's correct height.

I can work around this obviously by setting a Timeout on my function hooked into init. But maybe something worth looking into so that the init callback runs exactly after the slider is finished loading and animated to it's correct height.

Hope that makes sense...

I've attempted to remove the buttons but they seem to still stay under the slideshow. I want It so when the buttons are removed the space the buttons took up will stay blank instead. Please could you tell me the way to change and make this possible please. Lovely slide show :)

Hello,

First of all thank a lot for wonderful slider, simply amazing.

I am trying to give link internal page via slider, when user click on image he/she should be redirected to particular page.

Below is code -

India's leading rating agency

Pioneered the concept of credit rating in India in 1987

Sets the standards in every aspect of the credit rating business

I have added link but it is not redirecting to that page.

Is it at all possible to use multiple sliders on a single page?

The second one works although the images are smaller and cropped.

Enjoy using this plugin and have started to implement it on a website that I am working on. Everything works great except for one issue with the lazy loading of the slider images. When You use the gotoSlide via javascript and go to a slide that hasn't loaded yet, the slide stays as the loading image and doesn't replace the source. Any ideas as to what is going on with this or how to fix it?

Sorry for the implementation that did in his slider, the designer asked things with CSS. Here example.

One thing that is happening I could not identify is that the exchange of the slide image is removed, see please print!

The only change I made was to put an opacity over the images in css and call the plugin used the init method to insert .sp-selected the item.

var target = $('#slider');

    target.sliderPro({
        width: '100%',
        height: 395,
        slideAnimationDuration: 900,
        arrows: true,
        buttons: true,
        visibleSize: '100%',
        forceSize: 'fullWidth',
        slideDistance: 0,
        imageScaleMode: 'contain',
        autoHeight: true,
        init: function() {
            if (!target.find(".sp-slide").first().hasClass('sp-selected')) {
                target.find(".sp-slide").first().addClass('sp-selected');
                // return;
            }
        }
    });

Please be I did something wrong?

Is there a way to display slider-pro in browser full window instead of full screen?
Example: http://abcfolio.com/demos/fullscreen-slides/image-metadata-captions/

I noticed Video-Controller supports JW Player but Slider-Pro doesn't (or it could but was excluded from the documents?) Is it possible to use JW Player with Slider-Pro video module if implemented like Video.js?

is it possible to make selected thumbnails always be center ?

hi, is it possible to add function in order to add/remove slide ?

regards
lorenzopub

When I set width & height to 100% I am getting scrollbars. But as soon as I resize the browser they go away.

Hello.
I would like to know how can I change the layer information when changing the size (responsive) of the viewport.
Exemple:
For large viewport I have:

hello i try a first integration in joomla module but i have this error
TypeError: undefined is not a function
i try this
$document->addScriptDeclaration('
$( document ).ready(function( $ ) {
$( "#example1" ).sliderPro({
width: 960,
height: 500,
arrows: true,
buttons: false,
waitForLayers: true,
thumbnailWidth: 200,
thumbnailHeight: 100,
thumbnailPointer: true,
autoplay: false,
autoScaleLayers: false,
breakpoints: {
500: {
thumbnailWidth: 120,
thumbnailHeight: 50
}
}
});
});
');
or
$document->addScriptDeclaration('
Jquery( document ).ready(function( ) {
Jquery( "#example1" ).sliderPro({
width: 960,
height: 500,
arrows: true,
buttons: false,
waitForLayers: true,
thumbnailWidth: 200,
thumbnailHeight: 100,
thumbnailPointer: true,
autoplay: false,
autoScaleLayers: false,
breakpoints: {
500: {
thumbnailWidth: 120,
thumbnailHeight: 50
}
}
});
});
');

error is same do you have an idea ?

First of all thanks a million for building this. I've been scouring Earth for something like this. I plan on purchasing your WP plugin to show my appreciation.

My question is, when the arrows or buttons are clicked can they use my custom ID (ie. /my-slider or /slide-name) in the link as apposed to /0 or /1?

Thanks again, and I look forward to hearing back from you.

In this example this gives the spacing between slides. Get print.

You can take this safely spacing? That is, without harming the great plugin?
Thanks!

How can I stop images being resized up? It destroys the quality.

I would love to have the auto-height animation between slides, but disable it on init, I can't quite figure out how to do and (and if possible) without modifying the core script. Any help would be greatly appreciated - thanks!

Use case: browse to a Slider-Pro example that uses thumbnails (ex's 1,3 & 5 on bqworks.com) and click on any of the thumbnails below the active slider. The goToSlider event is not fired and the slider does not advance.

Problem: thumbnailClick does not appear to fire when a thumbnail is clicked on Windows 8.1 Firefox ver 35.0. Somethign is interfering with the binding but cannot figure it out. Can confirm it works on Windows 8.1 on Chrome 42.0.2277.0 canary (64-bit), IE 11.0.9600.17498, Safari 5.1.7

great plugin btw.

Hi @davidghi ,

Well done with the script. :)
Just testing it for a small project and I love it (and I tested 6-7 other popular scripts before that).

A question if you don't mind ... :)
I am using a framework (and ui-kit) that requires style="display: none;" in the body tag:

<body style="display: none;" data-ui="uikit" data-project-js="min/somejs.min.js" class="invert">

and looks there is some conflict with the Slider-Pro code (not sure why). The slider works
only if I re-size the browser window or if I remove style="display: none;" from the body.

I thought that you may have some idea how to solve this without removing style="display: none;".

Thank you once again for the great slider. :)

The photo gallery with the slider is displaying some flickering effect on the initial load.
All the images seem to be loading in a vertical line and then in a few seconds the correct layout is rendered. Is there a way to ensure the gallery is displayed only once it is fully loaded if not what is the best way to handle this?

Hello from austria,

I´ve got a problem using this fabulous slider inside my foundation structure. I´d like to use a structure like this to show the slider on the left and the thumbnails in a 3col grid to the right. Markup inside foundation would be:
div.row
div.col
div.sp-slides
/div
div.col
div.sp-thumbnails
/div
/div

The problem is that the script always builds its own container outside of my col divs:
div.row
div.col
/div
div.col
/div
div.sp-slides-container
/div
div.sp-thumbnails-container
/div
/div

Is there any way besides changing the source code that I can keep the containers inside my cols?
Thanks for your help

Hi David,
Congratulation for this job!
For this version http://bqworks.com/slider-pro/#example5
In Zen Foundation it seems that the elements are shifted, thumbnails do not position itself well.
Have you an idea ?
Thank's

i want to start by saying that this is a great project, very clean code and nice documentation.

but i did not see any examples of a vertical slide while showing multiple slides in the visible area.

let me explain more.

if you have a vertical box of height 500px
and each slide is 100px
and you have 10 slides
i want to show 5 slides in the visible area once the slider is initiated
then move 1 slide out of the visible area from the top, while entering an new slide from the bottom.

can this be achieved.

thanks

Thanks for the good peace of software, I find it easy to run and customize. However I have at least two problems and I guess all are related to using portrait-oriented images. I have a slider, that uses a defined size images: 474x600px. These problems occur even when running default slider-pro, without options.

1. Touch sliding to a previous slide doesn't work. A current image follows my finger/cursor, but nothing happens, and it also doesn't return to an initial position, staying half-visible. However arrows navigation works well.
2. The full-screen mode stretches images by full width, and it cuts the bottom.
3. Would be great to have an option to set custom image source files for the fullscreen mode.

Hi,

I'm not sure if this topic is here or somewhere alse in github project page, so...

Is there a way to make thumbnails with a image or a simple indicator inside de slider?
i'm using bootstrap for css framework.

If I change slides the class .sp-selected gets added to the .sp-slide but if I go to the main page with no hashtags the class doesn't get added to the first slide. Is there a way to get the class added to the main slide after initialization?

When I convert the website from ltr to rtl the whole website is working good but the slider-pro have trouble with rtl, that trouble is this slide only show 4 headline news and any other headline is not show and the scroll working till number 4 and then number 5 or etc not shown

Hi!

Love, love, love the plugin. Here are my properties:
$( '#homepage-video-slider' ).sliderPro({
width: '100%',
height: 600,
arrows: true,
autoplay: false,
buttons: false,
touchSwipe: false,
fadeArrows: false,
});

And html:

<div class="slider-pro" id="homepage-video-slider">
          <div class="sp-slides">
              <div class="sp-slide slide--one">
                  <img class="sp-image" src="hashtaglunchbag-backgorund-video.jpg"/>
                  <div class="sp-layer sp-static">
                    <a class="fancybox fancybox.iframe" href="http://www.youtube.com/embed/L9szn1QQfas?autoplay=1"><img class="btn-play" src="hashtaglunchbag-icon-video-play.svg" alt="Play Button"></a>
                    <p class="display--small color--red">Wells Fargo teams up with #HashtagLunchbag!!!</p>
                    <h5>We are excited about #HashtagLunchbag being featured by Wells Fargo Bank in their "Done" campaign. Check us out!</h5>
                  </div>
              </div>
              <div class="sp-slide slide--two">
                  <img class="sp-image" src="hashtaglunchbag-backgorund-video.jpg"/>
                  <div class="sp-layer sp-static">
                    <a class="fancybox fancybox.iframe" href="http://www.youtube.com/embed/L9szn1QQfas?autoplay=1"><img class="btn-play" src="hashtaglunchbag-icon-video-play.svg" alt="Play Button"></a>
                    <p class="display--small color--red">Wells Fargo teams up with #HashtagLunchbag!!!</p>
                    <h5>We are excited about #HashtagLunchbag being featured by Wells Fargo Bank in their "Done" campaign. Check us out!</h5>
                  </div>
              </div>
          </div>
        </div>

For some reason, my height isn't changing when you scale the width of the browser down. I essentially want what you have in example 2 but with one image, full-width. What am I missing?

Thanks so much!

RE: https://github.com/bqworks/slider-pro/blob/master/docs/modules.md#14-thumbnails

If I were to put the thumbnail inside the slide aka:

<img class="sp-image" src="path/to/image1.jpg"/>

<img class="sp-thumbnail" src="path/to/thumbnail.jpg"/>

Do I need to modify the CSS or should the thumbnails still work as per http://bqworks.com/slider-pro/#example3

I'm building a slideshow using PHP and was trying to minimise loops.

Fade effect doesn't work (partially) in FF 35.0 - Win 7 and 8.
Chrome and IE works!

First of all I love this slider, so far...awesome! Just started using it today ;)

Would you mind creating a simple carousel example for the docs?

I see the visibleSize and slideDistance properties and testing it out it seems to work somewhat well, I'd love to see an example though created by the author.

Thanks!

ps: I want to write a review of your WordPress plugin on my blog @wpexplorer just went out and got it.

Hello,
In my understanding, there's no way to programmatically start or stop the autoplay of a running slider, correct ?
Then, this is my feature request :-) : having a public method for doing this.
cheers

Hi,

I used your slider, thanks a lot for this marvelous project, and when I put one or two images, the slider dont show images corretly.

For example: In one image, the slider continous loop in a blank space...
In two images, the slider loop in black on left and right has some dificult to go to first image.

Thanks a lot for this slider, is the best i found.