eu gostaria de q qnd os sliders chegassem ao fim, voltasse para o primeiro slide. agradeço dsd já!
<!DOCTYPE html>
<html>
<head>
<title>Projeto 03</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400" rel="stylesheet">
<link href="css/style.css" rel="stylesheet" type="text/css">
<script src="jquery-3.7.0.min.js"></script>
<script src="script.js"></script>
<meta charset="utf-8" />
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0" />
</head>
<body>
<div class="part1">
<div class="wraper-part1">
<h2>Nosso time</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sagittis, risus ut tempus condimentum, urna est volutpat augue, a placerat ligula magna tincidunt sapien. Ut tempus pulvinar ante, at euismod orci commodo suscipit.</p>
</div>
</div><!--part1-->
<div class="part2">
<div class="scrollEquipe">
<div class="scroll-wraper">
<div class="sobre-autor">
<div class="titulo-autor">
<div class="wraper-titulo-autor">
<h2>Guilherme Grillo</h2>
<p>Co-Founder / Desenvolvedor</p>
</div><!--wraper-titulo-autor-->
<div class="img-autor"></div>
</div><!--titulo-autor-->
<div class="texto-autor">
<p>Proin sagittis, risus ut tempus condimentum, urna est volutpat augue, a placerat ligula magna tincidunt sapien.
Ut tempus pulvinar ante, at euismod orci.</p>
</div><!--texto-autor-->
</div><!--sobre-autor-->
<div class="sobre-autor">
<div class="titulo-autor">
<div class="wraper-titulo-autor">
<h2>Guilherme Grillo</h2>
<p>Co-Founder / Desenvolvedor</p>
</div><!--wraper-titulo-autor-->
<div class="img-autor"></div>
</div><!--titulo-autor-->
<div class="texto-autor">
<p>Proin sagittis, risus ut tempus condimentum, urna est volutpat augue, a placerat ligula magna tincidunt sapien.
Ut tempus pulvinar ante, at euismod orci.</p>
</div><!--texto-autor-->
</div><!--sobre-autor-->
<div class="sobre-autor">
<div class="titulo-autor">
<div class="wraper-titulo-autor">
<h2>Guilherme Grillo</h2>
<p>Co-Founder / Desenvolvedor</p>
</div><!--wraper-titulo-autor-->
<div class="img-autor"></div>
</div><!--titulo-autor-->
<div class="texto-autor">
<p>Proin sagittis, risus ut tempus condimentum, urna est volutpat augue, a placerat ligula magna tincidunt sapien.
Ut tempus pulvinar ante, at euismod orci.</p>
</div><!--texto-autor-->
</div><!--sobre-autor-->
</div>
</div>
<div class="slider-bullets">
<span style="background-color:#aaaaaa;"></span>
<span></span>
<span></span>
</div><!--slider-bullets-->
</div><!--part2-->
<div class="clear"></div>
</section><!--sessao3-->
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Open Sans";
}
html,body{
height: 100%;
}
.part2{
float: left;
width: 50%;
padding:140px 0 90px 0;
background: white;
}
.scrollEquipe{
max-width: 600px;
padding-left: 20px;
overflow: hidden;
}
.scroll-wraper{
width: 100%;
}
.sobre-autor{
float: left;
width: 100%;
padding: 0 20px;
}
.titulo-autor{
float: left;
width: 100%;
}
.wraper-titulo-autor{
float: left;
}
.titulo-autor h2{
color: #232323;
font-weight: 400;
font-size: 21px;
padding-right: 20px;
}
.titulo-autor p{
font-size: 13px;
color: #232323;
font-style: italic;
font-weight: 300;
}
.titulo-autor .img-autor{
float: left;
width: 40px;
height:40px;
background-image: url('../imagens/actor1.png');
background-size: 100% 100%;
border-radius: 20px;
background-color: transparent;
}
.texto-autor{
float: left;
width: 100%;
margin-top:10px;
}
.texto-autor p{
color: #232323;
font-size: 15px;
}
.slider-bullets{
width: 100%;
float: left;
padding-left: 40px;
margin-top:12px;
}
.slider-bullets span{
width: 16px;
height: 16px;
float: left;
margin-right: 8px;
cursor: pointer;
border-radius: 8px;
background-color: #c8c8c8;
}
$(function(){
var delay = 3000
var curIndex = 0
var qnt
initSlider()
autoPlay()
function initSlider(){
var qnt = $('.sobre-autor').length
var sizeContainer = 100 * qnt
var sizeBoxSingle = 100 / qnt
$('.sobre-autor').css('width', sizeBoxSingle+'%')
$('.scroll-wraper').css('width', sizeContainer+'%')
}
for(var i = 0; i < qnt; i++){
if(i == 0){
$('.slider-bullets').append('<span style="background-color:rgb(170,170,170);"></span>')
}
else{
$('.slider-bullets').append('<span></span>')
}
}
function autoPlay(){
setInterval(function(){
curIndex++
if(curIndex == qnt){
curIndex = 0
}
goToSlider(curIndex)
}, delay)
}
function goToSlider(curIndex){
var offSetX = $('.sobre-autor').eq(curIndex).offset().left - $('.scroll-wraper').offset().left
$('.slider-bullets span').css('background-color', '#c8c8c8')
$('.slider-bullets span').eq(curIndex).css('background-color', '#aaaaaa')
$('.scrollEquipe').stop().animate({'scrollLeft':offSetX+'px'})
}
$(window).resize(function(){
$('.scrollEquipe').stop().animate({'scrollLeft':0})
})
})