Install Steps
1) upload css files into css folder
2) Add to head.php just before multisite....
wp_enqueue_style('liquid-animate', THEME_CSS.'/animate.css', false, false, 'all');
wp_enqueue_style('liquid-slider', THEME_CSS.'/liquid-slider.css', false, false, 'all');
if(is_multisite()){
3) upload js files into js folder.
4) upload img folder to theme root.
5) adjust js script in page replace all $ with "jQuery"
6) add jQuery function to js script f.e. a complete script :
<script>
jQuery(function(){jQuery('#slider-3').liquidSlider({/*autoSlide:true*/});
jQuery('.btn').on('click', function() {
var api = jQuery.data( jQuery('#slider-3')[0], 'liquidSlider'),
text = jQuery(this).text() === 'Start' ? 'Stop' : 'Start';
if (text === 'Stop')
api.startAutoSlide();
else
api.stopAutoSlide();
jQuery(this).text(text);
});
jQuery('#range-speed').change(function() {
api.options.slideEaseDuration = -jQuery(this).val()
});
jQuery('#range-delay').change(function() {
api.options.autoSlideInterval = -jQuery(this).val()
});
});
</script>
7) Add script to page js box.
Code Used in this page
<script src="http://strikingr.backupsdemo.nl/wp-content/themes/striking_r/js/jquery.easing.1.3.js"></script>
<script src="http://strikingr.backupsdemo.nl/wp-content/themes/striking_r/js/jquery.touchSwipe.min.js"></script>
<script src="http://strikingr.backupsdemo.nl/wp-content/themes/striking_r/js/jquery.liquid-slider.js""></script>
<script>
/* If installing in the footer, you won't need $(function() {} */
jQuery(function(){
jQuery('#slider-id').liquidSlider({
autoSlideInterval: 3000,
autoSlide:true,
continuous:true,
dynamicTabsAlign: "right",
dynamicArrows: false,
slideEaseFunction: "easeInOutCubic"});
});
</script>
<script>
/* If installing in the footer, you won't need $(function() {} */
jQuery(function(){
jQuery('#slider-2').liquidSlider({
autoSlideInterval: 4500,
autoSlide:true,
continuous:true,
dynamicTabsAlign: "left",
dynamicArrows: false,
slideEaseFunction: "easeInOutCubic",
animateIn: "bounceInRight"});
});
</script>
<script>
/* If installing in the footer, you won't need $(function() {} */
jQuery(function(){
jQuery('#slider-3').liquidSlider({
autoHeight:false,
autoSlide:true,
/*dynamicArrows: false,*/
forceAutoSlide: true,
autoSlideInterval: 3750,
slideEaseFunction:'animate.css',
slideEaseDuration:1000,
heightEaseDuration:1000,
animateIn:"rotateInUpRight",
animateOut:"rotateOutUpLeft",
callback: function() {
var self = this;
jQuery('.slider-3-panel').each(function() {
jQuery(this).removeClass('animated ' + self.options.animateIn);
});
}
});
});
</script>
Html Used
REMOVE ALL 99
<div class="liquid-slider" id="slider-id99">
<div>
<h2 class="title">Slide 1</h2>
[framed_box width="100%"]<h3>Framed box with Ipsum content</h3>Duis id eleifend libero. Integer eleifend nibh nec sodales placerat! Duis suscipit lectus sed sapien auctor gravida. Nunc fermentum tempus scelerisque. Nullam semper metus ipsum, quis porta dolor ultrices id. Phasellus ultricies elit et nunc feugiat, nec dictum tortor sollicitudin. Mauris scelerisque at purus at iaculis.[/framed_box]
</div>
<div>
<h2 class="title">Slide 2</h2>
Nulla id facilisis erat, vel dignissim magna. Vestibulum nec neque scelerisque, sodales tortor vel, ultrices orci. Praesent lobortis lorem in ornare elementum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse nec sem eu nisl sodales mollis vel a elit. Nullam vitae convallis justo. Sed augue turpis, egestas eu posuere nec, accumsan et est. Etiam tempus quam quis arcu consequat bibendum. Integer ornare tincidunt bibendum. Nunc laoreet pulvinar elit nec ornare. Sed facilisis mi sit amet lacus pulvinar, at porta lacus lacinia. Morbi volutpat pharetra purus. Ut velit libero, ultrices quis arcu vitae, placerat facilisis velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div>
<h2 class="title">Slide 3</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec adipiscing nibh non nunc facilisis, a fermentum elit aliquet. Pellentesque convallis tristique urna nec lacinia! Aenean convallis enim ligula, aliquet vestibulum dui facilisis sed. Nunc pharetra quam eleifend urna vulputate eleifend. Pellentesque id massa condimentum, commodo ipsum nec, vulputate nisi. Morbi accumsan enim vel egestas euismod. Nunc libero ante, luctus sit amet sapien quis, posuere accumsan lectus. Vivamus placerat justo ac felis euismod, a varius purus commodo. Nullam volutpat et orci ac vulputate. Vestibulum luctus lacus justo, at mattis massa pretium a.
</div>
</div>
[divider_padding][divider_padding]
<div class="liquid-slider" id="slider-399">
<div>
<h2 class="title">Slide 1</h2>
[framed_box width="100%"]<h3>Framed box with Ipsum content</h3>Duis id eleifend libero. Integer eleifend nibh nec sodales placerat! Duis suscipit lectus sed sapien auctor gravida. Nunc fermentum tempus scelerisque. Nullam semper metus ipsum, quis porta dolor ultrices id. Phasellus ultricies elit et nunc feugiat, nec dictum tortor sollicitudin. Mauris scelerisque at purus at iaculis.[/framed_box]
</div>
<div>
<h2 class="title">Slide 2</h2>
Nulla id facilisis erat, vel dignissim magna. Vestibulum nec neque scelerisque, sodales tortor vel, ultrices orci. Praesent lobortis lorem in ornare elementum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse nec sem eu nisl sodales mollis vel a elit. Nullam vitae convallis justo. Sed augue turpis, egestas eu posuere nec, accumsan et est. Etiam tempus quam quis arcu consequat bibendum. Integer ornare tincidunt bibendum. Nunc laoreet pulvinar elit nec ornare. Sed facilisis mi sit amet lacus pulvinar, at porta lacus lacinia. Morbi volutpat pharetra purus. Ut velit libero, ultrices quis arcu vitae, placerat facilisis velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div>
<h2 class="title">Slide 3</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec adipiscing nibh non nunc facilisis, a fermentum elit aliquet. Pellentesque convallis tristique urna nec lacinia! Aenean convallis enim ligula, aliquet vestibulum dui facilisis sed. Nunc pharetra quam eleifend urna vulputate eleifend. Pellentesque id massa condimentum, commodo ipsum nec, vulputate nisi. Morbi accumsan enim vel egestas euismod. Nunc libero ante, luctus sit amet sapien quis, posuere accumsan lectus. Vivamus placerat justo ac felis euismod, a varius purus commodo. Nullam volutpat et orci ac vulputate. Vestibulum luctus lacus justo, at mattis massa pretium a.
</div>
</div>
[divider_padding][divider_padding]
<div class="liquid-slider" id="slider-299">
<div>
<h2 class="title">Slide 1</h2>
[framed_box width="100%"]<h3>Framed box with Ipsum content</h3>Duis id eleifend libero. Integer eleifend nibh nec sodales placerat! Duis suscipit lectus sed sapien auctor gravida. Nunc fermentum tempus scelerisque. Nullam semper metus ipsum, quis porta dolor ultrices id. Phasellus ultricies elit et nunc feugiat, nec dictum tortor sollicitudin. Mauris scelerisque at purus at iaculis.[/framed_box]
</div>
<div>
<h2 class="title">Slide 2</h2>
Nulla id facilisis erat, vel dignissim magna. Vestibulum nec neque scelerisque, sodales tortor vel, ultrices orci. Praesent lobortis lorem in ornare elementum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse nec sem eu nisl sodales mollis vel a elit. Nullam vitae convallis justo. Sed augue turpis, egestas eu posuere nec, accumsan et est. Etiam tempus quam quis arcu consequat bibendum. Integer ornare tincidunt bibendum. Nunc laoreet pulvinar elit nec ornare. Sed facilisis mi sit amet lacus pulvinar, at porta lacus lacinia. Morbi volutpat pharetra purus. Ut velit libero, ultrices quis arcu vitae, placerat facilisis velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div>
<h2 class="title">Slide 3</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec adipiscing nibh non nunc facilisis, a fermentum elit aliquet. Pellentesque convallis tristique urna nec lacinia! Aenean convallis enim ligula, aliquet vestibulum dui facilisis sed. Nunc pharetra quam eleifend urna vulputate eleifend. Pellentesque id massa condimentum, commodo ipsum nec, vulputate nisi. Morbi accumsan enim vel egestas euismod. Nunc libero ante, luctus sit amet sapien quis, posuere accumsan lectus. Vivamus placerat justo ac felis euismod, a varius purus commodo. Nullam volutpat et orci ac vulputate. Vestibulum luctus lacus justo, at mattis massa pretium a.
</div>
</div>
[divider_padding][divider_padding]