Easy Slideshow or Gallery in HTML

[roush_94]

On our current LMS we are able to use as much external CSS and JavaScript as we dare to use, which has enabled us to do some nice things that haven't converted so well to Canvas. In transitioning to Canvas we decided to ditch the HTML and go with Pages which will be much easier to maintain and support, but we have had to find some workarounds. We also don't like to rely on external tools unless we have to.

I'd like to share what we are using as a solution to a basic slideshow, it could be an image gallery as well of course. It isn't fancy or perfect but it is easy to adapt with a little bit of basic HTML knowledge. One plus is it should match your branding, but you may need to switch some colors around (the ones on line 3 of the code snippet). Huge thanks to the Canvas Community, I've learned so much recently from here, including some of the style guide use in this example, and experienced a ton of creativity.

Here is what it looks like:

This video is currently being processed. Please try again in a few minutes.

Here is a short code snippet, you can copy and paste as many image section as needed, sizes and colors can all be changed easily in the code.

<!-- Setup the Container and Title -->
<div class="img-rounded" style="overflow-y: scroll; height: 390px; width: 447px; float: right; background-color: #rgb(136, 0, 0); border: 0px solid black; margin: 10px;">
<h4 style="color: #000; background-color: ##f7f7f7; text-align: center; margin: 0px; padding: 0px;">Slideshow Title</h4>
<div id="cc-homepage-announcements" style="height: 357px; overflow-x: hidden; overflow-y: auto; padding: 1px; text-align: center;">
<!-- Time to Add Slides. If you need more slides, copy and paste a section, but make sure you increment the div id and the href ids for the buttons-->
<!--Slide 1 -->
  <div id="img1">
  <img src="/courses/###/files/####/preview" width="425px" alt="Alt Text" />
  <!--Next Button -->
  <div class="btn btn-primary"><a style="color: #fff" href="#img2">Next Slide</a></div>
  </div>
<!--Slide 2 -->
  <div id="img2">
  <img src="/courses/###/files/####/preview" width="425px" alt="Alt Text" />
  <!--Previous Button -->
  <div class="btn btn-primary"><a style="color: #fff" href="#img1">Previous Slide</a></div>
  <!--Next Button -->
  <div class="btn btn-primary"><a style="color: #fff" onclick="return false" href="#img3">Next Slide</a></div>
  </div>
<!--Slide 3 -->
  <div id="img3">
  <img src="/courses/###/files/####/preview" width="425px" alt="Alt Text" />
  <!--Previous Button -->
  <div class="btn btn-primary"><a style="color: #fff" href="#img2">Previous Slide</a></div>
  </div>
<!-- Close those Divs -->
</div>
</div>
<!-- End Slideshow -->