DIXIT uses Slider Revolution – A premium jQuery plugin by ThemePunch. Everything you need to use the slider is included in the DIXIT skin.Step by step instructions and video tutorial is provided below.
There are basically 3 steps to a working slider:
- HTML Module / Container
- HTML Markup
- JavaScript Code
Step 1: HTML Module / Container
Start by adding a new HTML Module on the page and change its container to “Dixit – Slider”. The container adds the necessary JavaScript and CSS Stylesheets that are required for Slider to function.
Step 2: HTML Markup
Paste the following sample markup in the HTML Module > HTML Tab.
Use the following sample markup for FULL WIDTH SLIDER
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
< p ></ p >
< p > </ p >
< div class = "module_revolution_slider first-module" >
< div class = "rs-fullscreen" >
< div class = "fullwidthbanner-container" >
< div class = "fullwidthbanner" >
< ul >
</ ul >
</ div >
</ div >
</ div >
</ div >
< p ></ p >
|
Note: Remember to change the path for the sample images (Image1.jpg). Refer to Slides for more information on how to add/remove or customize individual slides.
Step 3: JavaScript Code
DNN’s default and many 3rd party HTML Text Editor’s remove any JavaScript code from the HTML content. Therefore, we cannot paste our sample JavaScript code in the HTML Editor directly – instead, we will add it to the footer of the module.
From Settings > Advanced Settings > Footer
Use the following sample JavaScript for FULL WIDTH SLIDER
<script type="text/javascript">
$('.rs-fullscreen').css('margin-left', -1 * ($(window).width() - $('.container').width()) / 2 + 'px').width($(window).width());
$('.fullwidthbanner').revolution({delay: 3000, fullWidth:"on"});
</script>
Use the following sample JavaScript for FIXED WIDTH SLIDER
<script type="text/javascript">
$('.fullwidthbanner').revolution({ delay: 3000, startwidth: 1170, startheight: 275, fullWidth: "off" });
</script>
Note: Remember to update the startwidth:1170 and startheight:275 to your desired fixed layout and delay:3000 to the time between slide changes in milliseconds. Many more options are available to customize the slider.