Embedding an In Page Slider

Currently the system supports the creating of an in-page slider with the assistance of the source code feature located underneath the "Tools" tab in the WYSIWYG toolbar as seen here:

Source Code screenshot

Upon opening the source code, you will enter the following code at the point where you would like your slider to appear:

<ul class="bxslider">
<li><img src="https://www.thatcutesite.com/uploads/2010/11/two_corgi_puppies.jpg" /></li>
<li><img src="https://s3-media2.ak.yelpcdn.com/bphoto/8oBu66rizt0LDNuT28atyg/l.jpg" /></li>
<li><img src="https://s3-media3.ak.yelpcdn.com/bphoto/J9HsOdo3vX3fXhay0L66QQ/l.jpg" /></li>
<li><img src="https://grza.net/gis/Animals/Puppy%20Lying%20on%20Wood%20Floor.jpg" /></li>
</ul>

Which will create a slider like this:

  • Puppy
  • Yorkie
  • Sleepy puppy

 

If you would prefer the images to have labels simply add in a title to each like below:

<ul class="bxslider">
<li><img src="https://www.thatcutesite.com/uploads/2010/11/two_corgi_puppies.jpg" title="Vicious Himalayan Mountain Corgi's" /></li>
<li><img src="https://s3-media2.ak.yelpcdn.com/bphoto/8oBu66rizt0LDNuT28atyg/l.jpg" title="The Noble and Majestic Bulldog" /></li>
<li><img src="https://s3-media3.ak.yelpcdn.com/bphoto/J9HsOdo3vX3fXhay0L66QQ/l.jpg" title="Not sure what this is...A Rat?" /></li>
<li><img src="https://grza.net/gis/Animals/Puppy%20Lying%20on%20Wood%20Floor.jpg" title="The Rarely Seen and Oft Misunderstood Floor Dog" /></li>
</ul>

This will create the slider like the one below:

  • Puppy
  • Pup with bow
  • Sleeeeepy

 

To add a link to the image so it links to a page or another site, add the bolded text below or copy and paste this and change the links:

<ul class="bxslider">
<li><a href="https://www.cnn.com"><img src="https://www.thatcutesite.com/uploads/2010/11/two_corgi_puppies.jpg" title="Vicious Himalayan Mountain Corgi's" /></a></li>
<li><a href="https://www.washingtonpost.com"><img src="https://s3-media2.ak.yelpcdn.com/bphoto/8oBu66rizt0LDNuT28atyg/l.jpg" title="The Noble and Majestic Bulldog" /></a></li>
<li><a href="https://www.espn.com"><img src="https://s3-media3.ak.yelpcdn.com/bphoto/J9HsOdo3vX3fXhay0L66QQ/l.jpg" title="Not sure what this is...A Rat?" /></a></li>
<li><a href="https://www.eonline.com"><img src="https://grza.net/gis/Animals/Puppy%20Lying%20on%20Wood%20Floor.jpg" title="The Rarely Seen and Oft Misunderstood Floor Dog" /></a></li>
</ul>

 

To Upload Images for use in the Slider

  1. Click on the Image tool in the left-hand navigation.
  2. Click the Upload Image button on the right side of the page.
  3. Give the image a title, select the picture to be uploaded then hit Save.
  4. Find the image in the image list and select it.
  5. Select the size of the image and click the clipboard icon to copy the image link to paste into the slider information.
  6. Paste that in and you're done.