Rotating slideshow #1

This custom widget does not apply to all themes. Check your theme's description first, to make sure it's included.

To add this slideshow banner, two actions have to be taken: paste some images on a folder and add some code to the desired page. Directions vary slightly depending on your CMS platform.

SharePoint

  • An easy way to place images is to create the folder /Style Library/slideshow on the root site. Add your slideshow images there (e.g. banner.1.jpg, banner.2.jpg, banner.3.jpg)
  • Then create an external file (e.g. /Style Library/slideshow/slideshow.txt) that contains the code below, and then use the "link" field in a Content Editor Web Part to link the code from the file instead of pasting it directly on the browser, so that changes to the code don't require editing the page.

DotNetNuke

  • 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

<style>
#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">
  <li>
    <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>
    </div>
    <img src="/{PlaceCorrectPath}/banner.1.jpg"/>
  </li>
</ul>
</div>

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

Comments

  • 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

    Tiago 

    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

    orchardmedia.jpg

    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

    orchardmedia2.jpg

  • Avatar
    Marc

    Hi,

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

  • Avatar
    Marc

    Hi,

    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 ($) {

            $('#slides').slides({

                preload: true,

                play: 5000,

                pause: 2500,

                hoverPause: true

            });

        })(jQuery);

    </script>

    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 http://slidesjs.com/

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

Got a question?

If you can't find the answer to your question, you can contact us.
We are here and happy to help.

Powered by Zendesk