Hi there! First, thanks for this wonderful plugin. Really it is a nice work :).

I've got a little problem with the init.

If you call the page directly (http://louisajohnkrol.madebykarl.com/discography/alabaster/) it's ok.

If you call the page with a hashtag that makes an ajax call for another content (http://louisajohnkrol.madebykarl.com/#!/discography/alabaster/ same page but loaded by ajax), it doesn't adjust the height. Scroll on the first panel before clicking any link, and you'll see it kept the height before liquidSlider's initiation.

Any idea what is going on and how to solve it? I'm a little bit stuck on this one.

Cheers!

Hi Kevin,

I've been playing around with the slider on a new site and just come across the following issue.

When you click to the next slider or hover over the slider then hover off again, the slider seems to fail to restart the auto sliding?

I'm using the latest download version. Is there a new setting I need to apply for this to work or is it a bug?

Thanks!

I'm trying to use the liquidslider as a series of vertical stacks of images for my portfolio with each column being a series of images related to a project I've worked on. You can see the test site at: http://www.frankotoole.com/!liquidslider-master/liquidslider.html

I have two issues so far:

1. when I scroll down on one slide then hit the right or left arrow, I am brought to the same height on the next slide. How do I force the slider to bring me to the top of the next slide instead? I have had luck with scrolltop: 0 on other sliders, but can't figure out where to add it on this slider.
2. The load time for this site seems kinda crazy right now with all of my large images, is there a way to have the site not transparent until every image has loaded? I hope to add a few more slides (columns). Or is there another way for me to load the images that would make the initial load time faster?

That's it right now, thank you for any help you can offer.

I downloaded the plugin today and it doesn't work.

I stumbled upon your slider which was perfect for me in creating an HTML5 responsive layout design.

Perhaps it was a lack of coffee, but I followed the instructions on the readme, specifically adding:

<script src="./js/jquery-1.8.2.min.js"></script>
<script src="./js/jquery-ui-1.8.20.custom.min.js"></script>  
<script src="./js/jquery.liquid-slider-1.1.min.js"></script>  
$(function(){
      $('#slider-id').liquidSlider();
    });

and in the html (ok haml, but still)

.liquid-slider#slider-id
  %section
    %h2.title Panel 1
    %p Content
  %section
    %h2.title Panel 2
    %p Content

Only for nothing to show up correctly. After making sure my other js files weren't causing any problems, I facepalmed when I realized that the css file needed to be included as well for all the stuff to work. Should have been completely obvious, but I was blindly following the directions. It might be useful for those of us who are coffee-deprived to add a line or two in there explaining that the css file needs to included for everythign to work correctly.

On a similar note, it might be useful on your documentation homepage http://liquidslider.kevinbatdorf.com/ to have a basic tutorial -- I was quickly glancing and saw tutorials for more powerful effects (parallax, etc), but no quick "here's the basics you need to get going".

I am really charmed by liquid slider. its amazing!

just one little thing i cant figure out.

i use the automatic tab function but when i put a title tag and write some information in it it does not show but it shows the text of the h2. when i make links myself it does work.
Example:
Worx:

<a href="#9" title="blaaaaat" data-liquidslider-ref="slider-id">tab 1</a>

not works

<h2 class="title" title="lalala" style="display: none">tab 1</h2>

thanks!

When placing inside this slider panels some Select2 component (http://ivaynberg.github.com/select2/), and you try to change the selected item of some of these comboboxes by code, this will only work for those comboboxes placed on the first panel ONLY or for all of them if you use the JQuery code to change them before calling $('#slider-id').liquidSlider(). The rest of them will remain unchanged or with the value selected before the call to $('#slider-id').liquidSlider();

I've tried changing a bunch of css including removing overflow:hidden;, z-index:, etc. However, I can't get the little arrow i've added to a.current to show outside the bounds of the a. Please see at wgs.rdswebdesign.com.

Sorry. I know this is some newb mistake

In some languages ​​there are special characters that need to be replaced before they are written into the address bar.
In German, the following characters will be replaced:
ä -> ae
ü -> ue
ö -> oe
ß -> ss

Hi Kevin,

Any news/further development towards enabling touch enabled sliding? Is pretty much the last thing I need from a slider and I'd like to keep using your Liquid slide if possible seeing how well adaptive and developed it is!

Thanks!

The title says it all :-) - the old site can't be found.

Im using CSS display: none; to collapse various page elements.
Eg.

<table>
  <tbody style="display: none;">
    <tr><td>  <div>slider here</div>   </td></tr>
  </tbody>
</table>

When page is loaded while tbody is expanded (eg: style="") then slider works ok,
however, when page is loaded when tbody is collapsed (eg. style="display: none;")
then after expanding it (changing to style="") the slider which was inside not working.

The liquidslider page at http://liquidslider.kevinbatdorf.com/ reports version 1.1, but I don't see any git tags for 1.0 or 1.1.

This makes it hard to track BC breaks in git submodule updates

GPL license make this quite not convenient to use under several scene.
so, why not add a MIT or BSD license,
then I would use this with less worry
thanks.

Hello,

Is there a method to link/navigate to a slide with an external link?

By external link, I mean a link that is outside of the slider container, and functions the same way as the tabbed navigation. Ideally a function I can bind to an onclick event, that does not refresh the page.

I'm trying to line up the tabs to match the width of the entire tabbed panel, but if I specify the correct pixel width for each tab, it switches right into responsive mode with the drop down menu. It also doesn't allow me to specify a percentage for each tab. Once I turn off the responsive mode, I can then choose the correct pixel width and it displays fine, but then I lose the responsive feature. Any ideas? Thanks for the work on this.

Hi, I see the options for fade in/out durations, but not how to set fade as the transition instead of sliding. How do I set that? Thanks!

Hi.
Can I switching between slides skipping intermediate slides?
Right from 1 to 6 for example without sliding 2..3..4..5.
thanks

On Smartphone

Tested on Sony XPERIA P (ICS with qHD device)

Portrait mode the drop down menu appears which is fine.
Switching to landscape mode gets the TABS which is fine.
Switching back to Portrait mode from landscape mode doesn't get the Drop Down menu until the page is refreshed again.

On Desktop:

Chrome/Firefox browsers tested with.

Open the page containing slider. It works fine using the graphic arrows also.
Reduce with to get the dropdown menu and then increase the width back the arrow navigation stops working.

Above happens on Smartphone also (AndroidfICS/Dolphin browser).

These two seems to be Bugs and are reproducible on both desktop and smartphone.

I actually don't know if it is supported, although Coda Slider supports it so I thought I would try it and it doesn't work as follows:

Tab 1

Will not change either slider. Individually linking to each cross-link works. Each slider is set with:
hashLinking: true,
crossLinks: true,

The liquidslider currently contains jQuery... Shouldn't be committed to the repo

The slideEaseDuration only controls the speed at which the div fades in. To make it also fade out smoothly I would recommend the change below:

Line 973 from: .siblings().css('display', 'none');
to.siblings().fadeOut(self.options.slideEaseDuration);

I'm using crosslinks on the page to control the slider, which works great, but I was wondering if there are settings to control the styling of the selected crosslink? Right now they just go bold. Thanks.

Hello,

The "currentCrossLink" class is just added to the <a> tag, but is not removed from his previous position.
So after clicking on each links, they all got the class, like this :

<li ><a href="#1" data-liquidslider-ref="slider-id" class="currentCrossLink">Home</a></li>
<li ><a href="#2" data-liquidslider-ref="slider-id" class="currentCrossLink">Links</a></li>
<li ><a href="#3" data-liquidslider-ref="slider-id" class="currentCrossLink">Contact</a></li>

Which is not very useful ;)
Hope you can fix it.
Thank you

When auto-slide direction is set to „right“, the first slide will move left, then everything slides right.

As per the index.html file if trying to use following for production env

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>

the responsive menu breaks. it simply doesn't transition to dropdown from tabsa
Even trying to use jquery-ui-1.8.23.custom.min.js also breaks the responsive menu.

Tested on FF.

Hi Kevin

Love this slider but would appreciate your advice. I need to create a jquery event that fires on slide open/active. Basically I would like to have a quick semi-transparent div in each slide that animates up on one side (inside the slide after the slide has finished scrolling across).

Is there a simple way to grab an event in this slider?

Hi there,

I'm having an issue with the liquid slider where autoSlide is set to true. The slider starts automatically perfectly fine, however, if I then click on the left or right arrows to move the slides back and/or forth, when the slides starts auto sliding again, they will every 2 or 3 slides ignore the pause interval and seemingly skip straight onto the next slide.

I'm using the following settings:

                autoSlide: true,
                autoSlideInterval: 3000,
                slideEaseDuration: 750,
                slideEaseFunction: 'easeInOutExpo',
                autoSliderDirection: 'right',
                autoSlideStopWhenClicked: false,
                autoSlidePauseOnHover: true,
                dynamicTabs: false,
                dynamicArrows: true,
                dynamicArrowsGraphical: true,
                responsive: true,

Any ideas?

I have more 500 panels in a single page.and its content is from db

Is it possible add panels dynamically to the liquid slider when clicked using Ajax.

When I add a callbackFunction function to a liquidsilder, I want to get some information from 'this', but 'this' refer to 'window' object.

I have checked the source code and find there are some mistakes in animationCallback function.

line 641
setTimeout(
function () {self.options.callbackFunction.call(this); },
self.options.slideEaseDuration + 50);

In my opinion, 'this' should be changed to 'self'.

When I use liquidslider plugin in project, I find this problem. Hope to get your attention.
Thanks for your good job.

I am not sure why this is happening, but in IE9, the responsive menu is showing up instead of the arrows.

Kevin,

I noticed an issue using my own nav where it was mixing up which slide was clicked. In a two link navigation, it thought slide-1 was slide 2, and vise versa. I reverted this to a much earlier version of the js file (from when we last chatted) and everything was kosher. No errors in console. Just wanted to checkin the issue for you.

Hope all is well. If you need help slide enabling, or making this css3 responsive to more devices hit me up, our busy season just ended and i'd love to contribute.

PS
Hope you got into rails!

This is a wonderful tool. Thank you so much!

I'm experimenting with the nested sliders. I've embedded a soundcloud widget in 2 panels of a nested slider, and the sliding seems fine, but the second widget (even though not visible) is preventing the first widget from being interacted with successfully. It's as though whatever widget's at the bottom of the code is invisibly floating on top of everything. Does that make sense?

Would love some guidance on this, as I'm not much of a scripter...

Hey Kevin,

I was thinking of having a horizontal sliding blog based on the liquid slider.

But instead of loading all of it, and scrolling to the right, it was to be based on the liquid slider's current methodology. (To avoid the disorientation and keep vertical scrolling for long content).

However I realised that all of the blog content had to be loaded and hard coded onto the page.

Do you think down the line if you could add ajax loading of slides functionality into liquidslider? It would certainly make this really unique.

Hey,

I used your autoscolling option before, and it worked on the browser, but when I accessed it with a mobile phone, the scrolling no longer worked.

It was also a bit sluggish and laggy. Anyway I went ahead and looked for a different scrolling tool, and have implemented this as the top scrolling:

/* Anchor Slider by Cedric Dugas Http://www.position-absolute.com
This is jumping to the slider!
First is the id/class that activates the jump, the next is the destination!
*/
$(document).ready(function() {
    $(".jump_slider").anchorAnimate("#mid_slider");
    $(".jump_course").anchorAnimate("#course_slider");
});

jQuery.fn.anchorAnimate = function(next_place, settings) {
    settings = jQuery.extend({speed : 1100}, settings);
    return this.each(function(){
        var caller = this
        $(caller).click(function (event) {
            event.preventDefault()
            var elementClick = next_place;
            var destination = $(elementClick).offset().top;
            $("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination}, settings.speed, function() {
                window.location.hash = elementClick
            });
            return false;
        })
    })
}

I basically have to set #mid_slider or #course_slider to the slider container, and add the classes of .jump_slider and .jump_course to the buttons/links that slide to them.

It's a lot smoother and works on mobile phones aswell.

Perhaps you would like to integrate that code into your slider?

I'm not 100% that the settings and usage are correct, let me know if that's the case.

I used the demo.html and the following settings:

  $('#slider-id').liquidSlider({
    crossLinks: true,
    hashLinking: true,
    hashNames: true,
    hashTitleSelector: "h2.title"
    });

and then:

  <a href="#2" data-liquidslider-ref="slider-id">Panel 2</a> works
  <a href="#panel3" data-liquidslider-ref="slider-id">Panel 3</a> doesn't work
  <a href="#3" data-liquidslider-ref="slider-id">Panel 3</a> works

Once you click the #panel3 link, things break and then none of the links work.
Directly loading the url http://example.com/demo.html#panel3 works as expected.

browsers: osx Firefox and Safari

Hello,

I'm currently using hashCrossLinks to allow external hash names to push and pull the slider. Everything is working well. However, on page load, the hash name of the first slide is appended on the url.

So if I go to http://www.example.com/
It will immediately change to http://www.example.com/#first_slider_name

Is there anyway to hide the hash name on page load, as it doesn't seem to do anything? Also could you update the documentation to reflect hashCrossLink?

Here is the options I'm currently using:

/* Liquid Slider (http://liquidslider.kevinbatdorf.com/) */
    $('#mid_slider_template').liquidSlider({
        dynamicTabs: false, //remove the tabs from the slider
        panelTitleSelector: "h3.slide_title", //use the h3 class=slide_title as the title of the slide
        topScrolling:true, //automatically scroll to the slide when triggered by a relevant anchor
        topScrollingExtraPixels: 25, //add 25 pixels to the top when scrolled to the relevant slide panel
        keyboardNavigation: true, //allow left and right keys to scroll the slider
        crossLinks: true, //allow external anchors (not inside the slider) to push or pull to the relevant slide (anchors tags require: data-liquidslider-ref="SLIDER-ID")
        hashLinking: true, //allows for us to use hashes (#) as a link to push or pull slides
        hashCrossLinks: true, //allows us to use cross link's hashes as links to go to specific slides
        hashNames: true, //allows us to use names rather than numbers for the hashes
        hashTitleSelector: "h3.slide_title", //specifies the name of the hash which corresponds to the specific slide
    });

Hello.

I noticed a problem while trying to implement the slider. I've set the crossLinks to true, used <a href="#4" data-liquidslider-ref="main-photo-slider"><img src="http://placehold.it/133&amp;text=panel+4" alt="#4" /></a> as a link and all the links opened the wrong slides, namely #4 opened slide 3, #3 opened slide 2, #2 opened slide 1 and #1 opened slide 4....

Any ideas what might be wrong?

Also, the swipe function is acting weird too, swiping caused the whole page to jump to the top (android 2.2 ->opera).

Hey,

I have implemented a second slider. These are my options:

/* Course slider) */ $('#course_slider').liquidSlider({ dynamicTabs: false, //remove the tabs from the slider panelTitleSelector: "h3.slide_title", //use the h3 class=slide_title as the title of the slide keyboardNavigation: true, //allow left and right keys to scroll the slider hoverArrows: false, continuous: false, hideSideArrows: true, });

When hoverArrows and hideSideArrows are combined those ways. Something weird happens:

When the page first loads, both arrows are still displayed, although the left fades away.
When you click on the right arrow, this goes to the next slide. Then the left arrow appears then fades away, and if the mouse is still on the slide, the right arrow fades away.
Then if you leave the page and wait a bit, then come back to the page. The left arrow reappears.
Then the whole process repeats.

I don't think the above behaviour was expected. I don't think hoverArrows and hideSideArrows are playing nicely together.

Its not really an issue, just sharing my idea and thoughts about issue #36

So we found here that if slider is initialised (rendered) within display:none; container,
where dimensions within this container are set to % or not set at all,
then all elements have dimensions 0x0 (thats what firebug shows when its collapsed).
Therefore it is normal that slider have no clue what dimension should it set itself to,
and it initialises with some random stuff. Then after expanding it looks like messed up.

Wraping it into div and setting some predefined dimensions within this hidden container,
will fix it and give slider data which it will adjust to, but then - whole idea about liguid,
not work here because its constant dimensions not %

While we know what happen, how it happen and what cause this,
we may think about some solution.
So if it initialise with unknown dimensions and after expanding it not-adjust,
to new dimensions then...

How about adding some event which would be fired when parent element / container,
change its dimensions, and slider would adjust / refresh self to this new dimensions.
This should nicely fix such issues
(Slider probably do so, but its fired on whole client dimension change,
however in this issue not whole client change, just part of elements which holds slider within.)

Hi Kevin,

Your plugin is the best slider I could find for self adjusting to horizontal and vertical phone viewing. I have implemented it at recoup.com.au but you will only see it if you view the mobile version of the site, if you want to check it out. Dont use a normal browser as it sees a different slider by someone else on the non mobile version.
I am not using the tabs, just a simple left and right arrow and it looks great. The only problem is despite setting autoSlide:true, it still will not autoscroll. I noticed someone else mentioned this in another issue, but the topic then drifted more to "top scrolling" which you made into a tutorial, so autoscrolling in the mobile never became the main focus of the fix.
My client is happy with the scroller, but is hoping I can get it to autoscroll and I am worried that if it is a bug then I cannot. Happy to leave a donation especially if there is a way forward with this one. Cheers.

On Android smartphone running ICS change of TABS to Select menu on repeated orientation change works flawless only on Chrome and Firefox. It doesn't work correctly on stock browser, dolphin or opera. I have sent URL to a test site through contact form on site. For example starting from portrait mode and switching to landscape and back again to portrait doesn't get the select menu.

I have three sliders on a page, and I am trying to figure out a function (or functions) that cause the other sliders to return to the first panel as I move to each slider. So when I am on slider 1, sliders two and three return to their first panels. Creating a cross link is easy enough, but how would one create a crosslink for two other sliders siultaneously?

Thanks

There's a small problem if there are multiple sliders on the same page if they use a custom cross-link-navigation:

The currentCrossLink-Class is only assigned to one nav-item.

Hello,

When I use the useCSSMaxWidth and set it to something other than 1030, this doesn't seem to change the #slider_id-wrapper. Sorry for bothering you but are you able to check it?

I tried on the default template that is provided and it also didn't work.

Hello,

First, thank you so much for your work on this slider. As the title says, I'm not seeing the class 'currentCrossLink' being appended to any <a> tag other than the first. It removes from the first when clicking to another item in the list via the crosslink or the arrows to either side of the slider, but it is not added appropriately when switching.

My settings are as follows:

        $('#team_slider').liquidSlider({
          hoverArrows: false,
          crossLinks: true,
          continuous: true,
          dynamicTabs: false,
          hashCrossLinks: false,
          slideEaseFunction: "easeOutExpo"
        });

I can provide a link to the site if that would help. Thanks in advance, and keep up the great work!

Hi Kevin,

I am currently having a problem that is happening in small screens only:

I am using my own function to append content to the slider on demand, including the nav names and the slider-content itself. it is all going perfectly unless I am using a small screen, in that case the component opens the preloader and doesn't close it anymore.

That happens even if I am using "false" for the preloader option on the constructor, and only in small screens, and doesn't matter if the mobile option is on or off.

In one of my tries I did remove the preloader manually, or tried to see where the options "preloader" is set true, to avoid this situation, but I could't find it. Also, after remove the loader manually, it seems that the sliders are not working.

In another tentative, I used the adjustHeight method to see if that was the problem, but it wasn't.

The code I am using is basically this:

"div id="special-widget" class="widget">
div class="liquid-slider" id="widget-slider">

div style="clear:both">

After that:

$("#widget-slider").html("<div><h2 class"title">My dynamic title </h2><div class="content"> Content Content </div></div>");

     $('#widget-slider').liquidSlider({
    mobileNavigation:false,
    dynamicArrows:true,
    dynamicTabsAlign:"center",
    swipe:true,
    responsive:true,
    hoverArrows:true, 
    continuous:false,
    preLoader:false,
    preloaderElements: 'img,video,iframe',
    callbackFunction : function (){

    }             

});

I would appreciated if you could give me some help on this.

Thank you.

Hi,

I am trying to use the callbackfunction to trigger a new method each time the navegation is used but it just works when the slider is initialized for the first time.

Just getting started trying to use liquid slider to replace a custom slider and after setting up my basic demo on my own code (with a bunch of legacy css, hence the classes in here):

  <div class="liquid-slider"  id="slider-id">
    <div id="image-1" class="img-wrapper">          
           <!--other stuff-->
          <img class="slide active" src="img/issue-1/image-item.jpg" id="draped1" />
    </div>
   <div id="image-2" class="img-wrapper">...</div>
</div>

I'm getting a error in the getHeight function. It's saying this is undefined:

  currentPanelHeight = height || $($(self.panelContainer).children()[self.panelHeightCount]).css('height').split('px')[0];

Could be a problem with my CSS during the transition, but wasn't sure if we should check to see if $(self.panelHeightCount).length > 0 or something there?

For example if user set auto slide timer to 5 second and when its second 4.8
will click slider tab to manualy slide anywhere, then next second timer reach 5
and will slide again not allowing user to view what he tried.

This timer should be reset and start counting from begining everytime when
user click slider tab. Else it creates unpleasant experience where user 'fight' slider.