Image Slider (3) for use on the Melbourne PC Website

 

This is the final tutorial of the image slider (for use on the Melbourne PC website).

 

Below is the end product, an image slider, in a container with added text and image forward backward buttons.

 


To create the image slider, you need to locates and select the Javascript tab (at the top of the page). In the Javascript page locate the Startup scripts pane (at the top of the page) and copy in the script below (The css and javascript).

<style>
p {
text-align: center;
font-family: "Comic Sans MS", cursive, sans-serif;
color: #333;
}
.outer-shell{
padding-top: 20px;
padding-bottom: 10px;
width: 292px;
margin: 0 auto;
/*background-color: #CCCCCC;*/
border: 1px solid #DDDDDD;
  -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
  -moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
}

.display-container:hover .display-hover{display:block}
.display-container:hover span.display-hover{display:inline-block}
.display-hover{display:none}
.display-container{position:relative;
width: 252px;
margin: 0 auto; /*center aligns the scroller */}

.arrow-right{
background:url(/media/235089/ar.png) no-repeat;
    cursor:pointer;
    border:none;
    width:57px;
    height:61px;
}
.arrow-left{
background:url(/media/235088/al.png) no-repeat;
    cursor:pointer;
    border:none;
    width:62px;
    height:64px;
}
.display-left{
position:absolute;
top:45%;left:3%;
/*transform:translate(0%,-50%);
-ms-transform:translate(-0%,-50%);*/
background-color: transparent;
}
.display-right{
position:absolute;
top:45%;right:3%;
/*width:100%;*/
/*transform:translate(0%,-50%);
-ms-transform:translate(0%,-50%);*/
background-color: transparent;
}
</style><script>
var slideIndex = 0;
document.addEventListener('DOMContentLoaded', function() {
showDivs(slideIndex);
jQuery('.display-right' ).click(function() {
slideIndex = slideIndex + 1;
showDivs(slideIndex);
});
jQuery('.display-left' ).click(function() {
slideIndex = slideIndex - 1;
showDivs(slideIndex);
});
}, false);



function plusDivs(n) {
  showDivs(slideIndex += n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("mySlides");
  if (n >= x.length) {slideIndex = 0}    
  if (n < 0) {slideIndex = x.length - 1}
  for (i = 0; i < x.length; i++) {
     x[i].style.display = "none";  
  }
  x[slideIndex].style.display = "block";  
}
</script>


When you have copied in your css and Javascript hit the Save and publish button (located at the bottom of the page)
Ensure you have uploaded all of the relevant images including your
forward and backward arrow images. Locate and select the Page Content tab.
Locate the HTML Content pane, paste in the following code, change image links to match your own
images, then Hit Save and Publish.

<div class="outer-shell">
<div class="content display-container">
<div class="content display-container mySlides">
<img style="width: 100%;" src="https://www.melbpc.org.au/media/226044/dsc_0512.jpg" alt="" />
<p> Image 1, San Francisco, Tea house 2016</p> <!-- can use span or label or just p tags here rather than divides -->
</div>

<div class="content display-container mySlides">
<img style="width: 100%;" src="https://www.melbpc.org.au/media/226039/dsc_0452.jpg" alt="" />
<p>Image 2</p>
</div>

<div class="content display-container mySlides">
<img style="width: 100%;" src="https://www.melbpc.org.au/media/226040/dsc_0459.jpg" alt="" />
<p>Image 3</p>
</div>

<div class="content display-container mySlides">
<img style="width: 100%;" src="https://www.melbpc.org.au/media/226043/dsc_0509.jpg" alt="" />
<p>Image 4</p>
</div>
<button class="button arrow-left display-left"></button>
<button class="button arrow-right display-right"></button>
</div>
</div>