Thank you for purchasing, you are awesome!!
Super Carousel Responsive Wordpress Plugin
SuperCarousel documentation version 3.0
Table of Content
Super Carousel allows user to create a carousel or slider in some easy steps. It has its own custom post type to manage images and content. Also supports Category, Tag, Posts and Custom post types. This means a content carousel or image carousel or slider can be easily created from posts, category, tags and any registered custom post type.
This carousel is fully responsive having different settings for different resolutions. For example you might need to display only one image in mobile devices, two in tabs and five in desktops. All this can be managed in a simple and creative way using this carousel.
It’s even easier to put images of different height together so the width is dynamic with fixed height so that your site looks pretty.
Getting Started #back to top
Super Carousel WordPress plugin allows user to create Image carousel, Content carousel, Post carousel, YouTube carousel, Feeds carousel and Flickr carousel with few easy steps.
All type of Super Carousels comes with two modes, those are Visual Mode and Expert Mode.
Visual Mode: This provides quick interface to choose carousel elements, applying CSS, applying events with only few clicks.
Expert Mode: This is for the expert people who love to write own code. It gives the freedom of writing custom HTML and CSS with element short codes extending the usability to a new level.
How to Install WordPress #back to top
Please read more about WordPress here. WordPress Installation.
WordPress is well-known for its ease of installation. Under most circumstances, installing WordPress is a very simple process and takes less than five minutes to complete. Many web hosts now offer tools (e.g. Fantastico) to automatically install WordPress for you.
How to Install Super Carousel #back to top
Upload via WordPress Admin
1. Unzip the downloaded package from Codecanyon.
2. Zip the Supercarousel directory
3. Login to WordPress Admin
4. Navigate to Plugins => Add New
5. Click of Upload Plugin button
6. Upload the Zipped Supercarousel directory
7. Activate the plugin
How to Create Image Carousel? #back to top
Super Image Carousel enables user to create a Carousel with custom set of images from media library.
For this you need to create set of custom images first.
To create the custom set of images, please follow below steps.
1. Navigate to Super Carousel => Images => Add New
2. Name the Image Carousel for your reference.
Click on “Add Images” button. Upload and Select the set of images.
Selected image thumbnails will be displayed below the button. Click on cross button to delete.
3. You can drag-drop the images to re-order
Click on “Expand” button to enter image specific addition details like Caption, Light box URL and Link URL.
Once you are done, click on “Save” button and your set of images are ready now.
Now to proceed further towards creating the Super Image Carousel, please follow the below steps.
1. Navigate to Super Carousel => Super Carousel
2. Select the newly created Super Image Set from “Super Image” drop down box.
3. Double click on the required elements in left side of Elements box to select. And the element will be added to the right side and will be displayed in the Preview.
4. Click on the right side elements to set their properties. As you click on the element, the list of available properties will be displayed in the Properties box.
5. Properties are available for normal and hover state. Select the desired properties. Enter property name in transition box to apply CSS3 hover effects. To apply hover for all properties, enter “all” in the transition field.
6. Configure the Carousel and Save. The Super Image Carousel is now ready to serve. Put the short code anywhere needed.
How to Create Content Carousel? #back to top
Super Content Carousel enables user to create a Carousel with custom HTML content.
For this you need to create set of custom content first.
To create the custom set of content, please follow below steps.
1. Navigate to Super Carousel => Content => Add New
2. Name the Content Carousel for your reference.
Create desired number of content set and categorize those.
Once you are done, click on “Save” button and your set of contentis ready now.
Now to proceed further towards creating the Super Content Carousel, please follow the below steps.
1. Navigate to Super Carousel => Super Carousel. Click on “Content” Tab.
2. Select the newly created Super Content Categoryfrom “Super Content” drop down box.
3. Double click on the required elements in left side of Elements box to select. And the element will be added to the right side and will be displayed in the Preview.
4. Click on the right side elements to set their properties. As you click on the element, the list of available properties will be displayed in the Properties box.
5. Properties are available for normal and hover state. Select the desired properties. Enter property name in transition box to apply CSS3 hover effects. To apply hover for all properties, enter “all” in the transition field.
6. Configure the Carousel and Save. The Super Content Carousel is now ready to serve. Put the short code anywhere needed.
How to Create Post Carousel? #back to top
Super Post Carousel enables user to create carousel from posts, taxonomies, custom posts and custom taxonomies.
To create Super Post Carousel, please follow below steps.
1. Navigate to Super Carousel => Super Carousel. Click on “Post” Tab.
2. Type slowly the name of desired post type, taxonomy, title, custom post type, custom taxonomy in “Filter By” text box to auto complete.
3. Select the Order By and Limit.
4. Double click on the required elements in left side of Elements box to select. And the element will be added to the right side and will be displayed in the Preview.
5. Click on the right side elements to set their properties. As you click on the element, the list of available properties will be displayed in the Properties box.
6. Properties are available for normal and hover state. Select the desired properties. Enter property name in transition box to apply CSS3 hover effects. To apply hover for all properties, enter “all” in the transition field.
7. Configure the Carousel and Save. The Super Post Carousel is now ready to serve. Put the short code anywhere needed.
How to Create YouTube Carousel? #back to top
Super YouTube Carousel enables user to create carousel from YouTube Playlist.
To create Super YouTube Carousel, please follow below steps.
1. Navigate to Super Carousel => Super Carousel. Click on “YouTube” Tab.
2. Enter the YouTube Playlist URL in the “YouTube Playlist URL” text box.
3. Enter the YouTube API Key and Limit in the respective text box. If you are wondering where to get the API key, please Click Here
4. To check the validity of the YouTube Playlist URL and API Key, please click on “Text API and URL” link.
5. Double click on the required elements in left side of Elements box to select. And the element will be added to the right side and will be displayed in the Preview.
6. Click on the right side elements to set their properties. As you click on the element, the list of available properties will be displayed in the Properties box.
7. Properties are available for normal and hover state. Select the desired properties. Enter property name in transition box to apply CSS3 hover effects. To apply hover for all properties, enter “all” in the transition field.
8. Configure the Carousel and Save. The Super YouTube Carousel is now ready to serve. Put the short code anywhere needed.
How to Create Feeds Carousel? #back to top
Super Feeds Carousel enables user to create carousel from most of the RSS Feeds. It may not pull images if the images are is custom tag or format.
To create Super Feeds Carousel, please follow below steps.
1. Navigate to Super Carousel => Super Carousel. Click on “Feeds” Tab.
2. Enter the Feed URL in the “Feed URL” text box.
3. Set the Limit and Order By.
4. If you believe the feed featured image in a custom tag, please enter the tag name in “Custom Image Tag” text box.
5. Double click on the required elements in left side of Elements box to select. And the element will be added to the right side and will be displayed in the Preview.
6. Click on the right side elements to set their properties. As you click on the element, the list of available properties will be displayed in the Properties box.
7. Properties are available for normal and hover state. Select the desired properties. Enter property name in transition box to apply CSS3 hover effects. To apply hover for all properties, enter “all” in the transition field.
8. Configure the Carousel and Save. The Super Feeds Carousel is now ready to serve. Put the short code anywhere needed.
How to Create Flickr Carousel? #back to top
Super Flickr Carousel enables user to create carousel from Flickr Album or Group.
To create Super Flickr Carousel, please follow below steps.
1. Navigate to Super Carousel => Super Carousel. Click on “Flickr” Tab.
2. Enter the FlickrAlbum or Group URL in the “Flickr Album / Group URL” text box.
3. Enter the Flickr API Key and Limit in the respective text box. If you are wondering where to get the API key, please Click Here
4. To check the validity of the Flickr Album / Group URL and API Key, please click on “Text API and URL” link.
5. Double click on the required elements in left side of Elements box to select. And the element will be added to the right side and will be displayed in the Preview.
6. Click on the right side elements to set their properties. As you click on the element, the list of available properties will be displayed in the Properties box.
7. Properties are available for normal and hover state. Select the desired properties. Enter property name in transition box to apply CSS3 hover effects. To apply hover for all properties, enter “all” in the transition field.
8. Configure the Carousel and Save. The Super Feeds Carousel is now ready to serve. Put the short code anywhere needed.
Super Carousel Templates #back to top
Each visual mode has carousel type specific template options inside the Preview box.
This enables the user to save the carousel type elements and applied CSS as a specific template, so that can be used later in any other carousel.
To create a Super Carousel Template, follow the below steps.
1. Select some carousel elements
2. Enter the Template Name, then click on “Save” button inside the preview box
The saved template name will be listed under the “Load Template” drop down box inside the preview box.
Now to use the created templates in any other carousel, follow the below steps.
1. Create a new carousel
2. Select the Carousel Type tab
3. Select the template name under “Load Template” select box inside preview box
4. Click on “Load” button inside the preview box
Same elements will be loaded with applied CSS in the Preview box.
The saved templates can also be exported and imported to JSON file. Please refer the Import / Export Section.
Expert Mode #back to top
Expert mode enables user to enter custom HTML and CSS. This mode is available for all the Super Carousel types.
To enable expert mode, click on “Expert Mode” button.
The HTML box is Carousel type specific and the CSS box is global for all types of Carousels
You can enter desired HTML and relevant CSS in the boxes. The available variables are mentioned below the box.
Caution: If you are using fix height carousel, it must have one image tag with "super_image" class.eg. <img src="{image_large}" class="super_image" />
Actions in Expert Mode
We understand developer’s needs. Super Carousel comes with four actions.
Action “SuperCarousel_Before” And “SuperCarousel_After”
These actions are called before and after all the carousels.
Both the actions are callable by below code.
add_action(‘SuperCarousel_Before’, ‘example_methodname’);
add_action(‘SuperCarousel_After’, ‘example_methodname’);
function example_methodname($carouselId=0) {
//Do your stuff
}
If you need this for specific carousel, append the Carousel Id after the action.
add_action(‘SuperCarousel_Before_[ID]’, ‘example_methodname’);add_action(‘SuperCarousel_After_[ID]’, ‘example_methodname’);
function example_methodname() {
//Do your stuff
}
Filters in Expert Mode
We always try to give the most out of we can. Super Carousel has some handy filters.
To filter pre-defined variables, use below code.
add_filter(‘SuperCarousel_[type]_[variable]’, ‘example_methodname’, 10, 2);
Possible values of “type” are “Image”, “Content”, “Post”, “YouTube”, “Feeds” and “Flickr”.
Example
add_filter(‘SuperCarousel_Image_title’, ‘example_methodname’, 10, 2);
function example_methodname($data=[]) {
//Do your stuff
return $data[‘caption’];
}
To filter specific carrousel and write custom code, use below filter
add_filter(‘SuperCarousel_[ID]’, ‘example_methodname’, 10, 2);
function example_methodname($type, $data=[]) {
//Do your stuff
return $html;
}
To apply filter to carousels, use below code.
add_filter(‘SuperCarousel’, ‘example_methodname’, 10, 3);
function example_methodname($carouselId, $type, $data=[]) {
//Do your stuff
return $html;
}
To apply custom filter, use below code in HTML box.
{customkey|applyfilter:[filtername]}
Use below code in your child theme functions.php
add_filter(‘filtername’, ‘example_methodname’, 10, 3);
function example_methodname($data=[]) {
//Do your stuff
return [filteredvalue];
}
Available String Filters
Common filters for all types of carousel are uppercase, lowercase, ucwords, ucfirst, urlencode, urldecode, trim, ltrim, rtrim, stringlimit:0, dateformat:’Y-m-d’.
How to Configure Super Carousel? #back to top
This carousel comes with most configurable options
Responsive
When we say responsive, we believe to have most control over different devices.
That’s why we have categorized the responsiveness into four major types, those are Desktops having width more than 1200px, Laptops having width more than 992px, Tablets having width more than 768px and Mobiles having width less than 768px.
In each category we have again three options, those are Visible, Fix Width and Fix Height.
Due to responsive nature and to maintain the aspect ratio only one option can be set for each category.
When Visible is set, it will display number of visible items at time regardless of the device width and image height for each device category.
When Item Width is set, it will set the each slide width regardless of the device width and image height for each device category.
When Item Height is set, it will set the each slide height regardless of the device width and image width for each device category.
Animation
Direction: This defines the Auto Play or Auto scroll direction.
Effect: This defines the transition type
Easing: This defines the easing function to be used in the transition.
Easing Time: This defines the transition duration in milliseconds.
Steps: This defines the number of items to be scrolled in one go. Enter “0” to scroll full width of display area.
Automatic
Auto Play: This defines whether to start playing automatically or not.
Pause Time: This defines the halt time in milliseconds after each successfully transition during Auto Play.
Pause Over: This defines whether to stop Auto Play on mouse over or not. This resumes Auto Play after mouse out.
Auto Scroll: This defines whether to scroll continuously in a certain speed towards the Animation Direction.
Scroll Speed: This defines the scrolling speed during Auto Scroll.
Auto Height: This defines whether to adjust the carousel height by the visible item’s height after each successful transition.
Randomize: This defines whether to sort the carousel items in random order.
Slide Gap: This defines the distance in pixels between each item.
Hidden Carousel: This defines whether the carousel is being used inside hidden elements. Useful when the carousel is used in side hidden tabs.
Navigation
Next / Prev: This defines whether to display Next / Previous Arrows.
Arrow Style: This defines the visual style of the Next / Previous Arrows.
Arrows Outside: This defines whether to display the arrows outside of the carousel, so the arrows do not overlap on carousel items.
Circular: This defines whether to make the carousel navigation circular, so that first item is appeared after the last item next transition.
Mouse Wheel: This defines whether to navigate to Next / Previous on mouse scroll.
Touch Swipe: This defines whether to enable touch swipe left / right feature, so it makes easy navigation in touch enabled devices.
Keyboard: This defines whether to navigate on release of keyboard numeric and arrow keys.
Pagination: This defines whether to display navigation dots below the carousel.
Miscellaneous
Wrapper Class: This defines the class name to be applied to the carousel wrapper element.
Super Carousel Widget #back to top
The widget name is “Super Carousel Widget”.
This widget enables user to use the carousel in widget enabled areas like sidebars, footers.
Title: This defines the title of the widget.
Text Before: This defines the prepend text.
Carousel: This enables the user to select a carousel from the list of carousels.
Text After: This defines the append text.
Super Twitter Widget #back to top
The widget name is “Super Twitter Widget”.
This widget enables user to display tweets of a user in carousel format.
Title: This defines the title of the widget.
Number of Tweets: This defines the number of tweets to be fetched.
Pause Time: This defines the halt time in milliseconds after each successful transition.
Twitter Screen Name: This defines the feeds of the user to be fetched. To get the Twitter Screen Name, login to your twitter account and navigate to https://twitter.com/settings/account URL. Copy the Username.
Consumer Key: This defines the consumer key of the twitter account API. To get the Consumer Key, navigate to https://dev.twitter.com and Click on Create new APP or Navigate to https://apps.twitter.com/app/new. After you create the App and click on the App. Go to API Keys Tab and grab the API Key
Secret Key: This defines the secret key of the twitter account API. To get the Secret Key, navigate to https://dev.twitter.com and Click on Create new APP or Navigate to https://apps.twitter.com/app/new. After you create the App and click on the App. Go to API Keys Tab and grab the API Secret Key.
How to Import / Export? #back to top
Import
Navigate to Tools => Import. Click on WordPress “Install Now”.
After installation, click on “Run Importer”. Click on Browse button to select the file to import and click on “Upload file and Import”.
To import the Super Carousel Templates, navigate to Tools => Import and click on “Run Importer”. Click on browse button to select the file to import and click on “Upload file and Import”.
Export
Navigate to Tools => Export. Select the desired option from “Super Carousel”, “Super Content”, “Super Image” or “Super Carousel Templates”. Click on “Download Export File”
Credits #back to top
Special thanks to
- https://wordpress.org/
- https://jquery.com/
- https://gsgd.co.uk/sandbox/jquery/easing/
- https://github.com/brandonaaron/mousewheel-data-collector
- https://github.com/SodhanaLibrary/feedify
- https://github.com/darcyclarke/Watch.js
- https://codemirror.net/
- https://leocaseiro.com.br/jquery-plugin-string-to-slug/
- https://github.com/bgrins/spectrum
Version History (Changelog) #back to top
Once again, thank you so much for purchasing this plugin. As I said at the beginning, I'd be glad to help you if you have any questions relating to this plugin. No guarantees, but I'll do my best to assist. If you have a more general question relating to the plugin on Codecanyon, you might consider visiting the forums and asking your question in the "Item Discussion" section.
Changelog
-----------------------------------------------------------------------------------------
07-06-2021 – jQuery Easing Issue fixed, Circular carousel improved, Additional post types added to support Team and Testimonial Carousel.
24-12-2020 – No carousel found option
29-10-2020 – Filters bug fixed
26-10-2020 – Admin icons improved
10-09-2020 – Custom responsive issue fixed
20-07-2020 – Admin icons, lightbox icons and lightbox bug fixed.
08-05-2020 – RSS feed carousel image bug fixed and YouTube, Feeds and Flickr carousel SSL bug fixed
06-11-2019 – Post date and date format Bug fixed.
26-09-2019 – Lightbox icons improved.
19-09-2019 – Bug fixed and improvements, dynamic css removed, icons updated, lightbox image issue fixed.
19-06-2019 – Feed carousel filters added.
09-05-2019 – YouTube video bug fixed.
15-04-2019 – Bug fixed and improvements.
27-02-2019 – Content carousel issue fixed and Filters added.
22-02-2019 – Fatal Error and Warnings fixed.
03-11-2018 – Image carousel and lightbox issue fixed.
31-07-2018 – Image carousel additional title field and lightbox issue fixed.
04-07-2018 – Auto update feature and bug fixed.
10-01-2018 – HTTPS and Google Fonts issue resolved.
25-11-2017 – Auto play improved and filters added to manipulate carousel data.
02-10-2017 – Admin JS issue fixed.
27-09-2017 – Image Carousel single quote issue and merged JS issue fixed.
12-07-2017 – Content carousel order by features added and bug fixed.
25-06-2017 – Post carousel, “P” tag bug fixed and post featured image filter added.
16-06-2017 – Carousel admin revamped and added more features. The carousels need to be recreated in the new version
15-05-2017 – Content carousel bug fixed and improved.
03-12-2016 – Slide Thumbnail sizes improved.
12-09-2016 – SuperWidget bug fixed.
04-08-2016 – Twitter OAuth Fatal error issue fixed.
20-07-2016 – Lightbox a tag CSS issue fixed.
12-07-2016 – session_start and session_status issue fixed.
08-07-2016 – Bug fixed, lightbox caption added
14-06-2016 – Lightbox Caption Added
03-06-2016 – Fix height carousel bug fixed
21-04-2016 – Autoscroll bug fixed
19-04-2016 – Bug fixed, improved and Post carousel sorting feature implemented
16-04-2016 – Bug fixed, improved and Post limit added
04-02-2016 – JS and CSS request optimized
26-12-2015 – Touch swipe feature improved and custom template featured implemented
28-10-2015 – admin.js issue fixed
22-10-2015 – autoHeight bug fixed
03-09-2015 – Image size option, caption mouse over and image slide mouse over option added
16-06-2015 – prettyPhoto jQuery plugin removed
04-06-2015 – Bugs fixed and Image carousel / lightbox improved
28-01-2015 – Bugs fixed and Image carousel improved
11-12-2014 – Bugs fixed, blog and team template option added
26-11-2014 – Bugs fixed and Content carousel improved. Featured image and Permalink options added
08-10-2014 – Bugs fixed
28-07-2014 – Chrome Bug fixed
03-07-2014 – Bugs fixed and Document Updated
15-05-2014 – Bugs fixed
05-05-2014 – Bugs fixed
23-04-2014 – Continuous scroll option added
21-04-2014 – Bugs fixed and Super Twitter Widget included
18-12-2013 – Create carousel using Post Ids or Page Ids, Category, Tag And 8 new style of arrows added
18-12-2013 – Compatible with WordPress Version 3.8
12-04-2013 – Compatibility with PHP 5.2
30-04-2013 – Bugs fixed
06-05-2013 – Google Chrome Link Bugs fixed
12-05-2013 – Working in JS ‘Tabs’ now
22-07-2013 – Bug fixed
-----------------------------------------------------------------------------------------