{"id":65358,"date":"2016-02-29T05:48:25","date_gmt":"2016-02-29T10:48:25","guid":{"rendered":"http:\/\/www.templatemonster.com\/help\/?p=65358"},"modified":"2016-03-22T09:04:48","modified_gmt":"2016-03-22T13:04:48","slug":"js-animated-how-to-enable-carousel-loop","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/js-animated-how-to-enable-carousel-loop.html","title":{"rendered":"JS Animated. How to enable carousel loop"},"content":{"rendered":"<p>This video tutorial will show how to enable carousel loop in <strong>JS Animated templates.<\/strong><\/p>\r\n\r\n<a href=\"http:\/\/www.youtube.com\/watch?v=XQtp7E8WG-0?width=1280&amp;height=720\" rel=\"prettyPhoto\">JS Animated. How to enable carousel loop<\/a>\r\n\r\n<ol>\r\n\r\n  <li>\r\n  <p> Locate Carousel at your site:<\/p>\r\n<a href=\"\/help\/wp-content\/uploads\/2016\/02\/JS-Animated.-How-to-enable-carousel-loop-1.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2016\/02\/JS-Animated.-How-to-enable-carousel-loop-1-300x187.png\" alt=\"JS Animated. How to enable carousel loop - 1\" width=\"300\" height=\"187\" class=\"aligncenter size-medium wp-image-65359\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/02\/JS-Animated.-How-to-enable-carousel-loop-1-300x187.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/02\/JS-Animated.-How-to-enable-carousel-loop-1-150x94.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/02\/JS-Animated.-How-to-enable-carousel-loop-1-1024x639.png 1024w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/02\/JS-Animated.-How-to-enable-carousel-loop-1.png 1147w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\r\n  <\/li>  \r\n\r\n  <li>\r\n   <p> Inspect this Carousel using Firebug tool for Firefox or by using Chrome Inspector, you will see that owl carousel is used in this section: <\/p> \r\n<a href=\"\/help\/wp-content\/uploads\/2016\/02\/JS-Animated.-How-to-enable-carousel-loop-2.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2016\/02\/JS-Animated.-How-to-enable-carousel-loop-2-300x167.png\" alt=\"JS Animated. How to enable carousel loop - 2\" width=\"300\" height=\"167\" class=\"aligncenter size-medium wp-image-65360\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/02\/JS-Animated.-How-to-enable-carousel-loop-2-300x167.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/02\/JS-Animated.-How-to-enable-carousel-loop-2-150x84.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/02\/JS-Animated.-How-to-enable-carousel-loop-2-1024x571.png 1024w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/02\/JS-Animated.-How-to-enable-carousel-loop-2.png 1274w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\r\n  <\/li>\r\n\r\n <li>\r\n   <p> Use FTP or File Manager and open index.html file that controls page with carousel:<\/p> \r\n\r\n<a href=\"\/help\/wp-content\/uploads\/2016\/02\/JS-Animated.-How-to-enable-carousel-loop-3.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2016\/02\/JS-Animated.-How-to-enable-carousel-loop-3-300x183.png\" alt=\"JS Animated. How to enable carousel loop - 3\" width=\"300\" height=\"183\" class=\"aligncenter size-medium wp-image-65361\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/02\/JS-Animated.-How-to-enable-carousel-loop-3-300x183.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/02\/JS-Animated.-How-to-enable-carousel-loop-3-150x91.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/02\/JS-Animated.-How-to-enable-carousel-loop-3-1024x623.png 1024w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/02\/JS-Animated.-How-to-enable-carousel-loop-3.png 1050w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\r\n <\/li>\r\n\t\r\n  <li>\r\n   <p>In order to enable carousel loop, you should use data-loop data attribute true for target item with .owl-carousel class:<\/p>  \r\n\r\n<a href=\"\/help\/wp-content\/uploads\/2016\/02\/JS-Animated.-How-to-enable-carousel-loop-4.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2016\/02\/JS-Animated.-How-to-enable-carousel-loop-4-300x164.png\" alt=\"JS Animated. How to enable carousel loop - 4\" width=\"300\" height=\"164\" class=\"aligncenter size-medium wp-image-65362\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/02\/JS-Animated.-How-to-enable-carousel-loop-4-300x164.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/02\/JS-Animated.-How-to-enable-carousel-loop-4-150x82.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/02\/JS-Animated.-How-to-enable-carousel-loop-4-1024x561.png 1024w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/02\/JS-Animated.-How-to-enable-carousel-loop-4.png 1267w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\r\n <\/li>\r\n \r\n  <li>\r\n   <p>Go back to your site, make sure to refresh the page before checking carousel, you will see that now you can run carousel back and forward with no limitation:<\/p> \r\n\r\n<a href=\"\/help\/wp-content\/uploads\/2016\/02\/JS-Animated.-How-to-enable-carousel-loop-5.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2016\/02\/JS-Animated.-How-to-enable-carousel-loop-5-300x171.png\" alt=\"JS Animated. How to enable carousel loop - 5\" width=\"300\" height=\"171\" class=\"aligncenter size-medium wp-image-65363\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/02\/JS-Animated.-How-to-enable-carousel-loop-5-300x171.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/02\/JS-Animated.-How-to-enable-carousel-loop-5-150x86.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/02\/JS-Animated.-How-to-enable-carousel-loop-5-1024x584.png 1024w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/02\/JS-Animated.-How-to-enable-carousel-loop-5.png 1251w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\r\n<\/ol>\r\n\r\n\r\n<p>Feel free to check the detailed video tutorial below:<\/p>\r\n\r\n<a href=\"http:\/\/www.youtube.com\/watch?v=XQtp7E8WG-0?width=1280&amp;height=720\" rel=\"prettyPhoto\">JS Animated. How to enable carousel loop<\/a>","protected":false},"excerpt":{"rendered":"<p>This video tutorial will show how to enable carousel loop in JS Animated templates.<\/p>\n","protected":false},"author":73,"featured_media":65369,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[1016],"tags":[821,2411,873],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/65358"}],"collection":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/users\/73"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=65358"}],"version-history":[{"count":0,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/65358\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media\/65369"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=65358"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=65358"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=65358"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}