{"id":4844,"date":"2018-01-03T08:26:28","date_gmt":"2018-01-03T08:26:28","guid":{"rendered":"http:\/\/a1webdesignteam.com\/blog\/?p=4844"},"modified":"2018-01-03T08:26:28","modified_gmt":"2018-01-03T08:26:28","slug":"elastislide-a-responsive-jquery-carousel-slider","status":"publish","type":"post","link":"https:\/\/a1webdesignteam.com\/blog\/elastislide-a-responsive-jquery-carousel-slider\/","title":{"rendered":"Elastislide \u2013 A Responsive jQuery Carousel Slider"},"content":{"rendered":"
Elastislide is a responsive image carousel that will adapt fluidly in a layout. It is a jQuery plugin that can be laid out horizontally or vertically with a pre-defined minimum number of shown images.<\/div>\n
\n
\n
View demo<\/a> Download source<\/a><\/div>\n<\/div>\n<\/div>\n

With the responsive awakening in web design it becomes important to not only take care of the visual part of a website but also of the functionality. Elastislide is a responsive jQuery image carousel that will adapt its size and its behavior in order to work on any screen size. Inserting the carousel\u2019s structure into a container with a fluid width will also make the carousel fluid.<\/p>\n

In a carousel, one could think that simply making its container \u201cshorter\u201d will solve the problem on smaller screens, but in some cases (e.g. when we have bigger images) it might be reasonable to resize the items as well. This and other options are part of Elastislide\u2019s properties.<\/p>\n

Elastislide uses the jQuery++ for the swipe events on touch devices.<\/p>\n

\n
The beautiful images are by talented Sherman Geronimo-Tan and they are licensed under Creative Commons Attribution 2.0 Generic (CC BY 2.0).<\/div>\n<\/div>\n

The HTML Structure<\/h3>\n

When using the plugin, you\u2019ll simply have to apply it to an unordered list with images (optionally with anchors). Make sure the surrounding container is fluid, i.e. has a percentage-based width. (If you put the carousel in a container with a fixed width, it will not adapt. So make sure that your container has a fluid layout.)<\/p>\n

<ul<\/span> id<\/span>=\"carousel\"<\/span> class<\/span>=\"elastislide-list\"<\/span>><\/span>\r\n\t<li<\/span>><\/span><a<\/span> href<\/span>=\"#\"<\/span>><\/span><img<\/span> src<\/span>=\"images\/1.jpg\"<\/span> alt<\/span>=\"image01\"<\/span> \/><\/span><\/a<\/span>><\/span><\/li<\/span>><\/span>\r\n\t<li<\/span>><\/span><a<\/span> href<\/span>=\"#\"<\/span>><\/span><img<\/span> src<\/span>=\"images\/2.jpg\"<\/span> alt<\/span>=\"image02\"<\/span> \/><\/span><\/a<\/span>><\/span><\/li<\/span>><\/span>\r\n\t<li<\/span>><\/span><a<\/span> href<\/span>=\"#\"<\/span>><\/span><img<\/span> src<\/span>=\"images\/3.jpg\"<\/span> alt<\/span>=\"image03\"<\/span> \/><\/span><\/a<\/span>><\/span><\/li<\/span>><\/span>\r\n\t<!-- ... --><\/span>\r\n<\/ul<\/span>><\/span>\r\n<\/pre>\n
Use your preferred ID and call the plugin like this:<\/p>\n
$('#carousel'<\/span>).elastislide();\r\n<\/pre>\n
Options<\/h3>\n
Elastislide has the following default options:<\/p>\n
$.Elastislide.defaults = {\r\n\t\/\/ orientation 'horizontal' || 'vertical'<\/span>\r\n\torientation : 'horizontal'<\/span>,\r\n\r\n\t\/\/ sliding speed<\/span>\r\n\tspeed : 500<\/span>,\r\n\r\n\t\/\/ sliding easing<\/span>\r\n\teasing : 'ease-in-out'<\/span>,\r\n\r\n\t\/\/ the minimum number of items to show. <\/span>\r\n\t\/\/ when we resize the window, this will make sure minItems are always shown <\/span>\r\n\t\/\/ (unless of course minItems is higher than the total number of elements)<\/span>\r\n\tminItems : 3<\/span>,\r\n\r\n\t\/\/ index of the current item (left most item of the carousel)<\/span>\r\n\tstart : 0<\/span>,\r\n\t\r\n\t\/\/ click item callback<\/span>\r\n\tonClick : function<\/span>( el, position, evt )<\/span> <\/span>{ return<\/span> false<\/span>; },\r\n\tonReady : function<\/span>()<\/span> <\/span>{ return<\/span> false<\/span>; },\r\n\tonBeforeSlide : function<\/span>()<\/span> <\/span>{ return<\/span> false<\/span>; },\r\n\tonAfterSlide : function<\/span>()<\/span> <\/span>{ return<\/span> false<\/span>; }\r\n};\r\n<\/pre>\n
It is also possible to dynamically add new items to the carousel. The following is an example on how to achieve that:<\/p>\n
var<\/span> carousel = $('#carousel'<\/span>).elastislide();\r\n...\r\n\r\n$('#carousel'<\/span>).append(\"<li><a href=\"<\/span>#\"><img src=\"<\/span>images\/10.<\/span>jpg\" alt=\"<\/span>image03\" \/><\/a><\/li>\"<\/span>);\r\ncarousel.add();\r\n\r\n<\/pre>\n
Note that if you use the Elastislide for a vertical layout, the height of the container will be automatically set according to how many images you choose to be visible.<\/p>\n
This works down to IE8, but if you\u2019d like to use it in IE8 you\u2019ll need to add comments in your list in order to prevent white spaces.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"
Elastislide is a responsive image carousel that will adapt fluidly in a layout. It is a jQuery plugin that can be laid out horizontally or vertically with a pre-defined minimum number of shown images. View demo Download source With the responsive awakening in web design it becomes important to not only take care of the […]<\/p>\n","protected":false},"author":1,"featured_media":4846,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0},"categories":[6],"tags":[51],"_links":{"self":[{"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/posts\/4844"}],"collection":[{"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/comments?post=4844"}],"version-history":[{"count":0,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/posts\/4844\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/media\/4846"}],"wp:attachment":[{"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/media?parent=4844"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/categories?post=4844"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/tags?post=4844"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}