I have to make a slide with play / pause button, next and previous . On the slide I need to use html, css, java script and my buttons need to be with jquery. The play / pause button I was able to create. But I'm having trouble creating the next and previous button . can anybody help me?
html code:
<!DOCTYPE html>
<html>
<head>
<title>Term-Project / SlideShow</title>
<link rel="stylesheet" href="slideshow.css"/>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script><scriptsrc="library_slideshow.js"></script>
<script src="main.js"></script>
</head>
<body>
<main>
<h1>Beaches in Brazil</h1>
<p><input type="button" id="next" value="Next">
<input type="button" id="play_pause" value="Pause">
<input type="button" id="prev" value="Previous"></p>
<p><img src="images/arembepe-sa.png" id="image" alt=""></p>
<p><span id="caption">Beach in Arembepe - Bahia</span></p>
</main>
</body>
</html>
CSS CODE:
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
background-color: white;
width: 550px;
margin: 0 auto;
border: 3px dashed green;
padding: 1em;
}
h1 {
color: green; margin: 0;
padding: 0 0 1em 0;
text-align: center;
font-style: italic;
}
h2 {
text-align: center;
}
p {
margin: 0;
padding: .5em;
text-align: center;
}
ul {
display: none;
}
#caption {
color: green;
font-weight: bold;
}
FIRST JAVASCRIPT:
"use strict";
$( document ).ready(function() {
// create the slideshow object
var slideshow = createSlideshow();
var slides = [
{href:"barra-sa.jpg", title:"Farol da Barra - Salvador / Bahia"},
{href:"guaruja-sp.jpg", title:"Guaruja - Sao Paulo"},
{href:"jericoacoara-fo.jpg", title:"Jericoacoara - Fortaleza"},
{href:"lencois-ma-.jpg", title:"Lencois Maranhenses - Maranhao"},
{href:"pontanegra-na.jpg", title:"Ponta Negra - Natal"},
{href:"pontaverde-mc.jpg", title:"Ponta Verde - Maceio"},
{href:"portodegalinhas-pe.jpg", title:"Porto de Galinhas - Pernambuco"},
{href:"rio-rj.jpg", title:"Cristo Redentor - Rio de Janeiro"}
];
$("#play_pause").click( slideshow.createToggleHandler() );
slideshow.loadImages(slides).startSlideShow( $("#image"), $("#caption") );
});
SECOND JAVA SCRIPT:
"use strict";
var createSlideshow = function() {
// private variables and functions
var timer, play = true, speed = 2000;
var nodes = { image: null, caption: null };
var img = { cache: [], counter: 0 };
var stopSlideShow = function() { clearInterval( timer ); };
var displayNextImage = function() {
img.counter = ++img.counter % img.cache.length;
var image = img.cache[img.counter];
nodes.image.attr("src", image.src);
nodes.caption.text( image.title );
};
// public methods that have access to private variables and functions
return {
loadImages: function(slides) {
var image;
for ( var i = 0; i < slides.length; i++ ) {
image = new Image();
image.src = "images/" + slides[i].href;
image.title = slides[i].title;
img.cache.push( image );
}
return this;
},
startSlideShow: function() {
if (arguments.length === 2) {
nodes.image = arguments[0];
nodes.caption = arguments[1];
}
timer = setInterval(displayNextImage, speed);
return this;
},
createToggleHandler: function() {
var me = this; // store 'this', which is the object literal
return function() {
// 'this' is the clicked button; 'me' is the object literal
if ( play ) { stopSlideShow(); } else { me.startSlideShow(); }
this.value = (play) ? "Play" : "Pause";
play = ! play; // toggle play flag
};
}
};
};
Can anyone help me?