{"id":5187,"date":"2014-06-06T15:15:54","date_gmt":"2014-06-06T15:15:54","guid":{"rendered":"http:\/\/www.gopiplus.com\/work\/?p=5187"},"modified":"2021-09-01T15:46:40","modified_gmt":"2021-09-01T15:46:40","slug":"tiny-carousel-horizontal-slider-plus-wordpress-plugin","status":"publish","type":"post","link":"http:\/\/www.gopiplus.com\/work\/2014\/06\/06\/tiny-carousel-horizontal-slider-plus-wordpress-plugin\/","title":{"rendered":"Tiny Carousel Horizontal Slider Plus WordPress plugin"},"content":{"rendered":"\n<p>This is jQuery based image horizontal slider WordPress plugin, it is using a Tiny Carousel light-weight jQuery script to the slideshow. This is similar to my Tiny carousel horizontal slider plugin but it contains an option to add <strong>Link<\/strong>, <strong>Alt Text<\/strong> to the images. In the plugin admin section, you have options to add image URL, Link, Alt text.<\/p>\n\n\n\n<p>If you want to load the images directly from the image directory. Please use a minimal version of this plugin <a href=\"http:\/\/www.gopiplus.com\/work\/2012\/05\/26\/tiny-carousel-horizontal-slider-wordpress-plugin\/\">Tiny carousel horizontal slider<\/a>.<\/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<!-- Large Rectancle Center page -->\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=\"0362029595\"><\/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<!-- gopiplus.org Main -->\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=\"7521653079\"><\/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\">Plugin 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>Short code available for pages and posts.<\/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<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\">Plugin configuration<\/h2>\n\n\n\n<p><strong>Shortcode for posts and pages<\/strong><\/p>\n\n\n\n<p>Use the below shortcode in the pages and posts to render the slideshow.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&#091;tchsp id=\"1\"]<\/code><\/pre>\n\n\n\n<p><strong>Add directly in the theme<\/strong><\/p>\n\n\n\n<p>Add the below PHP code in your theme PHP file, for example, if you want to add this slider in your website footer, just activate the plugin and add this code in the footer.php file.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;?php tchsp($id = 1); ?><\/code><\/pre>\n\n\n\n<p>alternatively, you can use the <strong>do_shortcode <\/strong>option in WordPress.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>echo do_shortcode( '&#091;tchsp id=\"1\"]' );<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Gallery Options<\/h2>\n\n\n\n<p>Width: Enter your image width, You should add images in this width to this gallery. (Ex: 200)<br>Height: Enter your image height, You should add images in this height to this gallery. (Ex: 150)<br>Controls: Display left and right navigation buttons in the gallery?<br>Auto interval: Auto interval to move one image from another?<br>Interval time: Auto interval time in milliseconds. (Ex: 1500)<br>Animation: How fast must the animation move in milliseconds? (Ex: 1000)<br>Random display: Do you want to show images in random order?<\/p>\n\n\n<div class=\"ads-row\">\n\t<div class=\"ads-column0\">\n\t<script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script>\n\t<!-- Above Comment -->\n\t<ins class=\"adsbygoogle\"\n\t\t style=\"display:inline-block;width:336px;height:280px\"\n\t\t data-ad-client=\"ca-pub-6676019656533652\"\n\t\t data-ad-slot=\"2359628415\"><\/ins>\n\t<script>\n\t(adsbygoogle = window.adsbygoogle || []).push({});\n\t<\/script>\n\t<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Frequently asked questions<\/h2>\n\n\n\n<p><strong>Q) How to upload images to this plugin?<\/strong><\/p>\n\n\n\n<p>Login to your dashboard, In that you can find the menu <strong>Tiny Carousel<\/strong> Go to that menu and click the <strong>Image Details<\/strong> link to add your images.<\/p>\n\n\n\n<p><strong>Q) How to open the image click link in a separate window?<\/strong><\/p>\n\n\n\n<p>By default, it will open the image click link in a separate window. If you want to open the link in the same window, go to the image details menu in your admin and update the link target option.<\/p>\n\n\n\n<p><strong>Q) How to add this plugin to my website footer?<\/strong><\/p>\n\n\n\n<p>If you want to add this slider in your website footer, just activate the plugin and copy the given PHP code and add it to your theme footer.php file.<\/p>\n\n\n\n<p><strong>Q) How\/Where to set slider width?<\/strong><\/p>\n\n\n\n<p>Login to your dashboard and go to the Gallery Details menu to modify gallery Width and Height. Also using this page, you can add more galleries to your site.<\/p>\n\n\n\n<p><strong>Q) How to change the Left, Right arrow color?<\/strong><\/p>\n\n\n\n<p>At present we don&#8217;t have an admin option to change the color code (I will add this facility in the next release). Please follow the below steps to change the color code manually.<\/p>\n\n\n\n<p>1. Open this file from the plugin folder (classes\/tiny-carousel-loadwidget.php)<br>2. Go to line 56 (Or search <strong>#C01313<\/strong> color code in the file)<br>3. Change color code (#C01313) and save the file.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Admin page<\/h2>\n\n\n\n<p>In your WordPress administrator section go to <strong>the <\/strong>Tiny Carousel menu and select the <strong>Gallery Details<\/strong> menu to configure this plugin.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/www.gopiplus.com\/work\/my-plugin\/adminscreen\/tiny-carousel-horizontal-slider.png\" alt=\"Tiny Carousel Horizontal Slider Plus\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Plugin official page<\/h2>\n\n\n\n<p><a href=\"http:\/\/www.gopiplus.com\/work\/2014\/06\/06\/tiny-carousel-horizontal-slider-plus-wordpress-plugin\/\">http:\/\/www.gopiplus.com\/work\/2014\/06\/06\/tiny-carousel-horizontal-slider-plus-wordpress-plugin\/<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Download location<\/h2>\n\n\n\n<p><a href=\"http:\/\/www.gopiplus.com\/work\/wordpress-plugin-download\/\">http:\/\/www.gopiplus.com\/work\/wordpress-plugin-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\/work\/2014\/06\/07\/tiny-carousel-horizontal-slider-plus-wordpress-plugin-video-tutorial\/\">http:\/\/www.gopiplus.com\/work\/2014\/06\/07\/tiny-carousel-horizontal-slider-plus-wordpress-plugin-video-tutorial\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>This is Jquery based image horizontal slider wordpress plugin, it is using Tiny Carousel light weight jquery script to the slideshow. it contains option to add Link, Alt Text to the images. In the plugin admin, you have options to add image URL, Link, Alt text.<\/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":[90,185,6,172,5],"class_list":["post-5187","post","type-post","status-publish","format-standard","hentry","category-word-press-plug-in","tag-carousel","tag-jquery","tag-plugin","tag-slider","tag-wordpress"],"aioseo_notices":[],"_links":{"self":[{"href":"http:\/\/www.gopiplus.com\/work\/wp-json\/wp\/v2\/posts\/5187","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.gopiplus.com\/work\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.gopiplus.com\/work\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.gopiplus.com\/work\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.gopiplus.com\/work\/wp-json\/wp\/v2\/comments?post=5187"}],"version-history":[{"count":0,"href":"http:\/\/www.gopiplus.com\/work\/wp-json\/wp\/v2\/posts\/5187\/revisions"}],"wp:attachment":[{"href":"http:\/\/www.gopiplus.com\/work\/wp-json\/wp\/v2\/media?parent=5187"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.gopiplus.com\/work\/wp-json\/wp\/v2\/categories?post=5187"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.gopiplus.com\/work\/wp-json\/wp\/v2\/tags?post=5187"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}