I would like to create a slideshow in that style , with a unique image that moves horizontally with the navigation. Does anyone suggest a plugin in this style?
Here's an outline of what I want: link But as I'm starting in jquery, my codes are kind of messy, I wonder if there's a better technique to do this.
$(document).ready(function() {
$(".box01").hide();
$(".irparaslide02").click(function() {
$('#imagem').addClass('move01para02');
$("#proximo").removeClass('irparaslide02').addClass('irparaslide03');
$("#anterior").addClass('move02para01');
$(".irparaslide03").click(function() {
$('#imagem').removeClass('move01para02').addClass('move02para03');
$("#proximo").removeClass('irparaslide03').addClass('irparaslide04');
$(".box01").show(slow);
});
});
});*{margin:0;padding:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
#infografico{width:100%;overflow:hidden;position:relative}
nav{position: absolute;top: 50%;width: 100%;}
nav #anterior{position:absolute; top:50%; left:5%; background-color:#fff}
nav #proximo{position:absolute; top:50%; right:5%; background-color:#fff}
#imagem{background:url(http://kgbm.com.au/wp-content/uploads/2016/02/sydney1a-wide.jpg) 0px 0px no-repeat; width:2000px; height:400px}
.move01para02{animation-name:move01para02;animation-duration:1s;animation-timing-function:ease-in, ease-in-out;animation-fill-mode:forwards;}
@keyframes move01para02{
0% {background-position: 0px}
100%{ background-position: -200px}
}
.move02para01{animation-name:move02para01;animation-duration:1s;animation-timing-function:ease-in, ease-in-out;animation-fill-mode:forwards;}
@keyframes move02para01{
0% {background-position: -200px}
100%{ background-position: 0px}
}
.show{width:30px; height:30px; background-color:#000}
.move02para03{animation-name:move02para03;animation-duration:1s;animation-timing-function:ease-in, ease-in-out;animation-fill-mode:forwards;}
@keyframes move02para03{
0% {background-position: -200px}
100%{ background-position: -400px}
}
.show{width:30px; height:30px; background-color:#000}
.box01{background:#fff;color:#000; position:absolute; top:20px; left:200px}<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script><divid="infografico">
<nav><li><a href="#" id="anterior" class="">voltar</a></li><li><a href="#" id="proximo" class="irparaslide02">ir</a></li></nav>
<div id="imagem"></div>
<div class="box01">box de texto 01</div>