Title: Versitile jQuery Slider
Author: elevaunt
Published: <strong>15. august, 2016</strong>
Last modified: 10. februar, 2017

---

Søg plugins

Dette plugin **er ikke blevet testet med de seneste 3 større udgivelser af WordPress**.
Det vedligeholdes eller understøttes muligvis ikke længere og kan have kompatibilitetsproblemer,
når det bruges med nyere versioner af WordPress.

![](https://s.w.org/plugins/geopattern-icon/versatile-jquery-slider.svg)

# Versitile jQuery Slider

 Af [elevaunt](https://profiles.wordpress.org/elevaunt/)

[Download](https://downloads.wordpress.org/plugin/versatile-jquery-slider.1.1.3.zip)

 * [Detaljer](https://da.wordpress.org/plugins/versatile-jquery-slider/#description)
 * [Vurderinger](https://da.wordpress.org/plugins/versatile-jquery-slider/#reviews)
 *  [Installation](https://da.wordpress.org/plugins/versatile-jquery-slider/#installation)
 * [Udvikling](https://da.wordpress.org/plugins/versatile-jquery-slider/#developers)

 [Support](https://wordpress.org/support/plugin/versatile-jquery-slider/)

## Beskrivelse

The Versatile jQuery Slider helps you set up an easy, versatile, responsive slider
with images or any HTML content. Powered by [jQuery Cycle2](http://jquery.malsup.com/cycle2).

I’ve often looked for a good plugin that would allow me to quickly and easily add
the jQuery Cycle2 plugin to a site, but I couldn’t find any good ones… so I built
this. Basically, the Versatile jQuery Slider (VJS Slider) is a wrapper that pulls
in most of the available options into a shortcode for easy use. So you’ll want to
check out the [jQuery Cycle2 options](http://jquery.malsup.com/cycle2/api) to know
what is available.

The nice part is, the jQuery Cycle2 scripts are only loaded on the pages that they
are used on, and only the necessary scripts are loaded. So if you need the carousel
plugin, it will automatically be added in if the `fx` attribute is set `carousel`.
You need to center vertically? Set the `center-vert` attribute to `true`.

Easy as that!

#### Demos

Check out the [demos page](http://elevaunt.com/plugins/versatile-jquery-slider/demos).

#### Parameters

VJS Slider has some unique paramaters that jQuery Cycle2 doesn’t have. Also there
are a some changes to a few of the jQuery Cycle2 parameters. [Check them out](http://elevaunt.com/plugins/versatile-jquery-slider).

## Installation

 1. Install the plugin through the WordPress plugins screen directly by searching for
    Versatile jQuery Slider, or upload the plugin files to the `/wp-content/plugins/
    versatile-jquery-slider` directory
 2. Activate the plugin through the ‘Plugins’ screen in WordPress

#### Usage

To use the VJS Slider, you’ll use the shortcode `[vjs_slider] your slide code here[/
vjs_slider]`, then you’re all set for the basic, default usage.

If you want to get fancy, follow along with the [jQuery Cycle2 demos](http://jquery.malsup.com/cycle2/demo),
and wherever `data-cycle-attribute` is used, drop `data-cycle-` and all the rest
is the same (in most cases).

I’m not going to list out all the options here because they are all very well documented
on the [jQuery Cycle2 site](http://jquery.malsup.com/cycle2).  Check it all out 
over there, then make some cool stuff with the VJS Slider!

#### Important Differences

There are a couple important changes that had to be made because they wouldn’t work
with the shortcode. The following attributes are affected:

 * **slides**
    If you use the `slide` attribute, don’t add `>`, it will automatically
   be assumed. If you use ‘ If you use `>` like the demos on the jQuery Cycle2 site
   show, then it will mess up the shortcode and your slider won’t work.
 * **next** and **prev**
    If you want to set your own selectors for next and prev,
   you’ll need to add your own CSS. **_Note:_** if the navigation elements are inside
   the slider container they will be hidden by default. (see `navs`attribute below).
 * **slide-css**
    This attribute is not used because it doesn’t work reliably inside
   the shortcode. If you want slide specific CSS, just add your own class to your
   slide and add your own CSS.
 * **swipe**
    Swipe is turned on and the necessary js added automatically because
   let’s face it, who doesn’t want that?

#### VJS Slider Specific Attributes

VJS Slider has a few attribute unique to the plugin that are designed to help you
out.

 * **id**
    By default, the VJS Slider will have `id="vjs-slider"`. If you want to
   change it, use the `id` attribute. **_Note:_** if you have more than one slider
   on the same page, make sure they all have a different id.
 * **class**
    Give your slider a class and style to your heart’s content.  By default
   all sliders will have the class `vjs-slider`. If you set one here, it will be
   in addition to that class.
 * **css**
    VJS Slider comes with some very basic CSS. If you don’t want to use 
   it, set the `css` attribute to `false`. Then you can use your own without having
   to override anything.
 * **ie-fade**
    Set to `true` to include the fade/fadeout plugin for old versions
   of IE. This plugin corrects issues that arise when cleartype is used with opacity.
   See the [jQuery Cycle2 docs](http://jquery.malsup.com/cycle2/download/).
 * **navs**
    This will enable next and prev navigation links. Set to `inside` for
   the links to live inside the slider container. Set to `outside` for the links
   to live outside the slider container. **_Note:_** If set to `outside`, you’ll
   need to add your own CSS to make things look right.
 * **nav-next**
    When **navs** are enabled, the default will create a right arrow
   link. Use this attribute to change it to something else. It will accept plain
   text, `img` tag, or any html. If you don’t want an element inside (like you want
   to control it all with CSS), then just add `nav-next=""`.
 * **nav-prev**
    When **navs** are enabled, the default will create a left arrow
   link. Use this attribute to change it to something else. It will accept plain
   text, `img` tag, or any html. If you don’t want an element inside (like you want
   to control it all with CSS), then just add `nav-prev=""`.
 * **nav-selector**
    Give the navigation wrapper a class or id so that you can style
   as you wish.
 * **theme-fix**
    Sometimes a theme includes a version of jQuery Cycle (usually 
   it’s an older version). When this happens, it will create a conflict with VJS
   Slider. Set this attribute to `true` to fix the conflict.
 * **width**
    By default, the slider container will expand the full width of it’s
   parent container. You can set your own width with this attribute .

## FAQ

  Where can I find detailed instructions

You can view the docs at the [Versatile jQuery Slider plugin homepage](http://elevaunt.com/plugins/versatile-jquery-slider).
There you’ll find an overview of how to use the shortcode. For details regarding
all the available parameters, please see the [jQuery Cycle2 plugin options page](http://jquery.malsup.com/cycle2/api).

  My HTML slides aren’t working

Make sure you’ve included the `slides` parameter and correctly set it’s value to
the element of each slide (e.g. `div` or `span`). Also make sure you did not include`
>`, the VJS Slider will take care of that part for you.

  The slider looks like it works, but then it just breaks

First double checked that you don’t have any typos (missing quotes, etc).

Next, make sure that you’ve structured everything inside the shortcode correctly(
see the [VJS Slider demos](http://elevaunt.com/plugins/versatile-jquery-slider) 
and the [jQuery Cycle2 demos](http://jquery.malsup.com/cycle2/demo)).

If you’re still having problems, there’s a chance that your theme includes a version
of jQuery Cycle2. Try adding `theme-fix="true"` as a parameter and that should do
the trick.

## Anmeldelser

![](https://secure.gravatar.com/avatar/ed1c825647eac56a359e5247bb57df08e26720fae54727466da8cc2b2d2beb5c?
s=60&d=retro&r=g)

### 󠀁[Great job!](https://wordpress.org/support/topic/great-job-490/)󠁿

 [zerojack](https://profiles.wordpress.org/zerojack/) 18. april, 2017 1 svar

This is exactly what I was looking for. I installed version 1.0 last year, had an
issue with the first update (1.1.2), but that is fixed now. It seems to be working
well with the current version of WordPress (4.7.3).

 [ Læs 1 anmeldelse ](https://wordpress.org/support/plugin/versatile-jquery-slider/reviews/)

## Bidragsydere & udviklere

“Versitile jQuery Slider” er open source-software. Følgende personer har bidraget
til dette plugin.

Bidragsydere

 *   [ elevaunt ](https://profiles.wordpress.org/elevaunt/)

[Oversæt “Versitile jQuery Slider” til dit eget sprog.](https://translate.wordpress.org/projects/wp-plugins/versatile-jquery-slider)

### Interesseret i udvikling?

[Gennemse koden](https://plugins.trac.wordpress.org/browser/versatile-jquery-slider/),
tjek [SVN repository](https://plugins.svn.wordpress.org/versatile-jquery-slider/),
eller abonner på [udviklerloggen](https://plugins.trac.wordpress.org/log/versatile-jquery-slider/)
via [RSS](https://plugins.trac.wordpress.org/log/versatile-jquery-slider/?limit=100&mode=stop_on_copy&format=rss).

## Ændringslog

#### 1.1.3 (2017-02-09):

 * Bug fix:
    - Fixed bug when timeout=’0′ – for reals this time. The last “fix” made timeout
      =’0′ regardless of what was entered.

#### 1.1.2 (2017-02-04):

 * Bug fixes:
    - Moved CSS to , only when shortcode is used for better override capabilities
    - Fixed bug when timeout=’0′
    - Fixed custom class name issue
    - Fixed display issue when slides are divs

#### 1.0 (2016-08-11):

 * Initial Release

## Meta

 *  Version **1.1.3**
 *  Senest opdateret **9 år siden**
 *  Aktive installationer **10+**
 *  WordPress-version ** 3.0.1 eller højere **
 *  Testet op til **4.5.33**
 *  Sprog
 * [English (US)](https://wordpress.org/plugins/versatile-jquery-slider/)
 * Tags
 * [jquery slider](https://da.wordpress.org/plugins/tags/jquery-slider/)[jquery slideshow](https://da.wordpress.org/plugins/tags/jquery-slideshow/)
   [responsive slider](https://da.wordpress.org/plugins/tags/responsive-slider/)
   [slider](https://da.wordpress.org/plugins/tags/slider/)[slideshow](https://da.wordpress.org/plugins/tags/slideshow/)
 *  [Avanceret visning](https://da.wordpress.org/plugins/versatile-jquery-slider/advanced/)

## Bedømmelser

 5 ud af 5 stjerner.

 *  [  1 5-stjernet anmeldelse     ](https://wordpress.org/support/plugin/versatile-jquery-slider/reviews/?filter=5)
 *  [  0 4-stjernet anmeldelser     ](https://wordpress.org/support/plugin/versatile-jquery-slider/reviews/?filter=4)
 *  [  0 3-stjernet anmeldelser     ](https://wordpress.org/support/plugin/versatile-jquery-slider/reviews/?filter=3)
 *  [  0 2-stjernet anmeldelser     ](https://wordpress.org/support/plugin/versatile-jquery-slider/reviews/?filter=2)
 *  [  0 1-stjernet anmeldelser     ](https://wordpress.org/support/plugin/versatile-jquery-slider/reviews/?filter=1)

[Your review](https://wordpress.org/support/plugin/versatile-jquery-slider/reviews/#new-post)

[Se alle anmeldelser.](https://wordpress.org/support/plugin/versatile-jquery-slider/reviews/)

## Bidragsydere

 *   [ elevaunt ](https://profiles.wordpress.org/elevaunt/)

## Support

Har du noget at sige? Har du brug for hjælp?

 [Vis supportforum](https://wordpress.org/support/plugin/versatile-jquery-slider/)