We’ve included an easy-to-edit HTML slider. You can implement it on your website in just a few quick steps.
- After you login, add an HTML module to your page. Apply the SliderContainer to your HTML module by hovering over the Manage button and selecting Settings. Then click the Page Settings Tab and select the SliderContainer from the Module Container drop down. Then scroll down and click the Update button.
- Hover over your HTML module’s Manage button and select Edit Content. Click on the HTML tab at the bottom of the HTML editor and copy/paste the following sample code into it:
- <div id="TWSlider" class="TWSlider nivoSlider">
- <a href="/T-WORX.aspx" title="Learn more about T-WORX"><img alt="Slider Image 1" src="/portals/0/images/Slide1.jpg" data-thumb="/Portals/0/images/Slide1.jpg" title="<span>Slide 1 </span> Donec scelerisque aliquet mi, non venenatis urnas iaculis. Utea id nila ante. Cras est massa, interdum ateal imperdiet etean, gravida eu quame." />
- <a href="/T-WORX.aspx" title="Learn more about T-WORX"><img alt="Slider Image 2" src="/portals/0/images/Slide2.jpg" data-thumb="/Portals/0/images/Slide2.jpg" title="<span> Slide 2 </span> Donec scelerisque aliquet mi, non venenatis urnas iaculis. Utea id nila ante. Cras est massa, interdum ateal imperdiet etean, gravida eu quame." />
- <a href="/T-WORX.aspx" title="Learn more about T-WORX"><img alt="Slider Image 3" src="/portals/0/images/Slide3.jpg" data-thumb="/Portals/0/images/Slide3.jpg" title="<span> Slide 3 </span> Donec scelerisque aliquet mi, non venenatis urnas iaculis. Utea id nila ante. Cras est massa, interdum ateal imperdiet etean, gravida eu quame." />
- <a href="/T-WORX.aspx" title="Learn more about T-WORX"><img alt="Slider Image 4" src="/portals/0/images/Slide4.jpg" data-thumb="/Portals/0/images/Slide4.jpg" title="<span> Slide 4 </span> Donec scelerisque aliquet mi, non venenatis urnas iaculis. Utea id nila ante. Cras est massa, interdum ateal imperdiet etean, gravida eu quame." /></div>
Now all you have to do is edit the links and images as you like, then click the Save button.
Heads up! To change the images that are displayed in the slider, just add your own images to the /Portals/0/images folder and edit the image paths in the code. Or just use your own paths. For example, to add a new image named NewImage.jpg, change the code/path like this: /Portals/0/images/NewImage.jpg. You can add as many images as you want.