mnpjog
Last Updated: February 25, 2016
·
4.768K
· kimenye
01b277d876d4c33a71dc8724a488b166

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',
});
Say Thanks
Respond

4 Responses
Add your response

4343
Fe131c8d5bf88bb60dd8e5751e179ffe

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

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
Fbp 1 normal

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 ·