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',
});
Written by Trevor Kimenye
Related protips
4 Responses
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.
I missed those features when I was evaluating it. Will try using and update the pro tip
anyway to make the .current class apply to crosslinks?
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?