Elevaunt
UI/UX Design and Development Portfolio of Lee Porter
UI/UX Design and Development Portfolio of Lee Porter
The Versatile jQuery Slider is a WordPress plugin that helps you set up an easy, versatile, responsive slider with images or any HTML content. It’s powered by jQuery 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 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
.
It’s that easy!
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, 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. Check it all out over there, then make some cool stuff with the VJS Slider!
There are a couple important changes that had to be made because they wouldn’t work with the shortcode. The following attributes are affected:
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.Note: if the navigation elements are inside the slider container they will be hidden by default. (see navs
attribute below)
VJS Slider has a few attribute unique to the plugin that are designed to help you out.
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.
vjs-slider
. If you set one here, it will be in addition to that class.css
attribute to false
. Then you can use your own without having to override anything.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.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.
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=""
.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=""
.true
to fix the conflict.[vjs_slider id="demo-1"]
<img src="http://leeporter.elevaunt.com/files/2016/08/soundbaord-web-495x400.jpg" />
<img src="http://leeporter.elevaunt.com/files/2016/08/skateboard-stool-whitewall-web-495x400.jpg" />
<img src="http://leeporter.elevaunt.com/files/2016/08/camera-piano-web-495x400.jpg" />
[/vjs_slider]
[vjs_slider id="demo-2" fx="scrollHorz" timeout="5000" navs="inside"]
<img src="http://leeporter.elevaunt.com/files/2016/08/soundbaord-web-495x400.jpg" />
<img src="http://leeporter.elevaunt.com/files/2016/08/skateboard-stool-whitewall-web-495x400.jpg" />
<img src="http://leeporter.elevaunt.com/files/2016/08/camera-piano-web-495x400.jpg" />
[/vjs_slider]
This is and HTML slide
This is and HTML slide
This is and HTML slide
[vjs_slider id="demo-non-image" fx="scrollHorz" slides="div"]
<div>
<h4>Slide 1</h4>
<p>This is and HTML slide</p>
</div>
<div>
<h4>Slide 2</h4>
<p>This is and HTML slide</p>
</div>
<div>
<h4>Slide 3</h4>
<p>This is and HTML slide</p>
</div>
[/vjs_slider]
Don’t take my word for it
Lee and I were co-workers in the past, so when my company needed a new website, he was the first person I called. He designs beautiful, functional, creative websites quickly and with excellence. Not only was the product even better than my team had imagined, but Lee was very responsive to questions, emails, and changes to the site that we were looking for. Lee took our site from lame, ugly, and difficult to navigate to streamlined, modern, and beautiful. Our team loved working with Lee and will definitely use him again in the future if we need his expertise!
Lee helped us put together our brand website. He was incredible at taking the abstract concepts we presented and moving it to a platform that exceeded our expectations. Lee met each deadline and provided us with feedback and suggestions on items we had overlooked. The solutions he provided us were insightful and targeted to our needs. The website was quickly implemented and we will be able to easily build on to it in the future. It was a pleasure to work with Lee and we look forward to working with him on future projects.
Let's chat
Let me know if you have an interesting project – my door is alway open