• Home
• Digital
• Web Design
• Interactive Elements
• Single Image Slider

Single Image Slider

1. Locate the “triple slider” block in the “2017 Design Master” > “shared blocks
2. Right-click and copy the block. Move the copied block over to your own site directory, place it in your “xhtml” folder.
3. 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 id="secondary-slider" class="flexslider">
           <ul class="slides">
              <li>
                 <!--CHANGE IMAGE HERE-->
                 <img src="https://www.uwo.ca/img/academics/academics-dept.png" />
                 <!--CHANGE CAPTION HERE--> 
                 <h3>Title</h3>
                 <!--CHANGE sub-Caption HERE-->
                 <p>In tincidunt dictum mi vitae lobortis. Vivamus id urna massa, eu tincidunt mauris.</p>
              </li>
              <li>
                 <!--CHANGE IMAGE HERE-->
                 <img src="https://www.uwo.ca/img/academics/academics-dept.png" />
                 <!--CHANGE CAPTION HERE--> 
                 <h3>Title</h3>
                 <!--CHANGE sub-Caption HERE-->
                 <p>In tincidunt dictum mi vitae lobortis. Vivamus id urna massa, eu tincidunt mauris.</p>
              </li>
              <li>
                 <!--CHANGE IMAGE HERE-->
                 <img src="https://www.uwo.ca/img/academics/academics-dept.png" />
                 <!--CHANGE CAPTION HERE--> 
                 <h3>Title</h3>
                 <!--CHANGE sub-Caption HERE-->
                 <p>In tincidunt dictum mi vitae lobortis. Vivamus id urna massa, eu tincidunt mauris.</p>
              </li>
              <li>
                 <!--CHANGE IMAGE HERE-->
                 <img src="https://www.uwo.ca/img/academics/academics-dept.png" />
                 <!--CHANGE CAPTION HERE--> 
                 <h3>Title</h3>
                 <!--CHANGE sub-Caption HERE-->
                 <p>In tincidunt dictum mi vitae lobortis. Vivamus id urna massa, eu tincidunt mauris.</p>
              </li>
           </ul>
        </div>
     </div> 
     

     This block is good to place in sidebars, or bottom social media areas.