{"id":549,"date":"2012-06-24T20:38:59","date_gmt":"2012-06-24T20:38:59","guid":{"rendered":"http:\/\/blog.alexandremagno.net\/?p=549"},"modified":"2012-06-24T20:45:36","modified_gmt":"2012-06-24T20:45:36","slug":"creating-sliding-itens-with-jquery-sliding","status":"publish","type":"post","link":"https:\/\/alexandremagno.net\/en\/2012\/06\/24\/creating-sliding-itens-with-jquery-sliding\/","title":{"rendered":"Creating sliding itens with jQuery Sliding"},"content":{"rendered":"

This post is a complete tutorial about how to use the jQuery sliding plugin<\/a>. Check the documentation<\/a> and live example<\/a> for full details.<\/p>\n

What the plugin does?<\/h3>\n

This plugin has a purpose to create sliding elements, with a navigation arrows for a subset of items. For a small set, use the default sliding. For a large sets, use the remote sliding, that load elements on demand and cache it. This way the plugin will not make any request for pages that it was already loaded before.<\/p>\n

Where is used<\/h3>\n

The plugin was developed for Globo.tv<\/a> website at video listing.<\/p>\n

\"The<\/a><\/p>\n

Simple example<\/h3>\n

First, we need to call the plugin with the dependencies and a simple markup of a container div<\/strong><\/em> and a unordered list<\/strong><\/em>. This is the default markup, but you can change via options, to check different options, visit the documentation<\/a>.
\n[jsfiddle url=”http:\/\/jsfiddle.net\/fhpaC\/” include=”html”]<\/p>\n

And then we call the plugin with basic options and the following basic style:
\n[jsfiddle url=”http:\/\/jsfiddle.net\/fhpaC\/” include=”js,css”]<\/p>\n

And we have the following result:
\n[jsfiddle url=”http:\/\/jsfiddle.net\/fhpaC\/” include=”result,html,js,css”]<\/p>\n

Remote sliding<\/h3>\n

When you set the option url<\/em><\/strong>, you will activate the remote slide. Besides that, when you specify urlFormat<\/strong><\/em>, it’s possible to set a pattern for your url. This is useful when you have urls like ‘yourdomain\/page\/2\/’<\/strong><\/em>.<\/p>\n

We will use a url of example that return the html list. So the full code is showed below with live:<\/p>\n

[jsfiddle url=”http:\/\/jsfiddle.net\/LHnPq\/2\/” include=”result,html,js,css”]<\/p>\n

We call the url that pass the content to be loaded.<\/p>\n

We need to set setTotalPages<\/strong>, this way the plugin know the maximum of request is being maded. Usually this information came from a ajax request, but it’s needed otherwise you can paginate forward infinitely and will not disable the buttons when necessary.<\/p>\n

I use params to pass the content, but it’s just a example to show how to use params to send extra data.<\/p>\n

With the onAppend<\/strong><\/em> callback you can change the return data before is rendered, this way you can have a custom ajax format and extract from data<\/strong><\/em> just what you need, like a json key<\/strong><\/em> with the html content<\/strong><\/em>, like this:<\/p>\n

[gist]https:\/\/gist.github.com\/2984795[\/gist]<\/p>\n

 <\/p>\n

 <\/p>\n","protected":false},"excerpt":{"rendered":"

This post is a complete tutorial about how to use the jQuery sliding plugin. Check the documentation and live example for full details. What the plugin does? This plugin has a purpose to create sliding elements, with a navigation arrows for a […]<\/p>\n","protected":false},"author":1,"featured_media":551,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[106],"tags":[87,64,104,65,61,105],"class_list":["post-549","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery-en","tag-carousel","tag-jquery-2","tag-jquery-ui","tag-plugin","tag-plugins-2","tag-sliding"],"yoast_head":"\nCreating sliding itens with jQuery Sliding - Webpoint<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/alexandremagno.net\/en\/2012\/06\/24\/creating-sliding-itens-with-jquery-sliding\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Creating sliding itens with jQuery Sliding - Webpoint\" \/>\n<meta property=\"og:description\" content=\"This post is a complete tutorial about how to use the jQuery sliding plugin. Check the documentation and live example for full details. What the plugin does? This plugin has a purpose to create sliding elements, with a navigation arrows for a […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/alexandremagno.net\/en\/2012\/06\/24\/creating-sliding-itens-with-jquery-sliding\/\" \/>\n<meta property=\"og:site_name\" content=\"Webpoint\" \/>\n<meta property=\"article:published_time\" content=\"2012-06-24T20:38:59+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2012-06-24T20:45:36+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/alexandremagno.net\/wp-content\/uploads\/2012\/06\/Screen-shot-2012-06-23-at-5.25.52-PM.png\" \/>\n\t<meta property=\"og:image:width\" content=\"560\" \/>\n\t<meta property=\"og:image:height\" content=\"293\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"alexanmtz\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"alexanmtz\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/alexandremagno.net\/en\/2012\/06\/24\/creating-sliding-itens-with-jquery-sliding\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/alexandremagno.net\/en\/2012\/06\/24\/creating-sliding-itens-with-jquery-sliding\/\"},\"author\":{\"name\":\"alexanmtz\",\"@id\":\"https:\/\/alexandremagno.net\/#\/schema\/person\/88a94d0648dd15b6080f207b6b2156af\"},\"headline\":\"Creating sliding itens with jQuery Sliding\",\"datePublished\":\"2012-06-24T20:38:59+00:00\",\"dateModified\":\"2012-06-24T20:45:36+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/alexandremagno.net\/en\/2012\/06\/24\/creating-sliding-itens-with-jquery-sliding\/\"},\"wordCount\":393,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/alexandremagno.net\/#organization\"},\"keywords\":[\"carousel\",\"jquery\",\"jquery ui\",\"plugin\",\"plugins\",\"sliding\"],\"articleSection\":[\"jQuery\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/alexandremagno.net\/en\/2012\/06\/24\/creating-sliding-itens-with-jquery-sliding\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/alexandremagno.net\/en\/2012\/06\/24\/creating-sliding-itens-with-jquery-sliding\/\",\"url\":\"https:\/\/alexandremagno.net\/en\/2012\/06\/24\/creating-sliding-itens-with-jquery-sliding\/\",\"name\":\"Creating sliding itens with jQuery Sliding - Webpoint\",\"isPartOf\":{\"@id\":\"https:\/\/alexandremagno.net\/#website\"},\"datePublished\":\"2012-06-24T20:38:59+00:00\",\"dateModified\":\"2012-06-24T20:45:36+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/alexandremagno.net\/en\/2012\/06\/24\/creating-sliding-itens-with-jquery-sliding\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/alexandremagno.net\/en\/2012\/06\/24\/creating-sliding-itens-with-jquery-sliding\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/alexandremagno.net\/en\/2012\/06\/24\/creating-sliding-itens-with-jquery-sliding\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"In\u00edcio\",\"item\":\"https:\/\/alexandremagno.net\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Creating sliding itens with jQuery Sliding\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/alexandremagno.net\/#website\",\"url\":\"https:\/\/alexandremagno.net\/\",\"name\":\"Webpoint\",\"description\":\"Weblosofia com desenvolvimento web\",\"publisher\":{\"@id\":\"https:\/\/alexandremagno.net\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/alexandremagno.net\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/alexandremagno.net\/#organization\",\"name\":\"Webpoint\",\"url\":\"https:\/\/alexandremagno.net\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/alexandremagno.net\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/alexandremagno.net\/wp-content\/uploads\/2021\/12\/cropped-cropped-logo-1.png\",\"contentUrl\":\"https:\/\/alexandremagno.net\/wp-content\/uploads\/2021\/12\/cropped-cropped-logo-1.png\",\"width\":35,\"height\":31,\"caption\":\"Webpoint\"},\"image\":{\"@id\":\"https:\/\/alexandremagno.net\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/alexandremagno.net\/#\/schema\/person\/88a94d0648dd15b6080f207b6b2156af\",\"name\":\"alexanmtz\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/alexandremagno.net\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/03b43dc8e6881b6af6fbbffd7465227f2d5b0648ba6646a0174a79811ecb6cde?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/03b43dc8e6881b6af6fbbffd7465227f2d5b0648ba6646a0174a79811ecb6cde?s=96&d=mm&r=g\",\"caption\":\"alexanmtz\"},\"sameAs\":[\"https:\/\/alexandremagno.net\"],\"url\":\"https:\/\/alexandremagno.net\/en\/author\/alexanmtz\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Creating sliding itens with jQuery Sliding - Webpoint","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/alexandremagno.net\/en\/2012\/06\/24\/creating-sliding-itens-with-jquery-sliding\/","og_locale":"en_US","og_type":"article","og_title":"Creating sliding itens with jQuery Sliding - Webpoint","og_description":"This post is a complete tutorial about how to use the jQuery sliding plugin. Check the documentation and live example for full details. What the plugin does? This plugin has a purpose to create sliding elements, with a navigation arrows for a […]","og_url":"https:\/\/alexandremagno.net\/en\/2012\/06\/24\/creating-sliding-itens-with-jquery-sliding\/","og_site_name":"Webpoint","article_published_time":"2012-06-24T20:38:59+00:00","article_modified_time":"2012-06-24T20:45:36+00:00","og_image":[{"width":560,"height":293,"url":"https:\/\/alexandremagno.net\/wp-content\/uploads\/2012\/06\/Screen-shot-2012-06-23-at-5.25.52-PM.png","type":"image\/png"}],"author":"alexanmtz","twitter_card":"summary_large_image","twitter_misc":{"Written by":"alexanmtz","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/alexandremagno.net\/en\/2012\/06\/24\/creating-sliding-itens-with-jquery-sliding\/#article","isPartOf":{"@id":"https:\/\/alexandremagno.net\/en\/2012\/06\/24\/creating-sliding-itens-with-jquery-sliding\/"},"author":{"name":"alexanmtz","@id":"https:\/\/alexandremagno.net\/#\/schema\/person\/88a94d0648dd15b6080f207b6b2156af"},"headline":"Creating sliding itens with jQuery Sliding","datePublished":"2012-06-24T20:38:59+00:00","dateModified":"2012-06-24T20:45:36+00:00","mainEntityOfPage":{"@id":"https:\/\/alexandremagno.net\/en\/2012\/06\/24\/creating-sliding-itens-with-jquery-sliding\/"},"wordCount":393,"commentCount":0,"publisher":{"@id":"https:\/\/alexandremagno.net\/#organization"},"keywords":["carousel","jquery","jquery ui","plugin","plugins","sliding"],"articleSection":["jQuery"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/alexandremagno.net\/en\/2012\/06\/24\/creating-sliding-itens-with-jquery-sliding\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/alexandremagno.net\/en\/2012\/06\/24\/creating-sliding-itens-with-jquery-sliding\/","url":"https:\/\/alexandremagno.net\/en\/2012\/06\/24\/creating-sliding-itens-with-jquery-sliding\/","name":"Creating sliding itens with jQuery Sliding - Webpoint","isPartOf":{"@id":"https:\/\/alexandremagno.net\/#website"},"datePublished":"2012-06-24T20:38:59+00:00","dateModified":"2012-06-24T20:45:36+00:00","breadcrumb":{"@id":"https:\/\/alexandremagno.net\/en\/2012\/06\/24\/creating-sliding-itens-with-jquery-sliding\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/alexandremagno.net\/en\/2012\/06\/24\/creating-sliding-itens-with-jquery-sliding\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/alexandremagno.net\/en\/2012\/06\/24\/creating-sliding-itens-with-jquery-sliding\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"In\u00edcio","item":"https:\/\/alexandremagno.net\/en\/"},{"@type":"ListItem","position":2,"name":"Creating sliding itens with jQuery Sliding"}]},{"@type":"WebSite","@id":"https:\/\/alexandremagno.net\/#website","url":"https:\/\/alexandremagno.net\/","name":"Webpoint","description":"Weblosofia com desenvolvimento web","publisher":{"@id":"https:\/\/alexandremagno.net\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/alexandremagno.net\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/alexandremagno.net\/#organization","name":"Webpoint","url":"https:\/\/alexandremagno.net\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/alexandremagno.net\/#\/schema\/logo\/image\/","url":"https:\/\/alexandremagno.net\/wp-content\/uploads\/2021\/12\/cropped-cropped-logo-1.png","contentUrl":"https:\/\/alexandremagno.net\/wp-content\/uploads\/2021\/12\/cropped-cropped-logo-1.png","width":35,"height":31,"caption":"Webpoint"},"image":{"@id":"https:\/\/alexandremagno.net\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/alexandremagno.net\/#\/schema\/person\/88a94d0648dd15b6080f207b6b2156af","name":"alexanmtz","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/alexandremagno.net\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/03b43dc8e6881b6af6fbbffd7465227f2d5b0648ba6646a0174a79811ecb6cde?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/03b43dc8e6881b6af6fbbffd7465227f2d5b0648ba6646a0174a79811ecb6cde?s=96&d=mm&r=g","caption":"alexanmtz"},"sameAs":["https:\/\/alexandremagno.net"],"url":"https:\/\/alexandremagno.net\/en\/author\/alexanmtz\/"}]}},"_links":{"self":[{"href":"https:\/\/alexandremagno.net\/en\/wp-json\/wp\/v2\/posts\/549","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alexandremagno.net\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/alexandremagno.net\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/alexandremagno.net\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/alexandremagno.net\/en\/wp-json\/wp\/v2\/comments?post=549"}],"version-history":[{"count":9,"href":"https:\/\/alexandremagno.net\/en\/wp-json\/wp\/v2\/posts\/549\/revisions"}],"predecessor-version":[{"id":566,"href":"https:\/\/alexandremagno.net\/en\/wp-json\/wp\/v2\/posts\/549\/revisions\/566"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/alexandremagno.net\/en\/wp-json\/wp\/v2\/media\/551"}],"wp:attachment":[{"href":"https:\/\/alexandremagno.net\/en\/wp-json\/wp\/v2\/media?parent=549"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/alexandremagno.net\/en\/wp-json\/wp\/v2\/categories?post=549"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/alexandremagno.net\/en\/wp-json\/wp\/v2\/tags?post=549"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}