mnpjog
Last Updated: February 25, 2016
·
4.885K
· 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

4343

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

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

over 1 year ago ·
9773

anyway to make the .current class apply to crosslinks?

over 1 year ago ·
11550

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 ·