Dica para posicionamento de setas next e prev de slider
Olá galera, estou tentando montar um slider utilizando meus conhecimentos recentes de html, css, javascript e jQuery, e estou enfrentando um probleminha com o posicionamento das setas de navegação! Gostaria de pedir ajuda humildemente aos parceiros da Devmidia e desde já agradeço! Abaixo segue o código fonte:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" content="text/html" http-equiv="Content-Type">
<title>Image Slider JQuery</title>
<style type="text/css">
/*inicio de item da vitrini*/
/*inicio do botão*/
.btn:hover, .btn:focus {
outline: none;
box-shadow: none;
}
.btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active, .open .dropdown-toggle.btn-default {
color: #333;
background-color: #ebebeb;
border-color: #adadad;
}
.btn:hover, .btn:focus {
color: #333;
text-decoration: none;
}
.btn:focus {
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
a:focus {
outline: none;
outline-offset: 0;
}
a:focus {
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
a:hover, a:focus {
color: #2a6496;
text-decoration: underline;
}
a:focus {
outline: thin dotted;
}
.add-to-cart {
background: #F5F5ED;
font-family: 'Roboto', sans-serif;
}
.btn-default {
color: #333;
background-color: #fff;
}
.btn {
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: normal;
line-height: 1.428571429;
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
}
a {
text-decoration: none;
}
/*fim do botão*/
/* inicio da Descrição do botão */
.productinfo p {
font-size: 14px;
color: #696763;
}
.item p {
color: #363432;
font-size: 16px;
font-weight: 300;
font-family: 'Roboto', sans-serif;
}
p {
margin: 0 0 10px;
}
*, *::before, *::after {
box-sizing: border-box;
}
.text-center {
text-align: center;
}
/*fim da descrição do botão*/
/*fim de item da vitrini*/
#gallery-wrap{
margin:0 auto;
overflow: hidden;
width: 575px;
height: 260px;
position: relative;
}
#gallery{
position: relative;
left:0;
top:0;
display: i
}
#gallery li {
float: left;
list-style: none;
margin: 0 20px 15px 0;
}
#gallery li a img{
border:4px solid #40331b;
height: 165px;
width: 165px;
}
#gallery-controls{
margin: 0 auto;
width: 600px;
}
#gallery-prev{
top: 30%;
display: inline-block;
position: absolute;
margin-left: 30px;
}
#gallery-next{
top: 30%;
display: inline-block;
position: absolute;
margin-left: 590px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
<script type="text/javascript" src="./fancybox/jquery.mousewheel-3.0.2.pack.js"></script>
<script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.1.js"></script>
<link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.3.1.css" media="screen"/>
<script type="text/javascript">
$(window).load(function(){
// Gallery
if (jQuery("#gallery").length) {
//fancybox
jQuery("#gallery li a").fancybox({
'titleShow' :false,
'transitionIn' :'elastic',
'transitionOut' :'elastic'
});
//Variáveis não são usadas corretamente devido ao Webkit
var totalImages = jQuery("#gallery > li").length,
imageWidth = jQuery("#gallery > li:first").outerWidth(true),
totalWidth = imageWidth * totalImages,
visibleImages = Math.round(jQuery("#gallery-wrap").width() / imageWidth),
visibleWidth = visibleImages * imageWidth,
stopPosition = (visibleWidth - totalWidth);
jQuery("#gallery").width(totalWidth);
jQuery("#gallery-prev").click(function(){
if (jQuery("#gallery").position().left < 0 && !jQuery("gallery").is(":animated")){
jQuery("#gallery").animate({left: "+=" + imageWidth + "px"});
}
return false;
});
jQuery("#gallery-next").click(function(){
if (jQuery("#gallery").position().left > stopPosition && !jQuery("#gallery").is(":animated")) {
jQuery("#gallery").animate({left: "-=" + imageWidth + "px"});
}
return false;
});
}
});
</script>
</head>
<body>
<h1>jQuery Image Slider</h1>
<div>
<div id="gallery-wrap">
<ul id="gallery">
<li>
<div class="col-sm-4">
<div class="product-image-wrapper">
<div class="single-products">
<div class="productinfo text-center">
<img src="1.png" alt="" />
<h2>$56</h2>
<p>Easy Polo Black Edition</p>
<a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to cart</a>
</div>
</div>
</div>
</div>
</li>
<li>
<div class="col-sm-4">
<div class="product-image-wrapper">
<div class="single-products">
<div class="productinfo text-center">
<img src="1.png" alt="" />
<h2>$56</h2>
<p>Easy Polo Black Edition</p>
<a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to cart</a>
</div>
</div>
</div>
</div>
</li>
<li>
<div class="col-sm-4">
<div class="product-image-wrapper">
<div class="single-products">
<div class="productinfo text-center">
<img src="1.png" alt="" />
<h2>$56</h2>
<p>Easy Polo Black Edition</p>
<a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to cart</a>
</div>
</div>
</div>
</div>
</li>
<li>
<div class="col-sm-4">
<div class="product-image-wrapper">
<div class="single-products">
<div class="productinfo text-center">
<img src="1.png" alt="" />
<h2>$56</h2>
<p>Easy Polo Black Edition</p>
<a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to cart</a>
</div>
</div>
</div>
</div>
</li>
<li>
<div class="col-sm-4">
<div class="product-image-wrapper">
<div class="single-products">
<div class="productinfo text-center">
<img src="1.png" alt="" />
<h2>$56</h2>
<p>Easy Polo Black Edition</p>
<a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to cart</a>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
<div id="gallery-controls">
<a href="#" id="gallery-prev"><img src="images/prev.png" border="0"/></a>
<a href="#" id="gallery-next"><img src="images/next.png" border="0"/></a>
</div>
</div>
</body>
</html>
George Lucas
Curtidas 0