Dica para posicionamento de setas next e prev de slider

jQuery

HTML

CSS

JavaScript

29/12/2016

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

George Lucas

Curtidas 0
POSTAR