Liquid Slider - Responsive jQuery HTML Content Slider

Liquid Slider is a Responsive jQuery HTML Content Slider

• denizli escort
• denizli escort
• didim escort
• düzce escort
• edirne escort
• edirne escort
• edremit escort

Source: github.com

1. INCLUDE CSS AND JS FILES

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.0.0/animate.min.css">
  <link rel="stylesheet" href="./css/liquid-slider.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.4/jquery.touchSwipe.min.js"></script>
<script src="./dist/js/jquery.liquid-slider.min.js"></script>

2. HTML

<section class="liquid-slider" id="main-slider">
  <div>
    <h2 class="title">Slide 1</h2>
    <p>Content</p>
  </div>
  <div>
    <h2 class="title">Slide 2</h2>
    <p>Content</p>
  </div>
</section>

3. JAVASCRIPT

$(function(){
  $('#main-slider').liquidSlider();
});

4. OPTIONS

autoHeight: true,
minHeight: 0,
heightEaseDuration: 1500,
heightEaseFunction: 'easeInOutExpo',

slideEaseDuration: 1500,
slideEaseFunction: 'easeInOutExpo',
slideEaseFunctionFallback: 'swing',
animateIn: 'bounceInRight',
animateOut: 'bounceOutRight',
continuous: true,
fadeInDuration: 500,
fadeOutDuration: 500,

autoSlide: false,
autoSlideDirection: 'right',
autoSlideInterval: 6000,
forceAutoSlide: false,
pauseOnHover: false,

dynamicArrows: true,
dynamicArrowsGraphical: true,
dynamicArrowLeftText: '« left',
dynamicArrowRightText: 'right »',
hideSideArrows: false,
hideSideArrowsDuration: 750,
hoverArrows: true,
hoverArrowDuration: 250,

dynamicTabs: true,
dynamicTabsHtml: true,
includeTitle: true,
panelTitleSelector: '.title',
dynamicTabsAlign: 'left',
dynamicTabsPosition: 'top',
navElementTag: 'div',

firstPanelToLoad: 1,
hashLinking: false,
hashTitleSelector: '.title',

keyboardNavigation: false,
leftKey: 39,
rightKey: 37,
panelKeys: {
  1: 49,
  2: 50,
  3: 51,
  4: 52
},

responsive: true,
mobileNavigation: true,
mobileNavDefaultText: 'Menu',
mobileUIThreshold: 0,
hideArrowsWhenMobile: true,
hideArrowsThreshold: 0,
useCSSMaxWidth: 3000,

preload: function() {
  this.finalize();
},
onload: function() {},
pretransition: function() {
  this.transition();
},
callback: function() {},

preloader: false,
swipe: true,
swipeArgs: undefined