<div class="swiper-container" style="height: 100%">
    <div class="swiper-wrapper" style="height: 100%">
        <div id="slide-1" class="swiper-slide" style="height: 100%">
            <div class="w-slide1">
                <div class="slide-container">
                    <button id="close-wellcome" class="btn-voltar uppercase">Saltar</button>
                    <img src='img/wellcome/screen-01.png'>
                    <div class="wellcome-title">
                        <div style="font-size: 14px">Bem vindo à App</div>
                        <div class="uppercase" style="font-size: 18px">Seaside Lovers</div>
                    </div>

                    <div class="text-group">
                        Conheça todas as vantagens da nossa App
                    </div>
                </div>
            </div>
        </div>

        <div id="slide-2" class="swiper-slide" style="height: 100%">
            <div class="w-slide2">
                <div class="slide-container">
                    <button id="close-wellcome" class="btn-voltar uppercase">Saltar</button>
                    <img src='img/wellcome/screen-02.png'>
                    <div class="wellcome-title">
                        <div class="uppercase" style="font-size: 18px">consulta de saldos e transações</div>
                    </div>

                    <div class="text-group">
                        Acesso fácil ao <b>talão de compra</b><br />
                        Acesso fácil ao <b>vale reembolso</b>
                    </div>
                </div>
            </div>
        </div>

        <div id="slide-3" class="swiper-slide" style="height: 100%">
            <div class="w-slide3">
                <div class="slide-container">
                    <button id="close-wellcome" class="btn-voltar uppercase">Saltar</button>
                    <img src='img/wellcome/screen-03.png'>
                    <div class="wellcome-title">
                        <div class="uppercase" style="font-size: 18px">Ofertas & Descontos Exclusivos</div>
                    </div>

                    <div class="text-group">
                        Acesso a Promoções Exclusivas
                        da sua marca preferida
                    </div>
                    <div class="text-group">
                        Vantagens únicas nas suas
                        compras Online
                    </div>
                </div>
            </div>
        </div>

        <div id="slide-4" class="swiper-slide" style="height: 100%">
            <div class="w-slide4">
                <div class="slide-container">
                    <img src='img/wellcome/screen-04.png'>
                    <div class="wellcome-title">
                        <button id="close-wellcome" class="btn-usar uppercase">COMEÇAR A USAR</button>
                    </div>

                    <div class="text-group">
<b>Para começar basta registar-se
ou iniciar sessão com:</b>
                  </div>

                  <div class="text-group">
                      o seu email, o seu nº de telemóvel
ou associe o seu cartão tradicional
                  </div>
                </div>
            </div>
        </div>
    </div>

</div>


<div class="controller-wellcome">
    <div id="nav-slide-1" class="circle circle--active"></div>
    <div id="nav-slide-2" class="circle"></div>
    <div id="nav-slide-3" class="circle"></div>
    <div id="nav-slide-4" class="circle"></div>
</div>
<script>
$(function() {
    var swiperXPTO = new Swiper('.swiper-container');
    swiperXPTO.on('slideChangeTransitionEnd', function () {
         var id = $(".swiper-slide-active").attr("id");
        $(".controller-wellcome div").removeClass("circle--active");
        $(".controller-wellcome #nav-" + id).addClass("circle--active");
        });
<script>
});