TRU Supporting Wildfire Evacuees » More info
Thompson Rivers University
Thompson Rivers University

Banners & Sliders

No Banners


<div class="row top-banner short tealbg">
<h2 class="section-title"><a href="#">Brand Guide</a></h2></div>

Banners


<div class="row top-banner">
<img class="small-12 flipX" src="/__shared/assets/Brand_Guide_Banner36169.jpg" alt="Brand Guide">
<h2 class="section-title"><a href="#">Brand Guide</a></h2>
</div>

HTML5 Video Banners

Study by Distance

Testing text overlay

Click here

This banner has a background video, overlaid by a heading and a button.


<div class="row top-banner lh-0">
<video class="small-12" src="http://int.nyt.com/data/videotape/finished/2014/11/1416002593/nade3-1050.mp4" loop preload="auto" autoplay="autoplay" poster="http://graphics8.nytimes.com/images/2014/11/17/technology/17celebrity-top1/17celebrity-top1-custom1.jpg"></video>
<h2 class="section-title"><a href="#">Study by Distance</a></h2>
<div class="absolute top-30 small-12 h4pad">
<h2 class="whitetext">Testing text overlay</h2>
<a href="#" class="button tealbg radius">Click here</a>
</div>
</div>

Sliders

Sliders - also known as carousels - can be inserted into pages to display content one (or several) at a time. As sliders are controlled by Javascript, the template has to be set up for a slider in advance. Most elements of a slider can be customized: show/hide arrows, show/hide dots, the number of slides shown, how many slides to advance, auto-looping, auto-resizing height, and mobile responsiveness.

The following slider is set to display 2 slides, advance by 2, loop infinitely, display dots and arrows and adapt its height to the content. It will switch to displaying 1 slide at a time at 640px (mobile devices).


<div class="featured">
<div class="slide">
<a href="https://placeimg.com/800/600/animals" class="venobox" data-gall="myGallery"><img src="https://placeimg.com/800/600/animals" alt="image"></a>
<p>Sample content</p>
</div>
<div class="slide">
<a href="https://placeimg.com/800/600/nature" class="venobox" data-gall="myGallery"><img src="https://placeimg.com/800/600/nature" alt="nature"></a>
<p>Sample content</p>
</div>
<div class="slide">
<a href="https://placeimg.com/800/600/people" class="venobox" data-gall="myGallery"><img src="https://placeimg.com/800/600/people" alt="image"></a>
<p>Slightly longer sample content</p>
</div>
<div class="slide">
<a href="https://placeimg.com/800/600/arch" class="venobox" data-gall="myGallery"><img src="https://placeimg.com/800/600/arch" alt="image"></a>
<p>Sample content</p>
</div>
<div class="slide">
<a href="https://placeimg.com/800/500/tech" class="venobox" data-gall="myGallery"><img src="https://placeimg.com/800/500/tech" alt="image"></a>
<h3>Content title</h3>
<p>Really, really long sample content below a slide</p>
</div>
<div class="slide">
<a href="https://placeimg.com/800/500/animals" class="venobox" data-gall="myGallery"><img src="https://placeimg.com/800/500/animals" alt="image"></a>
<p>Sample content</p>
</div>
<div class="slide">
<a href="https://placeimg.com/800/500/nature" class="venobox" data-gall="myGallery"><img src="https://placeimg.com/800/500/nature" alt="image"></a>
</div>
<div class="slide">
<a href="https://placeimg.com/800/500/people" class="venobox" data-gall="myGallery"><img src="https://placeimg.com/800/500/people" alt="image"></a>
</div>
</div>

Homepage Banner

With Video


<div class="slide">
<img class="videothumb" src="/__shared/assets/TRU_Orientation_2015_-_screenshot36460.jpg" alt="TRU Orientation 2015">
<div class="slide-content slide-full flex-video">
<a href="#" class="videobutton">
<div class="content">
<h2>TRU Orientation 2015</h2>
<img src="/__shared/assets/videoplay_button36459.png" alt="Play the video">
</div>
</a>
<iframe class="ytvideo" width="560" height="315" src="http://www.youtube.com/embed/NS_hDg-j3JA" frameborder="0" allowfullscreen></iframe>
</div>
</div>

With HTML Video


<div class="row featured home-slider tealbg">
<div class="slide">
<script>
window.onload=function(){
var h5video = document.getElementById('theVideo');
h5video.play();
}
</script>
<video id="theVideo" style="width:100% !important; height: auto !important;" loop preload="true" autoplay="autoplay" controls poster="/__shared/assets/A_to_B_background39332.jpg">
<source src="/__shared/assets/A_to_B_-_Homepage39331.mp4" type="video/mp4">Your browser does not support the video tag.</source>
</video>
</div>
</div>