Last Updated: February 25, 2016
·
5.125K
· kimenye

Liquid Slider : Using your own navigation links

Kevin Batdorf has come up with a really good responsive slider (http://liquidslider.kevinbatdorf.com). My first issue is that I wanted to have the navigation (left and right arrows) outside the slider content. My fork adds the ability to pass in your own links to be used in the navigation.

HTML:

<a class="previous-slide">Prev</a> <a class="next-slide">Next</a>

<div id="slider-id" class="liquid-slider">
    <section><h1 class="title">1</h2></section>
   <section><h2 class="title">2</h2></section>
</div>

Javascript:

$('#slider-id').liquidSlider({

    dynamicTabs : false,
    dynamicArrows: false,
    responsive: true,
    customArrows: true,
    customArrowLeft: 'previous-slide',
    customArrowRight: 'next-slide',
});

4 Responses
Add your response

Hey, thanks for using my code! Alternatively, you could have used the following to put navigation anywhere on the page:

crossLinks:true

<a href="#1" data-liquidslider-ref="slider-id">Slide 1</a>
and you can also use #left or #right too in place of #1.

over 1 year ago ·

I missed those features when I was evaluating it. Will try using and update the pro tip

over 1 year ago ·

anyway to make the .current class apply to crosslinks?

over 1 year ago ·

using liquid slider for one of my project.. .. problem is i want to get to slides from address bar directly... lets say in a slider with #slider1 i need to access #2 slide directly from address bar just by http://example.com/x.html#2 is there a way to do it?

over 1 year ago ·