{"id":1750,"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\/article2.html"},"modified":"2020-01-30T05:11:07","modified_gmt":"2020-01-30T10:11:07","slug":"jquery-slider","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/jquery-slider.html","title":{"rendered":"jQuery UI Slider"},"content":{"rendered":"This is a Slider Script that uses jQueryui ui<\/strong>.

JavaScript<\/strong>
The carousel.js<\/strong> file contains these lines of code that make the slider work:<\/p>

Here script attributes define the following values:
\u2022  #featured<\/strong> – the id of script container (the id of a tag container <div><\/strong>);
\u2022  {fx:{opacity: “toggle”}<\/strong> – this attribute defines the effect for changing the slides; currently it is set for changing opacity;
\u2022  5000<\/strong> – slides changing rate.<\/p>

HTML
<\/strong> HTML is formed of two logical blocks: thumbnails block (.ui-tabs-nav class) and content blocks corresponding to the current thumbnail (all the <div><\/strong> tags with a .ui-tabs-panel<\/strong> class). Both of these blocks are part of a <div><\/strong> tag by #featured<\/strong> id.
Each item in the list of thumbnails (<li><\/strong> tag) gets #nav-fragment-#<\/strong> id, where #<\/strong> is the number of the slide. The correspondent content boxes get #fragment-#<\/strong> id.
Below you can see the HTML script representation:<\/p>

To replace the slides with the custom ones you will need to replace the images placed to <div><\/strong> tags with the .ui-tabs-panel<\/strong> class.
To replace thumbnails with the custom ones you will need to replace the images that are within the list <li><\/strong> tags with the .ui-tabs-nav<\/strong> class.<\/p>

CSS<\/strong>
You can find script related stylesheet in the main style.css<\/strong> file. You will need to modify the following styles:<\/p>","protected":false},"excerpt":{"rendered":"

This is a Slider Script that uses jQueryui ui. JavaScript The carousel.js file contains these lines of code that make the slider work: Here script attributes define the following values: \u2022  #featured – the id of script container (the id of a tag container <div>); \u2022  {fx:{opacity: “toggle”} – this attribute defines the effect for […]<\/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\/1750"}],"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=1750"}],"version-history":[{"count":3,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/1750\/revisions"}],"predecessor-version":[{"id":85922,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/1750\/revisions\/85922"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=1750"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=1750"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=1750"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}