Ajuda a melhorar o slide Carrousel
Beleza?!
Então criei um carrousel com jquery que ficou até bacana, porém preciso fazer umas melhorias nele. Basicamente é aplicar responsivo a ele.
E por enquanto o código tá assim todo bagunçado, depois dou uma enxugada, e passar tudo para uma função para comandar suas ações por parâmetro, assim evitando ter que editar o código caso queira um comportamento diferente.
Então quem puder ajudar em deixar-lo responsivo fico grato.
O que falta e é mais prioridade é: Automatização do responsivo de forma a não necessidade de ficar fazendo edições tanto no css quanto na função, quando for usar em diferentes ocasiões.
Segue-se então
HTML:
Spoiler
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Teste Carousel</title>
</head>
<body>
<div class="slide-container">
<div class="nav prev"><button>❮</button></div>
<ul class="slider">
<li style="background: red"></li>
<li style="background: green"></li>
<li style="background: blue"></li>
</ul>
<div class="nav next"><button>❯</button></div>
</div>
</body>
</html>
CSS:
Spoiler* {
margin: 0;
padding: 0
}html, body {height: 100%}
img {max-width: 100%}
.slide-container {
width: 100%;
position: relative;
margin: 0 auto;
overflow: hidden
}
.slider {
list-style: none;
width: 1000%;
}.slider li {
float: left;
min-height: 300px;
margin: 0;
padding: 0;
position: relative;
}.slide-container .nav {
display: table;
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -48px;
z-index: 1
}.slide-container .nav button {
background: none;
border: none;
font-size: 48px;
color: #ffffff;
padding: 16px;
display: table-cell;
vertical-align: middle;
cursor: pointer
}.slide-container .nav:hover button {
color: white;
background-color: rgba(0,0,0,.5);
}.slide-container .nav.prev {
left: 0;
}.slide-container .nav.next {
right: 0;
}
Script:
Spoiler
$(function () {
// Define o tamanho do slide conforme o tamanho da janela
$('.slider li').css({'width': parseInt($('.slide-container').outerWidth()) + 'px'});
var slideContainer, // @var janela usada mais tarde para tratar de responsivo
slideCount = 0, // Captura qual é o avanço atual do slide
slideSize = parseInt($('.slider li').outerWidth()), // Captura o tamando de cada item do slide
slideTotalSize = slideSize * slideSize, // Calcula o tamanho total de cada item do slide
slideQuant = ($('.slider li').length / 1) - 1; // Calcula quantos itens exitem no slide
// Ajusta o Slide
$('.slider').css({'width': slideTotalSize});
$('.next').click(function () {
if (slideCount < slideQuant) {
slideCount++;
$('.slider').animate({'margin-left': '-=' + slideSize + 'px'}, 500);
} else {
slideCount = 0;
$('.slider').animate({'margin-left': '0'}, 500);
}
window.clearTimeout(slideTime);
autoSlide();
});
$('.prev').click(function () {
if (slideCount >= 1) {
slideCount--;
$('.slider').animate({'margin-left': '+=' + slideSize + 'px'}, 500);
}
window.clearTimeout(slideTime);
autoSlide();
});
// Rebase dos slides para aplicar responsivo
$(window).resize(function () {
slideContainer = parseInt($('.slide-container').outerWidth());
$('.slider li').css({'width': slideContainer + 'px'});
$('.slider').css({'margin-left': '0'});
slideSize = slideContainer;
slideCount = 0;
});
// Arrastar itens do Slide
var mouseStart, slideMouseMove, slideWindow, slideDrag;
$('.slider').on('mousedown touchstart', function (e) {
mouseStart = e.pageX || e.originalEvent.touches[0].pageX;
slideWindow = parseInt($(window).width());
slideDrag = 0;
$('.slider').on('mousemove touchmove', function (e) {
slideMouseMove = e.pageX || e.originalEvent.touches[0].pageX;
slideDrag = (mouseStart - slideMouseMove) / slideWindow * 50;
});
});
$('.slider').on('mouseup touchend', function () {
$(document).off('mousemove touchmove');
if (slideDrag < 1) {
$('.prev').click();
}
if (slideDrag > 1) {
if (slideCount < slideQuant) {
$('.next').click();
}
}
});
function autoSlide() {
slideTime = setTimeout(function () {
$(".next").click();
}, 3000);
}
autoSlide();
});
Lembrando que precisa da biblioteca jquery e está funcional, apesar de ser só o rascunho do que será, só falta mesmo automatizar o responsivo.Discussão (1)
Carregando comentários...