Adding a Slider

GuildPortal admin site link to the original post

Determine if the slider you want to use will contain images only or other content - then refer to the section below. We will use Nivo Slider for images only and AnythingSlider for a mix of content and images.

In a free form text/html widget, add the code from the appropriate section below, then update the HTML (image urls and/or slide content) as desired.

Image only slider

<script src="/GuildFiles/258012/jquery.nivo.slider.pack.js"></script>
<link href="/GuildFiles/258012/nivo-slider.css" rel="stylesheet">
<script>

$(window).load(function() {

  $('#slider').nivoSlider({
    effect: 'random'
  });

});

</script>

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

  <img src="/GuildFiles/######/slide1.jpg" alt="" />

  <img src="/GuildFiles/######/slide2.jpg" alt="" />

  <img src="/GuildFiles/######/slide3.jpg" alt="" title="This is an example of a caption" />

  <img src="/GuildFiles/######/slide4.jpg" alt="" />
</div>

You can choose from any of these effects (instead of random):

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

See a demo of the slide effects here.

Content Slider

I've also added AnythingSlider which allows you to add more than just images:

<script src="/GuildFiles/258012/jquery.anythingslider.all.min.js"></script>
<link href="/GuildFiles/258012/anythingslider.combo.css" rel="stylesheet">
<script>

$(function() {

  $('#slider').anythingSlider({
    theme: 'theme1', // choose from default '', 'theme1' or 'theme2'
    autoPlay: false    // set to true to start a slideshow
  });

});

</script>
<ul id="slider" class="AnythingSlider">

  <li class="slide1">
    <div class="text">Put anything you want here</div>
  </li>

  <li class="slide2">
    <img src="/GuildFiles/######/slide1.jpg" alt="" />
  </li>

  <li class="slide3">
   <div class="list">
    <h4>Title</h4>
    <ul>
     <li>List item #1</li>
     <li>List item #2</li>
    </ul>
   </div>
  </li>

 </ul>

You can get a lot more information on settings and see demos here.