{"id":6221,"date":"2017-11-18T13:08:01","date_gmt":"2017-11-18T13:08:01","guid":{"rendered":"http:\/\/www.gopiplus.com\/work\/?p=6221"},"modified":"2021-10-20T14:56:14","modified_gmt":"2021-10-20T14:56:14","slug":"owl-carousel-responsive-wordpress-plugin","status":"publish","type":"post","link":"https:\/\/www.gopiplus.com\/work\/2017\/11\/18\/owl-carousel-responsive-wordpress-plugin\/","title":{"rendered":"Owl carousel responsive WordPress plugin"},"content":{"rendered":"\n<p>This WordPress plugin is using <strong>Owl Carousel jQuery<\/strong> script and that lets you create a beautiful responsive carousel slider and its fully customizable carousel. You have an admin option to upload your images for the carousel. You can add your carousel to any post or footer of your website. It supports all major browsers and is responsive to all screen sizes.<\/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\">Features of this plugin<\/h2>\n\n\n\n<p>1. Free plugin.<br>2. It supports all major browsers.<br>3. Admin option to control carousel speed.<br>4. Option to set a number of images based on screen size.<br>5. Option to set auto Width\/Height alignment.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Owl carousel Installation instruction<\/h2>\n\n\n\n<p>First, download the plugin ZIP file responsive-owl-carousel.zip from the <a href=\"http:\/\/www.gopiplus.com\/work\/2017\/11\/19\/owl-carousel-responsive-download-link\/\">download<\/a> location.<\/p>\n\n\n\n<p>Next, sign in to your WordPress dashboard. Navigate to the Plugins menu. And click Add New menu to upload the downloaded ZIP file (responsive-owl-carousel.zip). Select the Upload Plugin button. Upload the available ZIP file and click Install Now button. Finally, click Activate plugin button to activate the plugin. Next, Go to the plugin admin page to change the default settings.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How to use<\/h2>\n\n\n\n<p>When you activate this plugin it will create one default gallery with 5 images. You can use that galley for your sample. Go to <strong>Create Gallery<\/strong> menu to add a new carousel gallery. Once you created the galley successfully go to <strong>Add Images<\/strong> menu to upload images to your gallery.<\/p>\n\n\n<script type='text\/javascript' src='http:\/\/www.gopiplus.com\/work\/wp-includes\/js\/jquery\/jquery.min.js?ver=3.6.0' id='jquery-core-js'><\/script>\n<div class=\"livedemo1\">\n\t<h2>Live demo<\/h2>\n\t<link rel='stylesheet' href='http:\/\/www.gopiplus.com\/work\/my-plugin\/demo\/owl-carousel-responsive\/owl.carousel.min.css' \/>\n\t<div class=\"owl-carousel owl-theme\">\n\t  <div class=\"item\"><img decoding=\"async\" src=\"http:\/\/www.gopiplus.com\/work\/wp-content\/uploads\/pluginimages\/250x167\/250x167_1.jpg\" \/><\/div>\n\t  <div class=\"item\"><img decoding=\"async\" src=\"http:\/\/www.gopiplus.com\/work\/wp-content\/uploads\/pluginimages\/250x167\/250x167_2.jpg\" \/><\/div>\n\t  <div class=\"item\"><img decoding=\"async\" src=\"http:\/\/www.gopiplus.com\/work\/wp-content\/uploads\/pluginimages\/250x167\/250x167_3.jpg\" \/><\/div>\n\t  <div class=\"item\"><img decoding=\"async\" src=\"http:\/\/www.gopiplus.com\/work\/wp-content\/uploads\/pluginimages\/250x167\/250x167_4.jpg\" \/><\/div>\n\t  <div class=\"item\"><img decoding=\"async\" src=\"http:\/\/www.gopiplus.com\/work\/wp-content\/uploads\/pluginimages\/250x167\/250x167_5.jpg\" \/><\/div>\n\t  <div class=\"item\"><img decoding=\"async\" src=\"http:\/\/www.gopiplus.com\/work\/wp-content\/uploads\/pluginimages\/250x167\/250x167_1.jpg\" \/><\/div>\n\t  <div class=\"item\"><img decoding=\"async\" src=\"http:\/\/www.gopiplus.com\/work\/wp-content\/uploads\/pluginimages\/250x167\/250x167_2.jpg\" \/><\/div>\n\t  <div class=\"item\"><img decoding=\"async\" src=\"http:\/\/www.gopiplus.com\/work\/wp-content\/uploads\/pluginimages\/250x167\/250x167_3.jpg\" \/><\/div>\n\t  <div class=\"item\"><img decoding=\"async\" src=\"http:\/\/www.gopiplus.com\/work\/wp-content\/uploads\/pluginimages\/250x167\/250x167_4.jpg\" \/><\/div>\n\t  <div class=\"item\"><img decoding=\"async\" src=\"http:\/\/www.gopiplus.com\/work\/wp-content\/uploads\/pluginimages\/250x167\/250x167_5.jpg\" \/><\/div>\n\t<\/div>\n\t<script>\n\tjQuery(document).ready(function() {\n\tjQuery('.owl-carousel').owlCarousel({\n\tloop: true,\n\tmargin: 30,\n\tresponsiveClass: true, \n\tautoplay: true, \n\tautoplayTimeout: 3000, \n\t\tresponsive: {\n\t\t\t0: { items: 1, nav: false, autoHeight: false, autoWidth: false },\n\t\t\t600: { items: 2, nav: false, autoHeight: false, autoWidth: false },\n\t\t\t800: { items: 3, nav: true, autoHeight: false, autoWidth: false },\n\t\t\t1000: { items: 4, nav: true, autoHeight: false, autoWidth: false }}\n\t\t})\n\t})\n\t<\/script>\n\t<script src=\"http:\/\/www.gopiplus.com\/work\/my-plugin\/demo\/owl-carousel-responsive\/owl.carousel.js\"><\/script>\n<\/div>\t\n\n\n\n\n<h2 class=\"wp-block-heading\">Short code for post<\/h2>\n\n\n\n<p>You can add your carousel into your WordPress post with the following shortcode. Go to Create Gallery menu to find a unique shortcode for your gallery.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&#091;owl-carousel-responsive id=\"1\"]<\/code><\/pre>\n\n\n\n<p>If you want to include this carousel in your custom theme, please look at the do_shortcode option in WordPress.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;?php echo do_shortcode( '&#091;owl-carousel-responsive id=\"1\"]' ); ?&gt;<\/code><\/pre>\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\">Create gallery admin page<\/h2>\n\n\n\n<p>In your WordPress administrator section go to the <strong>OWL carousel<\/strong> menu and select <strong>Create Gallery<\/strong> menu to add a new gallery to your plugin.<\/p>\n\n\n\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"http:\/\/www.gopiplus.com\/work\/my-plugin\/adminscreen\/owl-carousel-responsive-add-gallery.png\" alt=\"OWL carousel responsive add gallery\"><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Upload images admin page<\/h2>\n\n\n\n<p>In your WordPress administrator section go to the <strong>OWL carousel<\/strong> menu and select <strong>Add Images<\/strong> menu to upload new images to your gallery.<\/p>\n\n\n\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"http:\/\/www.gopiplus.com\/work\/my-plugin\/adminscreen\/owl-carousel-responsive-add-images.png\" alt=\"OWL carousel responsive add images\"><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Frequently Asked Questions<\/h2>\n\n\n\n<p><strong>1. How to upload images for this carousel?<\/strong><\/p>\n\n\n\n<p>Go to <strong>Add Images<\/strong> menu in the plugin admin, in this page we have the option to upload the images. Another menu Create Gallery is to create a carousel gallery.<\/p>\n\n\n\n<p><strong>2. How to enable\/disable the navigation button under this carousel?<\/strong><\/p>\n\n\n\n<p>On the gallery creation page, we have the option to enable\/disable the navigation button.<\/p>\n\n\n\n<p><strong>3. How to increase\/decrease the width between two images in this carousel?<\/strong><\/p>\n\n\n\n<p>On the gallery creation page, there is a text box available to enter width between images, the default width is 30px.<\/p>\n\n\n\n<p><strong>4. Do we have the option to change the number of images to show on the screen?<\/strong><\/p>\n\n\n\n<p>The image display count option is available on the gallery creation page. we have four types of screen options.<\/p>\n\n\n\n<p>The first option, Images (Screen size +1000px): The number of images you want to show on the screen size 1000px.<br>Second Option, Images (Screen size +800px): The number of images you want to show on the screen size 800px.<br>Third Option, Images (Screen size +600px): The number of images you want to show on the screen size 600px.<br>Last option, (Mobile screen): The number of images you want to show on the screen size -600px.<\/p>\n\n\n\n<p><strong>5. How to order images in a carousel gallery?<\/strong><\/p>\n\n\n\n<p>On the image upload page, we have a text box option to enter the image display order.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Download Link<\/h2>\n\n\n\n<p><a href=\"http:\/\/www.gopiplus.com\/work\/2017\/11\/19\/owl-carousel-responsive-download-link\/\">http:\/\/www.gopiplus.com\/work\/2017\/11\/19\/owl-carousel-responsive-download-link\/<\/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\/2017\/11\/19\/owl-carousel-responsive-video-tutorial\/\">http:\/\/www.gopiplus.com\/work\/2017\/11\/19\/owl-carousel-responsive-video-tutorial\/<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Official Page with Live Demo<\/h2>\n\n\n\n<p><a href=\"http:\/\/www.gopiplus.com\/work\/2017\/11\/18\/owl-carousel-responsive-wordpress-plugin\/\">http:\/\/www.gopiplus.com\/work\/2017\/11\/18\/owl-carousel-responsive-wordpress-plugin\/<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">WordPress Page<\/h2>\n\n\n\n<p><a href=\"https:\/\/wordpress.org\/plugins\/responsive-owl-carousel\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/wordpress.org\/plugins\/responsive-owl-carousel\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>This WordPress plugin is using Owl Carousel jQuery script and that lets you create a beautiful responsive carousel slider and its fully customizable carousel. You have admin option to upload your images for carousel. You can add your carousel into any post or footer of your website. It supports all major browsers and responsive to all screen size.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[90,185,6,172,5],"class_list":["post-6221","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":"https:\/\/www.gopiplus.com\/work\/wp-json\/wp\/v2\/posts\/6221","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.gopiplus.com\/work\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.gopiplus.com\/work\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.gopiplus.com\/work\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.gopiplus.com\/work\/wp-json\/wp\/v2\/comments?post=6221"}],"version-history":[{"count":0,"href":"https:\/\/www.gopiplus.com\/work\/wp-json\/wp\/v2\/posts\/6221\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.gopiplus.com\/work\/wp-json\/wp\/v2\/media?parent=6221"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gopiplus.com\/work\/wp-json\/wp\/v2\/categories?post=6221"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gopiplus.com\/work\/wp-json\/wp\/v2\/tags?post=6221"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}