Imageslider on DNN
October 16 2022
Design by:
Ole Vester
If you need a imageslider on DNN, you can ingegrate bxSlider with just a few steps without coding in 3 simple steps
Add the following to the "page header tags" on the page where you wish to use the slider
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
Add a HTML module to your page and add the following to the header section under advanced settings on your module
<script>
$(document).ready(function(){
$('.slider').bxSlider({
mode: 'fade',
auto: true,
autoControls: false,
pause: 6000,
pager: false
});
});
</script>
Add the following to the content of your HTML module, replace the marked text with the link to your images
<div class="slider">
<div><img alt="" src="
/portals/0/Images/image1.png" title="" /></div>
<div><img alt="" src="/
portals/0/Images/image2.png" title="" /></div>
<div><img alt="" src="/
portals/0/Images/....." title="" /></div>
</div>
You can add as many lines as you wish inside the <div class="slider"> depending of the number of images you wish to cycle
You can refer to the bxSlider optionlist for possible options to your slider, and see examples of use om the bxSlider homepage