Image Slider is a DotNetNuke module that can be used to show a very nice looking slide show with unique effects. You can upload images from Module edit section and specify the order of display. Optional caption and URL can also be specified for each slide.
This blog post will describe the simple steps on how to use DNN Image Slider module in DotNetNuke portals.
Step-1: Install DNN Image Slider
Once you have downloaded DNN Image Slider, 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 DNN Image Slider to a Page
Once the module is installed, it will be available in the Module drop-down. You can add DNN Image Slider (DNN_ImageSlider) to your desired pane.
Step-3: DNN Image Slider Settings
After adding the DNN Image Slider, you can go to module settings page and scroll to bottom section “DNN_ImageSlider Settings”. This section contains settings specific to this module. See following screen for setting details.
Following table describes the available settings.
|Effect||Specify the transition effect, possible values are:
|Delay between images||Delay between images in ms.|
|Show Navigation||Show Prev, Next and Navigation buttons.|
|Randomize Images||Select this check-box, if you want a random image order on each page load.|
|Slider Dimensions||Specify the width and height for the slider.|
|Container HTML||You can write your custom HTML. It can serve as wrapper around the slider.
Use [DNN_IMAGE_SLIDER] in a place where you want to show the actual slider.
Step-4: Manage Images
Now you are ready to add images to the slider. You can click the “Add Content (Pencil Icon)” link on the newly added module. This will show you image listing, you can upload images. You can specify order of display for images in this section. See following screens for reference.
Step-5: DNN Image Slider View
You are all set – now you can go back to the page where you added DNN_ImageSlider and now you can see the slider in action.
Possible Issues and Quick Resolution:
Slider not working:
Make sure jQuery 1.4.x or later is available in your DNN portal. If you are not sure, turn on the check-box “Include jQuery” from module setting page.