-3

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})
    })
})

0

Você deve fazer log-in para responder a esta pergunta.

Pesquise outras perguntas com a tag .