Support Center

Slider

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.

Slider

Step 2: HTML Markup

Paste the following sample markup in the HTML Module > HTML Tab.

Slider 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>
                    <li><img alt="Image_1" src="https://demo.mandeeps.com/portals/19/Skins/Dixit/PortalTemplate/img/slider/slide1f.jpg"></li>
                    <li><img alt="Image_2" src="https://demo.mandeeps.com/portals/19/Skins/Dixit/PortalTemplate/img/slider/slide1f.jpg"></li>
                    <li><img alt="Image_3" src="https://demo.mandeeps.com/portals/19/Skins/Dixit/PortalTemplate/img/slider/slide1f.jpg"></li>
                </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

Slider 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.

Glad we could be helpful. Thanks for the feedback.

Sorry we couldn't be helpful. Your feedback will help us improve this article.

How helpful was this page?

  
Updated on Tue, 05 Dec 2017 by Khushi Singh

In this section