Triple Image Slider
- Locate the “triple slider” block in the “2017 Design Master” > “shared blocks.
- Right-click and copy the block. Move the copied block over to your own site directory, place it in your “xhtml” folder.
- You need to include the block on every page where you intend to use it. To accomplish this:
- Go to “Edit” > “Configure” in the top horizontal are.
- Scroll down to find five JavaScript regions you can load blocks onto.
- Click “Choose Block” on an empty path and link to the corresponding block from your site’s directory.
- In the WYSIWYG source code editor insert the following script:
<div class="slider-container">
<div class="owl-carousel">
<div>
<img alt="" src="https://www.uwo.ca/img/academics/academics-dept.png" />
</div>
<div>
<img alt="" src="https://www.uwo.ca/img/academics/academics-dept.png" />
<!-- CHANGE IMAGE HERE -->
<h3>Title</h3>
<!--CHANGE CAPTION HERE-->
<p>In tincidunt dictum mi vitae lobortis. Vivamus id urna massa, eu tincidunt mauris.</p>
<!--CHANGE sub-Caption HERE-->
</div>
<div>
<img alt="" src="https://www.uwo.ca/img/academics/academics-dept.png" />
</div>
<div>
<img alt="" src="https://www.uwo.ca/img/academics/academics-dept.png" />
<!-- CHANGE IMAGE HERE -->
<h3>Title</h3>
<!--CHANGE CAPTION HERE-->
<p>In tincidunt dictum mi vitae lobortis. Vivamus id urna massa, eu tincidunt mauris.</p>
<!--CHANGE sub-Caption HERE-->
</div>
</div>
</div>
WARNING: These don't always fit just the way you want, depending on image size, and the container you are trying to place it in. In some cases they need to be customized a little more in which case ask for help from an experienced coder.
Live Example
Title
In tincidunt dictum mi vitae lobortis. Vivamus id urna massa, eu tincidunt mauris.
Title
In tincidunt dictum mi vitae lobortis. Vivamus id urna massa, eu tincidunt mauris.
