{"id":304,"date":"2011-05-17T04:54:12","date_gmt":"2011-05-17T04:54:12","guid":{"rendered":"http:\/\/webkul.com\/blog\/?p=304"},"modified":"2011-05-17T05:35:08","modified_gmt":"2011-05-17T05:35:08","slug":"rotating-image-slider","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/rotating-image-slider\/","title":{"rendered":"Rotating Image Slider"},"content":{"rendered":"<p><strong><a title=\"Rotating Image Slider\" href=\"http:\/\/tympanus.net\/codrops\/2011\/04\/28\/rotating-image-slider\/\" target=\"_blank\">Image Slider with jQuery<\/a> : <\/strong>Their is an asymmetrical image slider with a little twist: when sliding the  pictures we will slightly rotate them and delay the sliding of each  element. The unusual shape of the slider is created by some elements  placement and the use of thick borders. We will also add an autoplay  option and the mousewheel functionality.<\/p>\n<p>The main idea for the slider functionality is to add another image  before the current one with a slightly increased rotation degree than  the current item. Then we will animate the rotation and make the new  images appear.<\/p>\n<p><strong>Demo<\/strong>: <a title=\"Rotating Image Slider\" href=\"http:\/\/tympanus.net\/Tutorials\/RotatingImageSlider\/\" target=\"_blank\">http:\/\/tympanus.net\/Tutorials\/RotatingImageSlider\/<\/a><\/p>\n<p><strong>Download:<\/strong> <a title=\"Rotating Image Slider\" href=\"http:\/\/tympanus.net\/codrops\/2011\/04\/28\/rotating-image-slider\/\" target=\"_blank\">http:\/\/tympanus.net\/codrops\/2011\/04\/28\/rotating-image-slider\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Image Slider with jQuery : Their is an asymmetrical image slider with a little twist: when sliding the pictures we will slightly rotate them and delay the sliding of each element. The unusual shape of the slider is created by some elements placement and the use of thick borders. We will also add an autoplay <a href=\"https:\/\/webkul.com\/blog\/rotating-image-slider\/\">[&#8230;]<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[79],"tags":[],"class_list":["post-304","post","type-post","status-publish","format-standard","hentry","category-jquery"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Rotating Image Slider - Webkul Blog<\/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:\/\/webkul.com\/blog\/rotating-image-slider\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Rotating Image Slider - Webkul Blog\" \/>\n<meta property=\"og:description\" content=\"Image Slider with jQuery : Their is an asymmetrical image slider with a little twist: when sliding the pictures we will slightly rotate them and delay the sliding of each element. The unusual shape of the slider is created by some elements placement and the use of thick borders. We will also add an autoplay [...]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webkul.com\/blog\/rotating-image-slider\/\" \/>\n<meta property=\"og:site_name\" content=\"Webkul Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webkul\/\" \/>\n<meta property=\"article:author\" content=\"http:\/\/facebook.com\/webkul\" \/>\n<meta property=\"article:published_time\" content=\"2011-05-17T04:54:12+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2011-05-17T05:35:08+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-og.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Vipin Sahu\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@https:\/\/twitter.com\/vipinsahu\" \/>\n<meta name=\"twitter:site\" content=\"@webkul\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Vipin Sahu\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/webkul.com\/blog\/rotating-image-slider\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/rotating-image-slider\/\"},\"author\":{\"name\":\"Vipin Sahu\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/8ed13bf168e6e8fe92fe499c470111f1\"},\"headline\":\"Rotating Image Slider\",\"datePublished\":\"2011-05-17T04:54:12+00:00\",\"dateModified\":\"2011-05-17T05:35:08+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/rotating-image-slider\/\"},\"wordCount\":112,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"articleSection\":[\"jQuery\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webkul.com\/blog\/rotating-image-slider\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webkul.com\/blog\/rotating-image-slider\/\",\"url\":\"https:\/\/webkul.com\/blog\/rotating-image-slider\/\",\"name\":\"Rotating Image Slider - Webkul Blog\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/#website\"},\"datePublished\":\"2011-05-17T04:54:12+00:00\",\"dateModified\":\"2011-05-17T05:35:08+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/webkul.com\/blog\/rotating-image-slider\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webkul.com\/blog\/rotating-image-slider\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webkul.com\/blog\/rotating-image-slider\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webkul.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Rotating Image Slider\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/webkul.com\/blog\/#website\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"name\":\"Webkul Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/webkul.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/webkul.com\/blog\/#organization\",\"name\":\"WebKul Software Private Limited\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"width\":380,\"height\":380,\"caption\":\"WebKul Software Private Limited\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webkul\/\",\"https:\/\/x.com\/webkul\",\"https:\/\/www.instagram.com\/webkul\/\",\"https:\/\/www.linkedin.com\/company\/webkul\",\"https:\/\/www.youtube.com\/user\/webkul\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/8ed13bf168e6e8fe92fe499c470111f1\",\"name\":\"Vipin Sahu\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/98597dd669d66735fc160e891e1207c749a444ebea1b172de18a92f1435045c0?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/98597dd669d66735fc160e891e1207c749a444ebea1b172de18a92f1435045c0?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"caption\":\"Vipin Sahu\"},\"description\":\"Executionist and Hardcore Planner to drive out best of the best. Want to boost up the E-Commerce industry with his concoct conception.\",\"sameAs\":[\"http:\/\/webkul.com\",\"http:\/\/facebook.com\/webkul\",\"https:\/\/x.com\/https:\/\/twitter.com\/vipinsahu\"],\"url\":\"https:\/\/webkul.com\/blog\/author\/admin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Rotating Image Slider - Webkul Blog","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:\/\/webkul.com\/blog\/rotating-image-slider\/","og_locale":"en_US","og_type":"article","og_title":"Rotating Image Slider - Webkul Blog","og_description":"Image Slider with jQuery : Their is an asymmetrical image slider with a little twist: when sliding the pictures we will slightly rotate them and delay the sliding of each element. The unusual shape of the slider is created by some elements placement and the use of thick borders. We will also add an autoplay [...]","og_url":"https:\/\/webkul.com\/blog\/rotating-image-slider\/","og_site_name":"Webkul Blog","article_publisher":"https:\/\/www.facebook.com\/webkul\/","article_author":"http:\/\/facebook.com\/webkul","article_published_time":"2011-05-17T04:54:12+00:00","article_modified_time":"2011-05-17T05:35:08+00:00","og_image":[{"width":1200,"height":630,"url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-og.png","type":"image\/png"}],"author":"Vipin Sahu","twitter_card":"summary_large_image","twitter_creator":"@https:\/\/twitter.com\/vipinsahu","twitter_site":"@webkul","twitter_misc":{"Written by":"Vipin Sahu","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webkul.com\/blog\/rotating-image-slider\/#article","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/rotating-image-slider\/"},"author":{"name":"Vipin Sahu","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/8ed13bf168e6e8fe92fe499c470111f1"},"headline":"Rotating Image Slider","datePublished":"2011-05-17T04:54:12+00:00","dateModified":"2011-05-17T05:35:08+00:00","mainEntityOfPage":{"@id":"https:\/\/webkul.com\/blog\/rotating-image-slider\/"},"wordCount":112,"commentCount":0,"publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"articleSection":["jQuery"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webkul.com\/blog\/rotating-image-slider\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webkul.com\/blog\/rotating-image-slider\/","url":"https:\/\/webkul.com\/blog\/rotating-image-slider\/","name":"Rotating Image Slider - Webkul Blog","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/#website"},"datePublished":"2011-05-17T04:54:12+00:00","dateModified":"2011-05-17T05:35:08+00:00","breadcrumb":{"@id":"https:\/\/webkul.com\/blog\/rotating-image-slider\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webkul.com\/blog\/rotating-image-slider\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/webkul.com\/blog\/rotating-image-slider\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webkul.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Rotating Image Slider"}]},{"@type":"WebSite","@id":"https:\/\/webkul.com\/blog\/#website","url":"https:\/\/webkul.com\/blog\/","name":"Webkul Blog","description":"","publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webkul.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webkul.com\/blog\/#organization","name":"WebKul Software Private Limited","url":"https:\/\/webkul.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","width":380,"height":380,"caption":"WebKul Software Private Limited"},"image":{"@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webkul\/","https:\/\/x.com\/webkul","https:\/\/www.instagram.com\/webkul\/","https:\/\/www.linkedin.com\/company\/webkul","https:\/\/www.youtube.com\/user\/webkul\/"]},{"@type":"Person","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/8ed13bf168e6e8fe92fe499c470111f1","name":"Vipin Sahu","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/98597dd669d66735fc160e891e1207c749a444ebea1b172de18a92f1435045c0?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/98597dd669d66735fc160e891e1207c749a444ebea1b172de18a92f1435045c0?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","caption":"Vipin Sahu"},"description":"Executionist and Hardcore Planner to drive out best of the best. Want to boost up the E-Commerce industry with his concoct conception.","sameAs":["http:\/\/webkul.com","http:\/\/facebook.com\/webkul","https:\/\/x.com\/https:\/\/twitter.com\/vipinsahu"],"url":"https:\/\/webkul.com\/blog\/author\/admin\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/304","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/comments?post=304"}],"version-history":[{"count":4,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/304\/revisions"}],"predecessor-version":[{"id":307,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/304\/revisions\/307"}],"wp:attachment":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media?parent=304"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/categories?post=304"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/tags?post=304"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}