DotNetNuke Module: Swipe to Slide

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.

View Live Demo

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:

• How to Install a Module in DotNetNuke 5
• Forum: How to Install a Module in DotNetNuke 5
• Video: Installing DotNetNuke Modules

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.

Module Settings

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.

Manage Items

Add New Image

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.

Swipe to Slide - Nice Slider with support for iPhone, iPad & Android

Advertisements