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.
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?
Tiago
I am using Orchard, can you tell me where do I need to create the folder ?
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
Hi,
Where do I paste the code? In HTML mode in the BODY part?
Hi,
I am using Orchard. Where do I paste the code? In HTML mode in the BODY part?
Hi Marc.
Please open the module/widget where you want the slideshow to appear and paste the code in the html view.
Can I control the timing on the slide show? It is a bit fast for our taste.
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/
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?
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.
HI, this does not work in SharePoint Foundation 2013. Using theme - Flexo. Followed all the steps but nothing is displaying.
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.