Как настроить фреймворк под свои нужды

---

Моя вступительная страница использует Swiperslider Framework7. Я хочу поставить кнопку "Готово" на то же место, что и swiper-arrow-next, но с теми же функциями, что и arrow-next. "Готово" должно быть заменено точно такой же стрелкой, как swiper-arrow-next (тот же стиль и размер), и она должна появляться только в конце слайдера, поэтому при нажатии на нее я должен войти в систему.
Существует полный html, css и js код;

    <div data-page="intro" class="page navbar-fixed toolbar-fixed">

    <!-- Content-->
    <div class="page-content">
        <!-- Slider container -->
        <div class="swiper-container">
            <!-- Slides wrapper -->
            <div class="swiper-wrapper">
                <!-- Slides -->
            </div>
            <!-- Pagination, if required -->
            <div class="swiper-pagination"></div>

            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>

            <!-- Skip/Done Buttons -->
            <span class="intro-button skip"><a href="login.html">Skip</a></span>
            <span class="intro-button done"><a href="login.html">Done</a></span>
        </div>
        <!-- /End of Slider container -->
    </div>

</div>



          div[data-page=intro] {
        .page-content {
            padding-top: 0 !important;
        }

        .swiper-container {
            height: 100%;
        }

        .swiper-slide {
            position: relative;
            width: 100%;
            height: 100%;
            background: #fff;
            text-align: center;

            img {
                max-width: 80%;
                margin-top: 20vh;
            }

            span {
                display: block;
                width: 100%;
                margin-top: 40px;
                padding: 0 15%;
                text-align: center;
                font-size: 20px;
                color: $color-brand-1;
            }
        }

        .swiper-button-next {
            > .done {
                display: none;
            }

            &.swiper-button-disabled {
                background-image: none;
                opacity: 1;
                pointer-events: auto;
                & + .intro-button + .done {
                    display: block;
                }
            }
        }

        .intro-button {
            position: absolute;
            bottom: 10px;
            font-size: 20px;
            color: $color-brand-1;
            cursor: pointer;
            z-index: 999;
            &.skip {
                left: 20px;
            }
            &.done {
                display: none;
                right: 20px;
            }
        }
    }

        .touchevents {
            .swiper-button-next,
            .swiper-button-prev {
                display: none;
            }

            .swiper-button-next.swiper-button-disabled {
                display: block;
            }
        }


   <pre lang="Javascript"> (function ($, document, window) {

                'use strict';

                // Now we need to run the code that will be executed only for Feature page.
                myApp.onPageInit('intro', function (page) {

                    var makeApiRequest = window.makeApiRequest;

                    // Display splash screen
                    splashScreen();

                    // Initiate Slider
                    makeApiRequest('sliders', null, 'GET', true).done(buildSlider).done(initiateSlider);

                    // build slider
                    function buildSlider(slidesArr) {
                        var slider = slidesArr.sliders;

                        var sliderHTML = '';

                        $.each(slider, function (i) {
                            sliderHTML += '<div class="swiper-slide">';
                            // images need to have proportion of 700x907
                            sliderHTML += '<img src="' + slider[i].image + '" />';
                            sliderHTML += '<span>' + slider[i].description + '</span>'
                            sliderHTML += '<div class="preloader"></div>';
                            sliderHTML += '</div>';
                        });

                        $('.swiper-wrapper').html(sliderHTML);
                    }

                    // show splash screen for 2 seconds
                    function splashScreen() {
                        var splashHTML = '<div class="splash-wrapper"><img src="images/splash.png" class="splash" /></div>';
                        $('#wrapper').prepend(splashHTML);

                        var hideSplash = function () {
                            $('.splash-wrapper').remove();
                        };

                        setTimeout(hideSplash, 2000);
                    }

                    // initiate framework7 slider
                    function initiateSlider() {

                        // initiate slider
                        var mySwiper = new Swiper('.swiper-container', {
                            speed: 400,
                            preloadImages: false,
                            lazyLoading: true,
                            pagination: '.swiper-pagination',
                            paginationHide: false,
                            paginationClickable: true,
                            nextButton: '.swiper-button-next',
                            prevButton: '.swiper-button-prev'
                        });

                        // disable swiping on desktop
                        if (!myApp.support.touch) {
                            $('.swiper-container').addClass('swiper-no-swiping');
                        }


                      }

                    });

        }(jQuery, document, window));

Что я уже пробовал:

Я теряюсь, когда пытаюсь изменить сделанное, чтобы быть стрелой... и положение ее

---