Nice looking image slider module by DnnZone. It is not just another slider but a slider with support for touch devices. This slider recognizes the Swipe Touch event – so this can be use on modern touch devices including: iPhone, iPad and Android Devices.
Its a nice looking image slider module by DnnZone. It is not just another slider but it is a slider with support for touch devices. This slider recognizes the Swipe Touch event – so this can be use on modern touch devices including:
- iPhone
- iPad
- Android Devices
Simple horizontal slide transition is supported with easing effects.
This module is built using HTML, CSS and Java-script only. No Flash is used.
This blog post will describe the simple steps on how to use Swipe to Slide module in DotNetNuke portals.
Step-1: Install Module
Once you have downloaded Swipe to Slide, you can install it in your portal by logging in as Host and going to Host -> Module Definitions -> Install Module. If you are not familiar with DotNetNuke module installation, please read following articles:
Step-2: Add Module to a Page
Once the module is installed, it will be available in the Module drop-down. You can add this module (DZ_SwipeToSlide) to your desired pane.
Step-3: Module Settings
After adding the module, you can go to module settings page and scroll to bottom section “Swipe to Slide Settings”. This section contains settings specific to this module. See following screen for setting details.
You can customize the settings for this module, including:
- Dimensions
- Width
- Height
- Alignment
- Left
- Center
- Right
- Auto Play
- Auto Play Duration
- Pause on Hover
- Show Next/Previous
- Show on Hover
- Show on Last Sider
- Bullets Position
- Top
- Bottom
- Transition Speed
- Easing Effect
- Randomize Items
Step-4: Manage Images
Now you are ready to add images to the slider. You can click the “Manage Items (Pencil Icon)” link on the newly added module. This will show you image listing, you can upload images. You can specify title, background color for hover effect and the URL. See following screens for reference.
Step-5: Slider View
You are all set – now you can go back to the page where you added the module and now you can see the Swipe to Slide in action.
Leave a Reply