Discussion on XProSlider - Responsive jQuery Slider, Carousel and Gallery


j4ckherm888 supports this item


80 comments found.

You mention that it is possible to disable responsiveness. How to configure that? Is there an example template?

You can set the autoHeightMode to ‘fixed’. If you do this, the slider size will be fixed, depends on value you set to iniWidth and iniHeight.

I would like to express your most beautiful words about this item. :grin: Thank You very much. Plenty of success in life. Taleh Hasan mygoldphoto@gmail.com

Thanks mate!!


The “fade” mode does not work in Firefox or Chrome for Mac. Plz advise.

Let me check, I will get back to you soon.

Thank you. Basically, the slides appear stacked on top of each other on page load. Then after the first click to see the next slide it all works fine.

Sorry for little late on this. Just tried with Chrome and Safari on Mac, it seems to work fine. This example use ‘fade’ mode.


Can you send me your url to show me the problem?

i dont know how to use or even start using the templates for my rss driven website. I have both a HTML and PHP website. Please assist me

The templates are ready to use examples, you can copy the script into your page, on where you want to put a slider.

If you still have problem, please send me an email at xproslider@xprojs.com

Hi. my friend. I wrote your e-mail. little problem out. Please check your email. Thank You! :)

Hello, I’m looking at purchasing this slideshow. I would like to know if it’s possible for me to incorporate ads into the gallery. I would like banner ads to load every other image. Is that possible? I plan to do it on this page. http://xprojs.com/xproslider/xproslider-demo/templates/carousel/carousel.html

Yes, it should be possible, you can add your own content/html into the slide.


I’m having a little issue with the slider in the website I’m developing. I bought xproslider a while ago and never used it until now.

I have pages where I had to use more than 1 xproslider and I managed to make it work fine, except when dragging the image to the right. When I do that, the image that has to be shown doesn’t appear until I drag again.

For a better explanation I leave you here the link to one of those pages: http://www.bottleneckstudio.it/linea/telai.html

Can you tell me what I did wrong? Thank you in advance.

Hello, you are refer to the last slider right? It is because you have only 2 slides. For the drag to slide, you should have at least 3 slides.

Oh! Thank you so much for your help! Really appreciated.


great stuff, my Gallery With Thumbnails and Info Panel + Ken Burns Effect works perfectly! How can I start it as a floating slider from only one visible thumbnail (clicking that thumbnail opens the floating slider)? I feel it’s possible, but I don’t find out how.

Thanks in advance!

Hi, normally, it is easy to make the slider floating, you just need to add

‘floating’: true

to the slider option. Then show the slider using slider.showSlider() function.

But in your case, you are using the gallery with info panel, if you set the floating property, it will make only the slider portion floating not the info panel because the built in floating function only make the slider floating.

In your case you need to write a simple script to display the whole panel (slider including the info panel) floating. It shouldn’t be difficult.


geens Purchased

Hi, great features first of all! I was wondering if I have a slider that is setup to autoplay, can I manipulate the “interval” for each slide separately to have slides with different times displayed before auto playing to the next item? I’ve only seen the global setting for interval. Was just curious if I could manipulate each slide item’s interval separately.

Thanks. I am sorry, you cannot, the interval between each slide is global at the moment.

Hello, just wanted to tell you: great job.

Hi, it should be easy to find it, in the page, the info panel is located inside a div named divPanelRight. It has class col-md-4. It is formatted using bootstrap grid css, you need to change divPanelLeft class name if you change divPanelRight class name.

I’m sorry, but there ist nowhere a div named divPanelRight.
<div class="container">
    <div class="xpro-content-panel">
        <div class="row" style="margin: 15px 0px 15px 0px">
            <div id="divPanelLeft" class="col-md-8">
                <div class="xpro-slider-container">
                    <div id="scroller" class="xpro-slider">
                        <div class="xpro-slider-content">
                            <div class="xpro-slider-item">
                                <img class="xpro-kenburns-dir-random" src="pic.jpg" />
                                <div class="xpro-thumb-item">
                                    <img src="thumb.jpg" /></div>
                                <div class="xpro-slider-info">

I’ve found it, it works, thank you!

Hi, I need to animate this https://www.corobori.com/sos/picSlideFading.jpg.

What I want is to see picture fading in and out. I do not want the pictures to be sliding from left to right or vice versa. Just showing a bunch of 7 logos (all of them are individual pics), make them disappear and show another bunch of 7 logos, etc.

Is it possible with your slider ?

Yes, it should be the same logic as putting the logos in to a slide for example 7 logos into each slide, and then set the slide effect to fade.

Thanks for your answer.

I plan to use the image gallery. I want to know the following: 1) Is it possible to have a caption appear over each thumbnail on hover? 2) Is it possible for the main image to be a link to a YouTube or Vimeo video? 3) If #2 is possible, can the 1st video only be set to autoplay?

Thank you

Hello, 1. It is possible, anything in div with class ‘xpro-thumb-item’ is rendered as thumbnail. You can specify your own html structure for the thumb. 2. Yes, you can use other example as reference. 3. No, only html5 video can autoplay.

An additional question about the image gallery with thumbnails. Can there be more than 1 row of static thumbnails?

Thank you.

No, the thumbnails have only 1 row.

Can each slide be “deep linked” so that a URL can link directly to it?

Thank you.

I am sorry, no, deep linking is not supported at the moment.

How would the easiest way to use this as a background video be

Sorry, I don’t understand the question. However if you mean to use video as slide background, you can check the templates/examples in the package.


I thought this was for wordpress. Is there any way I can get a refund please?

Thank You,


Yes, please submit your refund request.


I thought this was for wordpress. Is there any way I can get a refund please?

Thank You,


You need to submit a refund request through your account.

Installed slider on page http://seren2017.tuckercomstock.com/adventures/atv.php .

PROBLEM: top dropdown menu closes when HOVER onto an item that begins within the xproslder container.

HOWEVER, if I scroll down the sticky header about 200 px into the slider image area then HOVER, the dropdown menus remain open and can be clicked. I suspect there’s some issue with z-index but I am self-taught designing my own website and not expert enough to figure out how to see all the layers “in order” (as you can with Photopaint).

Hello, I tried this but it seems to work fine to me. I hover the menu and the menu item that sit on top of slider, then move out, the menu also disappeared as expected. Tested on Chrome and Firefox.

Sorry, I think I understand the problem, sometimes it disappeared when hovering the item that sit on top of slider. I will try check this and back to you later.

Hello, I think it is related to z-index, you can fix this by increasing the value of zindex in .SerenOuterBox css class, set the value to like 999999 fix the problem.

Is there a way to rotate slides based on a specific date with this slider? If not, will this become a feature in future update?

I am sorry, there is not such option. There is not plan to add this at the moment.

Hello, Tucker Comstock again. I am now using the Classic News Carorsel. Started from your template. I have loaded sample images for testing. The site is http://seren2017.tuckercomstock.com/lodging/ PROBLEM: (1) it loads only 3 items initially, leaving blank space for fourth item on the right side. (2) When I click the navigation buttons 4 items appear, so the container is wide enough to handle 4. . (3) How do I get the page to show four images when opened (on a screen more than 1315 wide)

Many thanks, Tucker Comstock

I haven’t made changes for smaller media yet)

Hi, Tucker again. First, your solution above worked perfectly. Then I tried to apply same logic to create a 6 image newscarousel: (newsPreferredWidth 320, initialWidth 1920). This worked perfectly in the news_carousel.html TEMPLATE. Then I tried to apply it to my site: http://seren2017.tuckercomstock.com/lodging/

PROBLEM on MY SITE : initial pageload shows only 5 images, with blank in 6th position. Page fills to 6 images once I move nav buttons. I have gone thru news_carousel.html trying to find discrepancy, no luck. On my site, when I InspectElement on scroller_0 thru scroller_4 are in correct position, but scroller_5 hidden offscreen left, like it doesn’t have enough room to load. I assume somewhere/somehow I have reduced the 1920 available space prior to load, but I can’t find it. I am not quite sure what BOOTSTRAP.css is or does, and suspect that may be a source of the override in news_carousel.html that makes it work. I tried creating a separate css file with what I believe has all relevant BOOTSTRAP elements, but I’m lost.

Hello, from what I saw, it is already working correctly. Let me explain a bit about the ‘newsPreferredWidth’ option. XProSlider always try to make sure the slider is responsive. When you set the preferred witdh, it will calculate the number item based on current screen width. If you open the page in 1920 screen, it should show 6 items but if you open the slider in smaller screen, it may only 4 or 5, you can try resize the browser to see the effect.

In news/carousel mode, when you click on navigation, it will scroll by page not by item so you will need to add more items. If you plan to have max 6 items per page (again depends on screen width), you should have 12 items to avoid the blank flip when you click on navigation.

That works! The newscarousel requires at least 1 more entry than two full page widths… thus for 6 wide I need 2×6 + 1 = 13 entries. It works perfectly now (but I have not uploaded live version yet). Many, many thanks… Tucker