{"id":1746,"date":"2010-11-15T10:24:58","date_gmt":"2010-11-15T10:24:58","guid":{"rendered":"http:\/\/mts-help.nick.php.dev\/after_sale_support\/jquery\/slider\/article6.html"},"modified":"2020-01-29T09:43:52","modified_gmt":"2020-01-29T14:43:52","slug":"looped-slider","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/looped-slider.html","title":{"rendered":"Looped Slider"},"content":{"rendered":"This is a Slider Script that could be used both for creating sliders and galleries. It is one of the most flexible slider scripts. <p> <a href=\"http:\/\/github.com\/nathansearles\/loopedSlider\" class=\"link3\">http:\/\/github.com\/nathansearles\/loopedSlider<\/a> <\/p> <p> <strong>JavaScript<\/strong> <br \/>In order to make the script work, the <strong>index-#.html<\/strong> file with a slider should contain these lines of HTML code in order to include <strong>loopedslider.js<\/strong> script and jQuery framework:<\/p> <p>The <strong>&lt;head&gt;<\/strong> section of the <strong>index-#.html<\/strong> file contains these lines of code that initialize the script functionality with basic values:<\/p> <p>This script is initialized with a <strong>&lt;div&gt;<\/strong> element with <strong>#loopedSlider<\/strong> id.<\/p> <p> <strong>HTML<\/strong> <br \/>Below you can see the HTML script representation:<\/p> <p>&nbsp;The whole slider is placed to a <strong>&lt;div&gt;<\/strong> tag with <strong>#loopedSlider<\/strong> id. Then there two container <strong>&lt;div&gt;<\/strong> tags: main container (<strong>.container<\/strong> class) and pagination container (<strong>.pagination-container<\/strong> class). A <strong>&lt;div&gt;<\/strong> tag with <strong>.slides<\/strong> class is placed into the main container and contains slider (or gallery) elements. So in order to add an extra slide (or gallery image) you will need to add the following coding structure:<\/p> <p>Bulleted list (<strong>&lt;ul&gt;<\/strong> tag) with the <strong>.pagination<\/strong> class defines pagination output for the slider (or a gallery). <br \/>For <strong>loopedSlider version 0.5.4<\/strong> and lower you have to add correspondent number of anchors (<strong>&lt;a&gt;<\/strong> tags), each slider should have a correspondent anchor. <br \/>For <strong>loopedSlider version 0.5.5<\/strong> and newer the plug-in will add necessary scripting automatically.<\/p> <p> <strong>CSS<\/strong> <br \/>You can find script related stylesheet in the main <strong>style.css<\/strong> file. You will need to modify the following styles: <br \/><\/p> <p>Make sure to set the same width value for <strong>.container<\/strong> and <strong>.slides div<\/strong> styles.<\/p>","protected":false},"excerpt":{"rendered":"<p>This is a Slider Script that could be used both for creating sliders and galleries. It is one of the most flexible slider scripts. http:\/\/github.com\/nathansearles\/loopedSlider JavaScript In order to make the script work, the index-#.html file with a slider should contain these lines of HTML code in order to include loopedslider.js script and jQuery framework: [&hellip;]<\/p>\n","protected":false},"author":13,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[262],"tags":[813,816],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/1746"}],"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\/13"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=1746"}],"version-history":[{"count":5,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/1746\/revisions"}],"predecessor-version":[{"id":85871,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/1746\/revisions\/85871"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=1746"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=1746"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=1746"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}