Still using Internet Explorer?

You'll have a happier experience on the TRU website — and most other sites — if you update to a modern web browser such as Firefox, Chrome, or Edge. You can continue to use Internet Explorer for certain tasks, such as using Banner.

Thompson Rivers University 50th Anniversary
Thompson Rivers University 50th Anniversary

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>
Search To Top