Flexisel will adapt responsively as the screen width gets smaller...
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
You can also change the number of items shown depending on the screen width.
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
Other options include autoplay, number of items to scroll, animation speed when scrolling right and left, initial number of visible items, and more!
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
And you can set whether you want the slider to be infinite or not.
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
127 |
128 |
129 |
130 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | Flexisel
2 | ========
3 |
4 | A responsive carousel jQuery plugin...
5 |
6 | [View Demo](http://9bitstudios.github.io/flexisel/) | [Buy Author a Coffee](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=NNCJ79B2W6MUL)
7 |
8 | All you have to do is call flexisel on your unordered list containing images. Call it on the
9 |
10 | ```javascript
11 | $(window).load
12 | ```
13 | event (as opposed to the
14 |
15 | ```javascript
16 | $(document).ready
17 | ```
18 |
19 | event so that Flexisel can calculate the width of the images and figure out how to space them out properly. For example...
20 |
21 | ```javascript
22 | $(window).load(function() {
23 | $("#myCarousel").flexisel();
24 | });
25 | ```
26 |
27 | Below is how you'd call it passing in all the options....
28 |
29 | ```javascript
30 | $(window).load(function() {
31 | $("#myCarousel").flexisel({
32 | visibleItems: 4,
33 | itemsToScroll: 3,
34 | animationSpeed: 400,
35 | infinite: true,
36 | navigationTargetSelector: null,
37 | autoPlay: {
38 | enable: false,
39 | interval: 5000,
40 | pauseOnHover: true
41 | },
42 | responsiveBreakpoints: {
43 | portrait: {
44 | changePoint:480,
45 | visibleItems: 1,
46 | itemsToScroll: 1
47 | },
48 | landscape: {
49 | changePoint:640,
50 | visibleItems: 2,
51 | itemsToScroll: 2
52 | },
53 | tablet: {
54 | changePoint:768,
55 | visibleItems: 3,
56 | itemsToScroll: 3
57 | }
58 | }
59 | });
60 | });
61 | ```
62 |
63 | ### Options
64 |
65 | Below is a listing of some basic options you can set...
66 |
67 | | Option | Value | Default Value | Description | Example |
68 | | --- | --- | --- | --- | --- |
69 | visibleItems | Integer | 4 | Sets the initial number of visible items in the carousel | visibleItems: 5
70 | itemsToScroll | Integer | 3 | Sets the initial number of items that you want to scroll. Note: This value will be overridden by responsive breakpoint settings at smaller or larger screen widths | itemsToScroll: 2
71 | animationSpeed | Integer (in Milliseconds) | 400 | Sets the "speed" of the animation when the carousel navigates right or left. | animationSpeed: 1000
72 | infinite | Boolean | true | Sets whether or not the carousel wraps infinitely | infinite: false
73 | navigationTargetSelector | String (selector) | null | The left/right arrows will be added to the element with this selector instead of the default | navigationTargetSelector: '#navigation'
74 | autoPlay | Object | autoPlay: { enable: false, interval: 5000, pauseOnHover: true } | Values for setting autoplay. The "enable" property must be true for this to apply | autoPlay: { enable: true, interval: 7000, pauseOnHover: false }
75 | loaded | function | function(object) { } | Callback function that runs after the slider is loaded and initialized. A jQuery reference to the instance of the carousel is passed in as the first argument. | loaded: function(object) { console.log('Slider loaded...'); }
76 | before | function | function(object) { } | Callback function that runs before a slide transition. A jQuery reference to the instance of the carousel is passed in as the first argument. | before: function(object) { console.log('Before transition...'); }
77 | after | function | function(object) { } | Callback function that runs after a slide transition. A jQuery reference to the instance of the carousel is passed in as the first argument. | after: function(object) { console.log('After transition...'); }
78 | resize | function | function(object) { } | Callback function that runs after a throttled resize event finishes. A jQuery reference to the instance of the carousel is passed in as the first argument. | resize: function(object) { console.log('After resize...'); }
79 |
80 |
81 | ### Responsive Breakpoints
82 |
83 | This is an object that specifies responsive breakpoints. You can name your objects whatever you want (the default names provided are "portrait," "landscape," and "tablet") and you can have as many or as few as you want (so you could add to or delete any of the defaults), but each one needs to have a "changePoint" a "visibleItems", and an "itemsToScroll" property. Those properties are required. The responsiveBreakpoints object sets the threshold of where the screen width falls below a certain width. So for example, the example default portrait responsive breakpoint will be applied to the carousel when the screen width is less than the changePoint value set for portrait. The number of items shown in this state will be whatever value is set for visibleItems and the number of items that scroll per click (or swipe) is set by the itemsToScroll property.
84 |
85 | For example...
86 |
87 | ```javascript
88 | responsiveBreakpoints: {
89 | portrait: {
90 | changePoint:480,
91 | visibleItems: 1,
92 | itemsToScroll: 1
93 | },
94 | landscape: {
95 | changePoint:640,
96 | visibleItems: 2,
97 | itemsToScroll: 2
98 | },
99 | tablet: {
100 | changePoint:768,
101 | visibleItems: 3,
102 | itemsToScroll: 3
103 | }
104 | }
105 | ```
106 |
107 | The landscape responsive breakpoint will be applied when the screen width is greater than the width of the portrait changePoint value, but less that the width of the tablet changePoint value. Likewise, when the screen width falls below the tablet changePoint, the number of visibleItems set for the tablet event will be shown. The same is true for the portrait breakpoint. Usually, because the portrait responsive event is used to show portrait views on mobile phones, 1 is a good value to set for both visibleItems and itemsToScroll here. And remember you can pass as many or as few of these as you like in and you can name them whatever you want. So, for example, if you wanted to just have things only show 1 item on all views below a certain width you could pass in something like the following...
108 |
109 | ```javascript
110 | responsiveBreakpoints: {
111 | mobile: {
112 | changePoint:768,
113 | visibleItems: 1,
114 | itemsToScroll: 1
115 | }
116 | }
117 | ```
118 |
119 | And then this will be the only point at which Flexisel changes.
120 |
121 | [View Demo](http://9bitstudios.github.com/flexisel/) | [Buy Author a Coffee](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=NNCJ79B2W6MUL)
122 |
--------------------------------------------------------------------------------
/js/jquery.flexisel.js:
--------------------------------------------------------------------------------
1 | /*
2 | * File: jquery.flexisel.js
3 | * Version: 2.2.2
4 | * Description: Responsive carousel jQuery plugin
5 | * Author: 9bit Studios
6 | * Copyright 2016, 9bit Studios
7 | * http://www.9bitstudios.com
8 | * Free to use and abuse under the MIT license.
9 | * http://www.opensource.org/licenses/mit-license.php
10 | */
11 |
12 | (function ($) {
13 |
14 | $.fn.flexisel = function (options) {
15 |
16 | var defaults = $.extend({
17 | visibleItems: 4,
18 | itemsToScroll: 3,
19 | animationSpeed: 400,
20 | infinite: true,
21 | navigationTargetSelector: null,
22 | autoPlay: {
23 | enable: false,
24 | interval: 5000,
25 | pauseOnHover: true
26 | },
27 | responsiveBreakpoints: {
28 | portrait: {
29 | changePoint:480,
30 | visibleItems: 1,
31 | itemsToScroll: 1
32 | },
33 | landscape: {
34 | changePoint:640,
35 | visibleItems: 2,
36 | itemsToScroll: 2
37 | },
38 | tablet: {
39 | changePoint:768,
40 | visibleItems: 3,
41 | itemsToScroll: 3
42 | }
43 | },
44 | loaded: function(){ },
45 | before: function(){ },
46 | after: function(){ },
47 | resize: function(){ }
48 | }, options);
49 |
50 | /******************************
51 | Private Variables
52 | *******************************/
53 |
54 | var object = $(this);
55 | var settings = $.extend(defaults, options);
56 | var itemsWidth;
57 | var canNavigate = true;
58 | var itemCount;
59 | var itemsVisible = settings.visibleItems;
60 | var itemsToScroll = settings.itemsToScroll;
61 | var responsivePoints = [];
62 | var resizeTimeout;
63 | var autoPlayInterval;
64 |
65 | /******************************
66 | Public Methods
67 | *******************************/
68 |
69 | var methods = {
70 |
71 | init: function() {
72 | return this.each(function () {
73 | methods.appendHTML();
74 | methods.setEventHandlers();
75 | methods.initializeItems();
76 | });
77 | },
78 |
79 | /******************************
80 | Initialize Items
81 | *******************************/
82 |
83 | initializeItems: function() {
84 |
85 | var obj = settings.responsiveBreakpoints;
86 | for(var i in obj) { responsivePoints.push(obj[i]); }
87 | responsivePoints.sort(function(a, b) { return a.changePoint - b.changePoint; });
88 | var childSet = object.children();
89 | childSet.first().addClass("index");
90 | itemsWidth = methods.getCurrentItemWidth();
91 | itemCount = childSet.length;
92 | childSet.width(itemsWidth);
93 | if(settings.infinite) {
94 | methods.offsetItemsToBeginning(Math.floor(childSet.length / 2));
95 | object.css({
96 | 'left': -itemsWidth * Math.floor(childSet.length / 2)
97 | });
98 | }
99 | $(window).trigger('resize');
100 | object.fadeIn();
101 | settings.loaded.call(this, object);
102 |
103 | },
104 |
105 | /******************************
106 | Append HTML
107 | *******************************/
108 |
109 | appendHTML: function() {
110 |
111 | object.addClass("nbs-flexisel-ul");
112 | object.wrap("
