shyft.js is a jQuery/Javascript content carousel plugin with a focus on being lightweight, feature-rich and highly customizable. To that end, shyft.js is small (~5kb minified), versatile (AMD-compliant for use with require.js), and very customizable with a host of options, callbacks and exposed public methods.
While very versatile, shyft does expect a specific HTML structure. When initializing the plugin, you will need to pass a jQuery selected object in as a parameter. This object should be the direct parent element of the elements you would like shyft to convert into slides. Remember, any direct child elements of this wrapping element will be converted to slides, so if you want to add additional HTML (for example to create a custom navigation system for your carousel), you need to place it outside the wrapping element. For an example, consider the following HTML:
<!--
Here, div#shyft-wrapper is the wrapping element we will pass into the initialization function
The child elements (div.shyft-item) will be converted into slides.
Note the id and classes are not required and are there just for reference
-->
<div id="shyft-wrapper">
<div class="shyft-item"></div>
<div class="shyft-item"></div>
<div class="shyft-item"></div>
<div class="shyft-item"></div>
</div>
Once you have included the shyft.js file in your page,
you can initialize the plugin by calling the shyft() function. The shyft()
function takes two parameters:
While not a traditional jQuery plugin, shyft does rely on jQuery, so make sure you're calling
the shyft() function within your $(document).ready() block.
1
2
3
4
5
6
7
8
9
// Sample JS
$(document).ready(function() {
// Select object
var obj = $('#my-object');
var opts = {
autoplay: false
}
shyft(obj, opts);
});
Calling shyft() returns an object which can be used to access
the public methods (see Public Methods below).
shyft.js is AMD compliant, which means that it can be used out of the box as an AMD module for scripts like require.js. If you're using require.js you can simply load the module like you would any other module:
1
2
3
require(['shyft'], function(shyft) {
var myshyft = shyft($('#myshyft'));
});
If you're not using require.js or some other AMD-backed script loader, don't worry. The plugin still exposes a global
function shyft() that you can use to initialize your carousels. In fact, all of the code samples in this documentation use that method.
Just make sure you're manually including jQuery and calling shyft() within the document.ready block.
shyft has responsiveness baked in to the plugin itself. When the window resizes, shyft will automatically adjust the width of the carousel items and animations to make sure they stay in sync. All you have to do is make sure that the wrapper element is responsive in your CSS (using media queries or a max-width). shyft takes care of the rest!
If you want some additional control of the responsiveness, shyft also has a public method update() that
you can use to update the carousel with a fresh set of options. Then all you need to do is call update()
anytime you pass a breakpoint and need to change the carousel. Now, if only there was a way to expose breakpoints in Javascript …
cough … check out my updown plugin … cough cough
shyft dynamically adds CSS classes to various elements as part of the initialization process. These classes are used to add necessary styles to the carousel, slides, links, etc. The core styles are defined in the included CSS file, shyft.css. Because the styles are defined in CSS, you can modify them however you want in order to create a custom look and feel for your carousel. Just make sure you don't mess around with the core styles (core styles are clearly noted in the CSS). Altering core styles could affect the functionality of the carousel.
shyft exposes public methods which are returned as an object to the shyft() function call.
To utilize the public methods, simply capture the return in a variable and call the public methods as methods of that variable.
For more details on public methods, visit Public Methods page.