Slider is very important feature for a web site nowadays, it’s call the must have feature for a web site. Banner tab slider is a very easy less configuration and faster slider that increase your web site beauty and feature simultaneously.
Features
- Easy to install and configuration.
- Fully admin controll to change and edit slider element.
- Multiple slider in same pages with multiple style.
- Responsive layout adapt to tablet, mobile etc.
- Category base slider.
- Open Source
Frontend Url:
Admin Demo Url:
user:admin
Password:admin#123
How does it works
After log in in Magento admin panel we will find menu Tabslider in the top menu.
There are tow different menu items under Tabslider “Manage tab slider category” and “Manage tab slider”.
To create slider, at first we will need to create slider category. When we will click on “Tabslider -> Manage tab slider category”, we will see these screen.
If there any existing category it will shows in list. To add new category click to “Add item” button and then we will see a form like these screen and we must fill-up these fields with this format.
Description of these fields:
- Title: This field is use to set the name of category which shows in slider category list in admin panel.
- Number of slider to active: This field is use to set that, how many sliders are show in this category.
- Slider interval(s): This field is use to set the time that, how many seconds it will wait to go to next slide. This time count in seconds.
- Slider width in website: This field is use to set slider size for desktop mood. This width is count in ”%”, like screen shot.
- Slider width in tab/ipad: This field is use to set slider size for tab or ipad. This width is count in ”%”, like screen shot.
- Slider width in mobile: This field is use to set slider size for smart phone. This width is count in ”%”, like screen shot.
- Tab content width: This field is use to set value that take each slider content width. This width is count in ”%”, like screen shot.
- Status: This field is use to set that sliders of this category will be “enable” or “disable”. Make it enable to display in web site.
To save this category click to “Save item” button. Also we can reset fields by click to “Reset” button, or back from that form to category list by click to “Back” button.
To edit existing category click to “edit” button from the list from right site. Then we will see a form like previous screen shot. From this form we can edit an existing category. Editing process same like add new precess but we can delete this category by click to “Delete item” button.
To create a slider we need to click to “Tabslider -> Manage tab slider” form top menu to create new or edit existing slider. When we will click to “Tabslider -> Manage tab slider”, we will see these screen.
If there has existing sliders thats will shows in list. To add new slider click to “add item” button and then we will see a form like these screen and we must fill-up these fields with this format.
Description of these fields:
- Category: This drop down is use to select slider category that already created by “slider category management”. We can select any one category from here. If our category is not created we have to create category first. To create slider category we need to see instruction from first.
- Title: This field is use to set slider name or title that show with slider in web site and show in admin panel list.
- Content: This field is use to set slider description that show with slider in web site.
- URL: This field is use to set URL. When we click to sliders image or title it will redirect to given link. We can use ”#” if we don’t want to use any link.
- Slider image: This option is use to select image which we want to use in slider. All image must use same height and same width (pixel ratio).
- Status: This field is use to make this slide enable or disable by selecting an option. Select “enable” to display this slider with the selected category.
To save this slider click to “Save item” button or click to “Reset” button to reset the form or click “Back” button to go back to slider list.
To edit existing slider click to “edit” button from the list from right site. Then we will see a form like this screen shot. From this form we can edit an existing slide.
Editing process same like add new precess but here direct click to “Brows” button to select a new image or check to “Delete image” to delete existing image and we can both, we can delete this slide by click to “Delete item” button.
How to display slider in frontend
Two way to show slider .one in Cms page and other in your template file
Two show in Cms page we will add the code in our Cms page .
{{block type=”tabslider/tabslider” slider_id=”1” name=”tabslider” template=”tabslider/tabslider.phtml”}}
To show in Template file we will use this following code
<?php
$sliderid = 1;
echo Mage::app()->getLayout()->createBlock('tabslider/tabslider')->setSlider_id($sliderid)->setTemplate('tabslider/tabslider.phtml')->toHtml(); ?>
Where do we find the slider_id? we will find the slider id in here
After complete these step slider will slide automatically with users given “Slider interval(s)” time. And visitor can sliding manually by hovering mouse pointer on slide title bottom of slider.
Download Banner Tab Slider (Magento Extensions)
