Apurar largura do elemento
Ao invés de estares a animar uma distancia fixa em pixeis, o ideal será apurares a largura que cada elemento do slider ocupa e deslocar essa mesma medida.
Em jQuery tens o método outerWidth()
que te devolve a width
+padding
+margin
do elemento, permitindo assim obter a largura total que o mesmo ocupa:
// obter largura do slide com margin e padding incluído
var w = $('.slide').outerWidth(true);
// deslocar essa medida para a direita
$(".slider2").animate({ "margin-left": "+="+w+"px" });
// deslocar essa medida para a esquerda
$(".slider2").animate({ "margin-left": "-="+w+"px" });
var w = $('.slide').outerWidth(true);
$( "#seta-direita" ).click(function() {
if (!$(".slider2").is(':animated'))
{
if ($(".slider2").offset().left < 8)
{
$(".slider2").animate({ "margin-left": "+="+w+"px" });
}
return false;
}
});
$( "#seta-esquerda" ).click(function() {
if (!$(".slider2").is(':animated'))
{
if ($(".slider2").offset().left > -187)
{
$(".slider2").animate({ "margin-left": "-="+w+"px" });
}
return false;
}
});
html {
background-color: #bcbcbc;
}
.slider1 {
overflow: hidden;
height: 50px;
width: 130px;
float: left;
}
.slider2 {
background-color: #FFF;
width: 500px;
}
.slide {
float: left;
background-color: yellow;
margin-left: 11px;
height: 50px;
width: 50px;
}
#seta-esquerda {
cursor: pointer;
font-family: verdana;
font-size: 13px;
}
#seta-direita {
cursor: pointer;
font-family: verdana;
font-size: 13px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="slider1">
<div class="slider2">
<div class="slide">a</div>
<div class="slide">a</div>
<div class="slide">a</div>
<div class="slide">a</div>
<div class="slide">a</div>
</div>
</div>
<div id="setas">
<div id="seta-esquerda">Esquerda</div>
<div id="seta-direita">Direita</div>
</div>
Exemplo também no JSFiddle.
Otimizar código
Também poderás otimizar o teu código de forma a não fazeres uso de nenhum valor fixo para o controlo da navegação.
Dado que a deslocação dos slides tem por principio não permitir deslocar mais que o primeiro quando a andar para a direita nem permitir deslocar mais que o último quando a andar para a esquerda, o total de slides serve como indicador de controlo.
$('.slide-nav').click(function(){
var $slider = $('.slider2');
if (!$slider.is(':animated')) {
var count = $('.slide').size(),
slidePx = $slider.find(':first-child').outerWidth(true),
slideTo = $(this).attr('class').split(' ')[1],
slidePos = parseInt($slider.css("margin-left")),
offset = (slidePx-slidePos)/slidePx;
if (slideTo=="left" && (offset<count)) {
var direcao = '-';
}
else if (slideTo=="right" && (offset>1)) {
var direcao = '+';
}
else {
return;
}
$(".slider2").animate({ "margin-left": direcao+"="+slidePx+"px" });
}
});
html {
background-color: #bcbcbc;
}
.slider1 {
overflow: hidden;
height: 50px;
width: 130px;
float: left;
}
.slider2 {
background-color: #FFF;
width: 500px;
}
.slide {
float: left;
background-color: yellow;
margin-left: 11px;
height: 50px;
width: 50px;
}
.slide-nav {
cursor: pointer;
font-family: verdana;
font-size: 13px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="slider1">
<div class="slider2">
<div class="slide">A</div>
<div class="slide">B</div>
<div class="slide">C</div>
<div class="slide">D</div>
<div class="slide">E</div>
</div>
</div>
<div id="setas">
<div class="slide-nav left">Esquerda</div>
<div class="slide-nav right">Direita</div>
</div>
Exemplo também no JSFiddle.
HTML
No HTML não existe otimização, existe sim uma alteração nos triggers de navegação para permitir a otimização do jQuery e CSS:
<div class="slider1">
<div class="slider2">
<div class="slide">A</div>
<div class="slide">B</div>
<div class="slide">C</div>
<div class="slide">D</div>
<div class="slide">E</div>
</div>
</div>
<div id="setas">
<!-- mesma classe para ação e segunda classe para direção -->
<div class="slide-nav left">Esquerda</div>
<div class="slide-nav right">Direita</div>
</div>
jQuery
O código em jQuery pode então ficar otimizado conforme em baixo detalhado, de forma a que não existam valores fixos no controlo da deslocação do slider o que contribui para uma aplicação mais flexível do mesmo, bem como menor ou nenhuma manutenção quando alteramos as dimensões do slider e/ou seus slides:
/*!
* Ao clicar em qualquer seta de navegação
*/
$('.slide-nav').click(function(){
var $slider = $('.slider2'); // colocar em cache o elemento a deslocar
// se não estiver animado
if (!$slider.is(':animated')) {
var count = $('.slide').size(), // total de slides
slidePx = $slider.find(':first-child').outerWidth(true), // largura de um slide
slideTo = $(this).attr('class').split(' ')[1], // para onde deslocar
slidePos = parseInt($slider.css("margin-left")), // posição atual
offset = (slidePx-slidePos)/slidePx; // quantos estão deslocados
// se a deslocar para esquerda e não estamos no último
if (slideTo=="left" && (offset<count)) {
var direcao = '-';
}
// se a deslocar para direita e não estamos no primeiro
else if (slideTo=="right" && (offset>1)) {
var direcao = '+';
}
// caso nenhum dos em cima, não fazer nada
else {
return;
}
// animar para a direção apurada a distância apurada
$(".slider2").animate({ "margin-left": direcao+"="+slidePx+"px" });
}
});
CSS
No CSS a formatação dos triggers de navegação passar a ser única o que contribui para um redução de código:
.slide-nav {
cursor: pointer;
font-family: verdana;
font-size: 13px;
}
Nos casos em que for necessário aplicar uma formatação especifica a um dos triggers, pode-se fazer da seguinte forma:
.slide-nav.left {
/* formatação apenas para "esquerda" */
}
.slide-nav.right {
/* formatação apenas para "direita" */
}