Rotating slideshow - Other CMSs #1



  • Go to your File Manager section and create a slideshow images folder. Add your slideshow images there (e.g. banner.1.jpg, banner.2.jpg, banner.3.jpg)
  • Add an HTML module to the desired page. Edit content and paste the code below, replacing the Title, Description, Destination URL and Image Link as necessary. Add one <li> item per slide.

Other CMSs

  • For other CMS the precedure is quite the same. We need to create a folder/container and place a couple of images there.
  • For each existing image, we need to create a new <li> item and edit its fields, such as title, description, image URL and destination link.
  • In Orchard the editor removes the <style></style> tags, but since the necessary styles are shipped within the main CSS file, this isn't a problem.

The Code

#slides ul.slides_container { width:900px; }
#slides ul.slides_container li { width:900px; height:300px; }
#slides ul.slides_container li .info { width:300px; } </style>

<div id="slides" class="widget widget-slides">
<ul class="slides_container">
    <div class="info">
      <h2>Slide title</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi convallis, enim sit amet interdum eleifend.</p>
      <a href="#">Read more</a>
    <img src="/{PlaceCorrectPath}/banner.1.jpg"/>

If you need the banner to have no space at the bottom, remove class widget.

In  DNN, also check that "Display Container?" is not selected.

Important note:

The rotating banner must have at least 2 slides, otherwise no content is displayed.

Have more questions? Submit a request


  • Avatar
    Serkan KONAK

    Hi. Create a style library slideshow.txt code entered here. I entered the path of the web portion of the content of this file. But the slider did not come. Theme "INVENT". Slider How can I run?

  • Avatar
    Alberto Acosta


    I am using Orchard, can you tell me where do I need to create the folder ?

  • Avatar
    Tiago Duarte

    Hi Alberto.

    The folder can be created anywhere you want.

    You can either create a folder in the themes folder (C:\inetpub\wwwroot\Orchard_v1400_5924\Themes\YourThemeName\slideshow)

    and reference it as src="@Href("~/Themes/YourThemeName/slideshow/image01.png")"


    or use the media library


    if you add a folder and then add an image to it, you can click the image and see the html code with the source link


  • Avatar


    Where do I paste the code? In HTML mode in the BODY part?

  • Avatar


    I am using Orchard. Where do I paste the code? In HTML mode in the BODY part?

  • Avatar
    Tiago Duarte

    Hi Marc.

    Please open the module/widget where you want the slideshow to appear and paste the code in the html view.

  • Avatar
    Kathryn Giorgianni

    Can I control the timing on the slide show?  It is a bit fast for our taste.

  • Avatar
    Joao Ferreira

    Hi Kathryn,


    If you open the master page file (SharePoint designer,  _catalogs\masterpage\Empower.master), you'll find this block of code:

    <script src="/\_layouts/1033/JS/WeProPackage/slides.min.jquery.js"></script>

    <script type="text/javascript">

        (function ($) {


                preload: true,

                play: 5000,

                pause: 2500,

                hoverPause: true




    If you want it slower, you should increase the play variable.

    If you want to slow the transition between slides, you should increase the pause variable.

    For more information please visit

  • Avatar
    Chris Lacefield

    My slide show appears left justified on the page rather than centered. I'm using Kentico 6 and the Interface theme.  Any ideas why this would be happening?

  • Avatar
    Beatriz Oliveira

    Chris please send us a link to your site and we will provide help accordingly.

    Depending on the theme the slideshow area sometimes spans the entire screen. You may just need some extra markup.

  • Avatar
    WDTL Helpdesk

    HI, this does not work in SharePoint Foundation 2013. Using theme - Flexo. Followed all the steps but nothing is displaying.

  • Avatar
    Beatriz Oliveira

    Hi, yes it should be working in Foundation if you are using a theme that supports this slideshow (note that themes may include different slideshow/carousel scripts).

    Please also check if you have any jquery errors when loading the site.

BindTuning logo
Copyright Ⓒ 2021 Bind.
All rights reserved.
Privacy Policy
Cookie Policy
              Linkedin BindTuning Twitter BindTuning YouTube BindTuning Instagram BindTuning
Powered by Zendesk