Browse files

Add NPM install tips

  • Loading branch information...
KevinBatdorf committed Mar 12, 2018
1 parent 99bcb17 commit 4546878c91db676ba1b08a9d47adaa0b95efea52
Showing with 38 additions and 23 deletions.
  1. +37 −22 README.markdown
  2. +1 −1 package.json
@@ -2,35 +2,57 @@

## A Responsive jQuery HTML Content Slider

Update January 2018... I'm now lead developer on the [MetaSlider WordPress plugin]( There are plans to integrate new slideshow plugins, most likely including the LiquidSlider. You can find out more information [here](
[Demo Page]( | [Example Page (Advanced)](

Update August 2017... Slider is a little dated but still works as well as ever. It might see a rewrite soon if there's interest shown. Click the star above to show your support! :)
I'm on Twitter: [@Kevin Batdorf](!/kevinbatdorf)

## Update
I'm going to make this compatible with NPM soon, but for now there's a work around.
Two issues:

[Demo Page](
1) You still need to load in the dependencies on your own
2) the asset files wil have to be manually moved, or overridden in your own css

[Example Page](

I'm on Twitter: [@Kevin Batdorf](!/kevinbatdorf)
## Installation

How to Use
The easy way is to use [bower](
### NPM
npm install --save git+

`bower install jquery-liquidslider`
then in your js file add
import 'liquidslider/js/jquery.liquid-slider.min.js'

The manual way:
The stylesheet is plain css, but you can load it in with sass
@import "node_modules/liquidslider/css/liquid-slider";

1. Download the files to your working directory.
### The manual way:

1. [Download]( the files to your working directory.
2. Link files in the header and footer.
3. Structure your html in a manner similar to below:

<link rel="stylesheet" href="./dist/css/liquid-slider.css">
<script src=""></script>
<script src=""></script>
<script src=""></script>
<script src="./dist/js/jquery.liquid-slider.min.js"></script>
## How to use
Structure your html in a manner similar to below:

<section class="liquid-slider" id="main-slider">
<h2 class="title">Slide 1</h2>
@@ -41,27 +63,20 @@ The manual way:

<script src=""></script>
<script src=""></script>
<script src=""></script>
<script src="./dist/js/jquery.liquid-slider.min.js"></script>

4. Initialize the content slider somewhere after the script.

jQuery(function($) {

If you would like to edit a setting, do so like this:

jQuery(function($) {
setting: value,
setting: value
@@ -2,7 +2,7 @@
"name": "liquidslider",
"version": "2.3.9",
"description": "A Responsive Content Slider",
"main": "index.js",
"main": "js/jquery.liquid-slider.min.js",
"directories": {
"example": "examples"

0 comments on commit 4546878

Please sign in to comment.