{"id":82,"date":"2012-12-27T20:19:08","date_gmt":"2012-12-27T20:19:08","guid":{"rendered":"http:\/\/tier7.net\/blog\/?p=82"},"modified":"2012-12-27T20:20:45","modified_gmt":"2012-12-27T20:20:45","slug":"simple-animated-content-slider-with-jquery","status":"publish","type":"post","link":"https:\/\/tier7.net\/blog\/2012\/12\/simple-animated-content-slider-with-jquery\/","title":{"rendered":"Simple Animated Content Slider with jQuery"},"content":{"rendered":"<p>Content sliders are fairly simple things to implement, as they can be built with using only a few basic pieces of html, css, and javascript ( if you are focusing development on css3, javascript is not needed at all ).<\/p>\n<p>These basic pieces can be broken down as such:<\/p>\n<h3>Html Content :<\/h3>\n<p>Design and code your content in blocks, set them to float:left; so they form a single line. Below I have created a div called #slideContent, this contains a bunch of divs with a set css width, and float:left properties. You really need to do nothing more than line your elements up single-file.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-83 aligncenter\" title=\"Content Slider Diagram 1\" src=\"http:\/\/tier7.net\/blog\/wp-content\/uploads\/2012\/12\/diagram-0.png\" alt=\"\" width=\"500\" height=\"200\" srcset=\"https:\/\/tier7.net\/blog\/wp-content\/uploads\/2012\/12\/diagram-0.png 500w, https:\/\/tier7.net\/blog\/wp-content\/uploads\/2012\/12\/diagram-0-300x120.png 300w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/p>\n<h3>CSS Masking :<\/h3>\n<p>Since we have everything in a nice single line, we can then wrap the #slideContent div in another div, which we will call #slideMask. For #slideMask, we will need to set the css to a fixed width, and set the overflow:hidden; property. This will enable our &#8220;masking&#8221;, and hide any child-elements that extend beyond the bounds of this container. Below is a diagram outlining how the #slideContent div will extend beyond the bounds of #slideMask (without overflow:hidden;).<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-85 aligncenter\" title=\"diagram-1\" src=\"http:\/\/tier7.net\/blog\/wp-content\/uploads\/2012\/12\/diagram-11.png\" alt=\"\" width=\"500\" height=\"200\" srcset=\"https:\/\/tier7.net\/blog\/wp-content\/uploads\/2012\/12\/diagram-11.png 500w, https:\/\/tier7.net\/blog\/wp-content\/uploads\/2012\/12\/diagram-11-300x120.png 300w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/p>\n<h3>Javascript :<\/h3>\n<p>Javascript\/jQuery has several important roles. First, it will set the width of #slideContent, which will need to be calculated if you do not explicitly set it in css. Second, it calculates how far to move the slider ( offset: x property ). Third, it handles &#8216;click&#8217; events and triggers the sliding animation. Below images show how the #slideContent div shifts when setting the left:-x; property with and without overflow:hidden; enabled.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-87 aligncenter\" title=\"diagram-2\" src=\"http:\/\/tier7.net\/blog\/wp-content\/uploads\/2012\/12\/diagram-21.png\" alt=\"\" width=\"500\" height=\"200\" srcset=\"https:\/\/tier7.net\/blog\/wp-content\/uploads\/2012\/12\/diagram-21.png 500w, https:\/\/tier7.net\/blog\/wp-content\/uploads\/2012\/12\/diagram-21-300x120.png 300w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-88 aligncenter\" style=\"clear: both;\" title=\"diagram-3\" src=\"http:\/\/tier7.net\/blog\/wp-content\/uploads\/2012\/12\/diagram-3.png\" alt=\"\" width=\"500\" height=\"200\" srcset=\"https:\/\/tier7.net\/blog\/wp-content\/uploads\/2012\/12\/diagram-3.png 500w, https:\/\/tier7.net\/blog\/wp-content\/uploads\/2012\/12\/diagram-3-300x120.png 300w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/p>\n<h2>Demo &amp; Code :<\/h2>\n<ul>\n<li><a title=\"View live demo on jsFiddle\" href=\"http:\/\/jsfiddle.net\/DVbu8\/\">View live demo on jsFiddle.net<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Content sliders are fairly simple things to implement, as they can be built with using only a few basic pieces of html, css, and javascript ( if you are focusing development on css3, javascript is not needed at all ). &hellip; <a href=\"https:\/\/tier7.net\/blog\/2012\/12\/simple-animated-content-slider-with-jquery\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1,3],"tags":[6,11,26,7,4,8],"class_list":["post-82","post","type-post","status-publish","format-standard","hentry","category-uncategorized","category-web-development","tag-css","tag-design","tag-html","tag-javascript","tag-jquery","tag-web-design"],"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/tier7.net\/blog\/wp-json\/wp\/v2\/posts\/82","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tier7.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tier7.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tier7.net\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tier7.net\/blog\/wp-json\/wp\/v2\/comments?post=82"}],"version-history":[{"count":21,"href":"https:\/\/tier7.net\/blog\/wp-json\/wp\/v2\/posts\/82\/revisions"}],"predecessor-version":[{"id":109,"href":"https:\/\/tier7.net\/blog\/wp-json\/wp\/v2\/posts\/82\/revisions\/109"}],"wp:attachment":[{"href":"https:\/\/tier7.net\/blog\/wp-json\/wp\/v2\/media?parent=82"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tier7.net\/blog\/wp-json\/wp\/v2\/categories?post=82"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tier7.net\/blog\/wp-json\/wp\/v2\/tags?post=82"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}