{"id":1194,"date":"2014-06-09T14:15:09","date_gmt":"2014-06-09T14:15:09","guid":{"rendered":"http:\/\/www.gopiplus.com\/extensions\/?p=1194"},"modified":"2021-09-18T15:12:03","modified_gmt":"2021-09-18T15:12:03","slug":"tiny-carousel-slider-joomla-module","status":"publish","type":"post","link":"http:\/\/www.gopiplus.com\/extensions\/2014\/06\/tiny-carousel-slider-joomla-module\/","title":{"rendered":"Tiny Carousel Slider Joomla module"},"content":{"rendered":"\n<p>This is jQuery based <strong>image horizontal slider<\/strong> Joomla module, it is using a <strong>Tiny Carousel<\/strong> light-weight jQuery script in the slideshow. It was designed to be a dynamic lightweight utility that gives web designers a powerful way of enhancing a website&#8217;s user interface. At both the end of the slider we have a navigation link to move the slider.<\/p>\n\n\n<div class=\"ads-row\">\n\t<div class=\"ads-column1\">\n\t\t<script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script>\n\t\t<!-- Joomla Page Center 1 - 336x280 -->\n\t\t<ins class=\"adsbygoogle\"\n\t\t\t style=\"display:inline-block;width:336px;height:280px\"\n\t\t\t data-ad-client=\"ca-pub-6676019656533652\"\n\t\t\t data-ad-slot=\"6090998934\"><\/ins>\n\t\t<script>\n\t\t(adsbygoogle = window.adsbygoogle || []).push({});\n\t\t<\/script>\n\t<\/div>\n\t<div class=\"ads-column2\">\n\t\t<script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script>\n\t\t<!-- Joomla Page Center 2 - 336x280 -->\n\t\t<ins class=\"adsbygoogle\"\n\t\t\t style=\"display:inline-block;width:336px;height:280px\"\n\t\t\t data-ad-client=\"ca-pub-6676019656533652\"\n\t\t\t data-ad-slot=\"7338131803\"><\/ins>\n\t\t<script>\n\t\t(adsbygoogle = window.adsbygoogle || []).push({});\n\t\t<\/script>\n\t<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Module features<\/h2>\n\n\n\n<ul class=\"wp-block-list\"><li>Easy to customize.<\/li><li>Support all browser.<\/li><li>Automatically pauses on mouse over.<\/li><li>Supports navigation by button.<\/li><li>Option to set a interval for automatic slide.<\/li><li>Supports localization.<\/li><li>Responsive option.<\/li><\/ul>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>Module <strong>live demo<\/strong> available in the page. You may also be Interested in <a href=\"http:\/\/www.gopiplus.com\/extensions\/2011\/07\/horizontal-scrolling-slideshow-joomla-module\/\">Horizontal scrolling slideshow<\/a> Joomla module.<\/p><\/blockquote>\n\n\n<div class=\"livedemo1\">\n<h2>Live Demo<\/h2>\n<script type='text\/javascript' src='http:\/\/www.gopiplus.com\/extensions\/my-plugin\/demo\/jquery.tinycarousel.min.js'><\/script>\n<style type='text\/css' media='screen'>\n#tchsp { height: 100%; margin: 30px 0 0; overflow:hidden; position: relative; padding: 0 50px 10px;   }\n#tchsp .viewport { height: 167px; overflow: hidden; position: relative; }\n#tchsp .buttons { background: #CCCCCC; border-radius: 35px; display: block; position: absolute;\ntop: 20%; left: 0; width: 35px; height: 35px; color: #fff; font-weight: bold; text-align: center; line-height: 35px; text-decoration: none;\nfont-size: 22px; }\n#tchsp .next { right: 0; left: auto;top: 20%; }\n#tchsp .buttons:hover{ color: #C01313;background: #fff; }\n#tchsp .disable { visibility: hidden; }\n#tchsp .overview { list-style: none; position: absolute; padding: 0; margin: 0; width: 250px; left: 0 top: 0; }\n#tchsp .overview li{ float: left; margin: 0 20px 0 0; padding: 1px; height: 200px; border: 1px solid #dcdcdc; width: 250px;}\n#tchsp ul { max-width:none; }\n<\/style>\n<div id=\"tchsp\">\n\t<a class=\"buttons prev\" href=\"#\">&lt;<\/a>\n\t<div class=\"viewport\">\n\t\t<ul class=\"overview\" style=\"width:100%;\">\n\t\t\t<li><img decoding=\"async\" src=\"http:\/\/www.gopiplus.com\/work\/wp-content\/uploads\/pluginimages\/250x167\/250x167_1.jpg\" alt=\"\" \/><\/li>\n\t\t\t<li><img decoding=\"async\" src=\"http:\/\/www.gopiplus.com\/work\/wp-content\/uploads\/pluginimages\/250x167\/250x167_2.jpg\" alt=\"\" \/><\/li>\n\t\t\t<li><img decoding=\"async\" src=\"http:\/\/www.gopiplus.com\/work\/wp-content\/uploads\/pluginimages\/250x167\/250x167_3.jpg\" alt=\"\" \/><\/li>\n\t\t\t<li><img decoding=\"async\" src=\"http:\/\/www.gopiplus.com\/work\/wp-content\/uploads\/pluginimages\/250x167\/250x167_4.jpg\" alt=\"\" \/><\/li>\n\t\t\t<li><img decoding=\"async\" src=\"http:\/\/www.gopiplus.com\/work\/wp-content\/uploads\/pluginimages\/250x167\/250x167_5.jpg\" alt=\"\" \/><\/li>\n\t\t\t<li><img decoding=\"async\" src=\"http:\/\/www.gopiplus.com\/work\/wp-content\/uploads\/pluginimages\/250x167\/250x167_6.jpg\" alt=\"\" \/><\/li>\n\t\t\t<li><img decoding=\"async\" src=\"http:\/\/www.gopiplus.com\/work\/wp-content\/uploads\/pluginimages\/250x167\/250x167_1.jpg\" alt=\"\" \/><\/li>\n\t\t\t<li><img decoding=\"async\" src=\"http:\/\/www.gopiplus.com\/work\/wp-content\/uploads\/pluginimages\/250x167\/250x167_2.jpg\" alt=\"\" \/><\/li>\n\t\t\t<li><img decoding=\"async\" src=\"http:\/\/www.gopiplus.com\/work\/wp-content\/uploads\/pluginimages\/250x167\/250x167_3.jpg\" alt=\"\" \/><\/li>\n\t\t<\/ul>\n\t<\/div>\n\t<a class=\"buttons next\" href=\"#\">&gt;<\/a>\n<\/div>\n<script type=\"text\/javascript\">\njQuery(document).ready(function(){\n\tjQuery('#tchsp').tinycarousel({ \n\t\tbuttons: true, \n\t\tinterval: true, \n\t\tintervalTime: 4000, \n\t\tanimationTime: 1000 \n\t});\n});\n<\/script>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Installation instruction<\/h2>\n\n\n\n<p>1. Download a <strong>Tiny Carousel Slider<\/strong> Joomla module from the <a href=\"http:\/\/www.gopiplus.com\/extensions\/download\/\">download<\/a> location. Select the correct ZIP file depends on your Joomla version.<\/p>\n\n\n\n<p>2. Login into the administrator section of your Joomla site.<\/p>\n\n\n\n<p>3. In the menu, Go to <strong>System<\/strong>, <strong>Install <\/strong>and then click the <strong>Extensions<\/strong> menu.<\/p>\n\n\n\n<p>4. Click <strong>Browse<\/strong> and select the module you downloaded, then click <strong>Upload &amp; Install<\/strong> button.<\/p>\n\n\n\n<p>5. When your Joomla module has been uploaded and installed successfully, you will see a confirmation message.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Admin screen for Joomla 3.6<\/h2>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/www.gopiplus.com\/extensions\/my-plugin\/screens\/joomla\/common\/joomla_3.6_menu_extensions_module.png\" alt=\"Joomla menu for extensions module\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Admin screen for Joomla 4.0<\/h2>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/www.gopiplus.com\/extensions\/my-plugin\/screens\/joomla\/common\/joomla_4.2_menu_extensions_module.png\" alt=\"Joomla menu for extensions module\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Creating a new module instance<\/h2>\n\n\n\n<p>In your Joomla admin go to the <strong>Site Modules<\/strong> (<strong>System<\/strong>, <strong>Manage<\/strong> in your admin menu). You should see the module <strong>Tiny Carousel<\/strong> listed among the others. Simply click on the module name to open the module editor.<\/p>\n\n\n\n<p>If you cannot find an instance of your new module, click the new button. The new module should be listed among the types available, select <strong>Tiny Carousel<\/strong> which will create a new instance.<\/p>\n\n\n<div class=\"ads-row\">\n\t<div class=\"ads-column0\">\n\t\t<script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script>\n\t\t<!-- Joomla Page Center 3 -->\n\t\t<ins class=\"adsbygoogle\"\n\t\t\t style=\"display:inline-block;width:336px;height:280px\"\n\t\t\t data-ad-client=\"ca-pub-6676019656533652\"\n\t\t\t data-ad-slot=\"4975101454\"><\/ins>\n\t\t<script>\n\t\t(adsbygoogle = window.adsbygoogle || []).push({});\n\t\t<\/script>\n\t<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Module configuration<\/h2>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/www.gopiplus.com\/extensions\/my-plugin\/screens\/joomla\/mod_tiny_carousel\/mod_tiny_carousel.png\" alt=\"Tiny Carousel Slider Joomla module\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Module parameters<\/h2>\n\n\n\n<p>Add jQuery: If your theme already has a jQuery script, select NO to add jQuery.<br>Image Folder : Path to the image folder relative to the site URL (e.g. modules\/mod_tiny_carousel\/images).<br>Width (px) : Enter the width of the slideshow. (e.g 100)<br>Height (px): Enter the height of the slideshow. (e.g 75)<br>Auto interval: Want to add an auto interval to move one image from another?<br>Interval time: Enter auto interval time in milliseconds. (Ex: 1500)<br>Animation: Enter animation duration in milliseconds. (Ex: 1000)<br>Random display: Do you want to display images in random order?<br>Arrow color: Enter color code for Left, Right arrow.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Plugin official page<\/h2>\n\n\n\n<p><a href=\"http:\/\/www.gopiplus.com\/extensions\/2014\/06\/tiny-carousel-slider-joomla-module\/\">http:\/\/www.gopiplus.com\/extensions\/2014\/06\/tiny-carousel-slider-joomla-module\/<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Download link<\/h2>\n\n\n\n<p><a href=\"http:\/\/www.gopiplus.com\/extensions\/download\/\">http:\/\/www.gopiplus.com\/extensions\/download\/<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Video tutorial<\/h2>\n\n\n\n<p><a href=\"http:\/\/www.gopiplus.com\/extensions\/2014\/06\/tiny-carousel-slider-joomla-module-video-tutorial\/\">http:\/\/www.gopiplus.com\/extensions\/2014\/06\/tiny-carousel-slider-joomla-module-video-tutorial\/<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Joomla page<\/h2>\n\n\n\n<p><a href=\"https:\/\/extensions.joomla.org\/extension\/tiny-carousel-slider\/\">https:\/\/extensions.joomla.org\/extension\/tiny-carousel-slider\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>This is Jquery based image horizontal slider Joomla module, it is using Tiny Carousel light weight jquery script to the slideshow. It was designed to be a dynamic lightweight utility that gives web designers a powerful way of enhancing a websites user interface.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[37,7,8,43,55],"class_list":["post-1194","post","type-post","status-publish","format-standard","hentry","category-joomla-plugin","tag-carousel","tag-joomla","tag-module","tag-slider","tag-tiny"],"amp_enabled":true,"_links":{"self":[{"href":"http:\/\/www.gopiplus.com\/extensions\/wp-json\/wp\/v2\/posts\/1194","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.gopiplus.com\/extensions\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.gopiplus.com\/extensions\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.gopiplus.com\/extensions\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.gopiplus.com\/extensions\/wp-json\/wp\/v2\/comments?post=1194"}],"version-history":[{"count":0,"href":"http:\/\/www.gopiplus.com\/extensions\/wp-json\/wp\/v2\/posts\/1194\/revisions"}],"wp:attachment":[{"href":"http:\/\/www.gopiplus.com\/extensions\/wp-json\/wp\/v2\/media?parent=1194"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.gopiplus.com\/extensions\/wp-json\/wp\/v2\/categories?post=1194"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.gopiplus.com\/extensions\/wp-json\/wp\/v2\/tags?post=1194"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}