Last Updated: February 25, 2016
· kimenye

Liquid Slider : Using your own navigation links

Kevin Batdorf has come up with a really good responsive slider ( 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.


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



    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:


<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 is there a way to do it?

over 1 year ago ·