Nivo Slider

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

 

To add the Nivo slider to one of your pages you will need to add some body HTML. This is ususally just a <div> with images. Note that only images or images wrapped in links are allowed in the slider div. Any other HTML will break the slider.

<div id="slider" class="nivoSlider">
  <img src="images/slide.1.jpg" alt="" />
  <a href="http://bindtuning.com"><img src="images/slide2.jpg" alt="" title="#htmlcaption" /></a>
  <img src="images/slide3.jpg" alt="" title="This is an example of a caption" />
  <img src="images/slide4.jpg" alt="" />
</div>

<div id="htmlcaption" class="nivo-html-caption">
  <h3>Any HTML can be used here</h3>
  <h6>Sample caption</h6>
</div>

Adjust values, image paths and texts as necessary.

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.

 

Furthermore, the Nivo Slider has plenty of options to fiddle with. Below is an example of the code with all available options and their defaults.
This code is located in your theme's .ascx files, at the bottom, and can be adjusted as needed. 

<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider({
effect: 'random', // Specify sets like: 'fold,fade,sliceDown'
slices: 15, // For slice animations
boxCols: 8, // For box animations
boxRows: 4, // For box animations
animSpeed: 500, // Slide transition speed
pauseTime: 3000, // How long each slide will show
startSlide: 0, // Set starting Slide (0 index)
directionNav: true, // Next & Prev navigation
directionNavHide: true, // Only show on hover
controlNav: true, // 1,2,3... navigation
controlNavThumbs: false, // Use thumbnails for Control Nav
controlNavThumbsFromRel: false, // Use image rel for thumbs
controlNavThumbsSearch: '.jpg', // Replace this with...
controlNavThumbsReplace: '_thumb.jpg', // ...this in thumb Image src
keyboardNav: true, // Use left & right arrows
pauseOnHover: true, // Stop animation while hovering
manualAdvance: false, // Force manual transitions
captionOpacity: 0.8, // Universal caption opacity
prevText: 'Prev', // Prev directionNav text
nextText: 'Next', // Next directionNav text
beforeChange: function(){}, // Triggers before a slide transition
afterChange: function(){}, // Triggers after a slide transition
slideshowEnd: function(){}, // Triggers after all slides have been shown
lastSlide: function(){}, // Triggers when last slide is shown
afterLoad: function(){} // Triggers when slider has loaded
});
}); </script>

The effect parameter can be any of the following:

  • sliceDown
  • sliceDownLeft
  • sliceUp
  • sliceUpLeft
  • sliceUpDown
  • sliceUpDownLeft
  • fold
  • fade
  • random
  • slideInRight
  • slideInLeft
  • boxRandom
  • boxRain
  • boxRainReverse
  • boxRainGrow
  • boxRainGrowReverse

More information on Nivo slider usage can be found at: http://nivo.dev7studios.com/support/jquery-plugin-usage/

Have more questions? Submit a request

Comments

  • Avatar
    ThemesSuck

    How do we edit the body? Sorry might be obvious to some.. but not sure how to do it, when I click Edit it jumps below that area.

  • Avatar
    Tiago Duarte

    Hi.

    You can user Content Editor Web parts or place holders.

    More info the various CMS platforms here (the slider code is different from Nivo):

    http://support.bind.pt/entries/20389208-rotating-slideshow-1

  • Avatar
    ThemesSuck

    Sorry I did mean the Nivo slider. Didnt realize you offered more than one. Any tips on adding the Nivo slider the same way as on the sample page?

  • Avatar
    Beatriz Oliveira

    Let us know which theme/cms you are using, and we can provide the exact code.

    Cheers.

  • Avatar
    ThemesSuck

    SampleKit 

    I'd like it to look exactly like the template sample on your site :)

  • Avatar
    Beatriz Oliveira

    For sample kit we used static images, and we are merely rotating them.

    This is SampleKit's source code:

    <style>

    .nivoSlider {

    width:100% !important; /* Change this to your images width, for fixed width */

    height:350px; /* Change this to your images height */

    }

    </style>

    <div id="slider" class="nivoSlider">

    <img src="demoimages/homebanner.1.gif" alt="" />

    <img src="demoimages/homebanner.2.gif" alt="" />

    <img src="demoimages/homebanner.3.gif" alt="" />

    </div>

  • Avatar
    Elvia

    I cant seem to get this to work. I also dont see the .ascx file in my themes folder. 

    I've tried putting the div in a widget and in the layout file but it's the same. 

    I'm also using the samplekit theme. 

  • Avatar
    Beatriz Oliveira

    Hi Elvia! Which CMS are you using? (DNN, Sharepoint, ...)

  • Avatar
    Elvia

    Hi Beatriz.

    I'm using Orchard CMS

  • Avatar
    Tiago Duarte

    Hi Elvia.

     

    You just need to copy and paste the above code.

    If the images don't appear right away, please consider the following:

    • You don't need the <style> area code, since Orchard removes it anyway

    • You should be editing an html widget. If you add the code to a regular text widget, the html won't render into sliding images

    • The image urls need to be either absolute (http://www.mysite.com/myfolder/image1.gif) or relative to the site (/myfolder/image1.gif), or the widget will not display any images

    • The ascx files you mentioned are for DotNetNuke cms only. You don't have to do any additional steps to get this working.

    So, considering the urls to the images are ok and you are using an html widget, all you have to do is click the "html" button to open up the html view, and add:

    <div id="slider" class="nivoSlider">

    <img src="demoimages/homebanner.1.gif" alt="" />

    <img src="demoimages/homebanner.2.gif" alt="" />

    <img src="demoimages/homebanner.3.gif" alt="" />

    </div>

  • Avatar
    Elvia

    Okay it's working now! Thanks! Where do i find the additional options? Cause right now the dots or the arrows dont show like they do in your slide sample

  • Avatar
    Tiago Duarte

    Info on all widgets here,

    http://support.bind.pt/forums/20237718-custom-widgets

     

    To configure the widget in Orchard, you can edit Layout.cshtml and Layout-HomePage.cshtml (for inner pages or just the home page), found on the Views folder of your theme (Themes[ThemeName])

  • Avatar
    Elvia

    The widget isnt the problem. We cant get the navigation to show up, or the circle buttons. 

  • Avatar
    Tiago Duarte

    Please replace your widgets.css file (\Themes\SampleKitTheme\Styles\css) by the one attached.

    It should fix the paths for the missing images.

  • Avatar
    Tabs08

    Hi!

    I'm using Flexo for Sharepoint. Where exactly do I add the script on the page so that the banner will appear directly in the 'banner area' right beneath the navigation menu?

    Also, is it the master page or the actual page?

    Thanks.

  • Avatar
    Joao Ferreira

    Hi,

    In the following link from our knowledge base you have some information about your questions.

    http://support.bind.pt/entries/20673663-how-do-i-use-the-available-content-place-holders-to-add-content

    For further information you can always open a ticket.

     

    Regards

  • Avatar
    dark cloud

    Hi i added the code provided in this section  but it only showed this one as a result: ( see the attached file )

    how can i include css styling and scripts to make it work?

  • Avatar
    Ana Sampaio

    Hi,

    Could you let us know which theme and cms are you using?

  • Avatar
    Warren Bergstrom

    So I've been attempting to setup the slider on my new site: buffsheep-entertainment.com, unfortunately nothing but failure. I have tried pasting the provided code (above) of course modified to use my images but I get horrible style issues. I have tried pasting the code into an html widget, and then in a page content sections html source; but neither have produced any working results. (the images replicate all over the screen in different places, please feel free to check it out). I did notice that after saving the code, it always removes the <style></style> code; Is there someplace else i should be placing the style code? Or all of it? Appreciate the help, thanks =)

  • Avatar
    Warren Bergstrom

    Note: I am using Orchard and the Flex-o theme.

  • Avatar
    Ana Sampaio

    Hi Warren,

     

    So I saw that your site is not available anymore. But this issue seems that the script of Nivo Slider wasn't working properly. 

    Since then we upgrade Flexo theme, and we support a new responsive slider widget now:  http://bindtuning.com/cms/orchard/orchard-1/theme/Flexo/page/Sliders/customize. I suggest you to go to your theme's page on bindtuning.com, upgrade it and then use this new slider which is cooler and easier to apply. On this link you can find the steps to apply it.

    But if you prefer using Nivo Slider no problem, just let us know and we can help you! :)

     

    Cheers.

  • Avatar
    Kayatao

    Hi,

    I am using umbraco 6.0.3 and the SampleKit theme.

    I use nivo slider as follow:

    In Template file:

    <asp:Content ContentPlaceHolderId="HomeBannerZone" runat="server">

    <!-- Insert "HomeBannerZone" markup here –>

    .nivoSlider {

    width:200px !important; /* Change this to your images width, for fixed width */

    height:200px !important; /* Change this to your images height */

    }

    <umbraco:Item field="homeBannerZone" runat="server" />

    /asp:Content

    And then paste the html code on content section using HTML button as follow:

    <div id="slider" class="nivoSlider">

    <img src="/media/nivo\_image/ImgA.jpg" />

    <img src="/media/nivo\_image/ImgB.jpg" alt="" title="Test test" />

    <img src="/media/nivo\_image/ImgC.jpg" alt="" />

    </div>

    After I press save button the attribute “title="Test test"” is removed by umbraco(i think).

    and when I preview this page only the first image is shown on nivo slider.

    The other images is not show even I click the ‘<’ ‘>’ button.

    please help me out

    Thanks in advance.

  • Avatar
    Pedro Monte

    Hi Kayatao , I already emailed you.

    Can you change/replace in the template :

        document.write("<script type='text/javascript' src='//code.jquery.com/jquery.min.js'><" + "/script>");

    Replace with:

        document.write("<script type='text/javascript' src='//code.jquery.com/jquery-1.8.0.min.js'><" + "/script>");

     

  • Avatar
    Kayatao

    Hi Pedro,

    It work!!!

    Thank you for your help

     

  • Avatar
    Rudy Van den Bergh

    I am using the Terra theme on Umbraco. Is there a way to change the effect of the slider from within the cms?

  • Avatar
    Ana Sampaio

    Hi Rudy, 

    No, you have to change the slider's effect directly in the javascript call. 

    Let me know if you have more questions.

  • Avatar
    Brian McNair

    Hi there, I am not a programer but have managed to install the nivoslider into my oscommerce site, looks great but it is trashing another jquery widget used on the site.

    I wonder if anyone could lend a hand resolve it.

    You can see it here http://hire.burnsidehighlanddress.co.uk/index.php

    as well as a few buttons through out the site the biggest problem is found here  http://hire.burnsidehighlanddress.co.uk/product_info.php?products_id=39

    the images on the product page should be a warm and cosy cluster in the top left of the page that zooms out when clicked.

    If I remove the slider it all goes back to normal, Pleas help! took me hours to get that on there!

  • Avatar
    Pedro Monte

    Hi Brian,

    You are getting many script errors on the page, that is causing the issues on the content.

    We need to see how did you implemented the nivosliders scripts.

    I will open a ticket support in your name so we can track this better.

     

  • Avatar
    Brian McNair

    Many thanks for the quick response Pedro,

    I have added the missing "Temp/style.css" but if anything it has made the look of the site worse!

    I have placed the HTML into includes/header.php just below the html for the top menubar

    all the css, jquery stuff i placed in the template folder beside all the other existing css and jquery stuff

    I am working on a modified oscommerce store using the following mod

    http://addons.oscommerce.com/info/8958/v,23

     

  • Avatar
    Pedro Monte

    Brian , are you receiving emails from our ticket support?

     

    You have at the header this jquery reference

    <script type="text/javascript" src="ext/jquery/jquery-1.8.0.min.js"></script>

    then you have next to the nivoslider a new reference to jquery, this is may causing some functions not to work on a diferent jquery version and given the errors on the console. can you try to remove the jquery-1.9.0.min.js reference?

    <script type="text/javascript" src="../template/scripts/jquery-1.9.0.min.js"></script>

    <script type="text/javascript" src="../template/jquery.nivo.slider.js"></script>

    <script type="text/javascript">

    $(window).load(function() {

    $('#slider').nivoSlider();

    });

    </script>

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