How to customize framework for your needs

See more:

Javascript

CSS

HTML

My intro page is using swiperslider Framework7. I want to put "Done" button on the same place as swiper-arrow-next, but with the same features as arrow-next. "Done" should be replace with exact same arrow like swiper-arrow-next (the same style and size) and it should appear only in the end of slider, so when clicked should take me to login.
There is complete html, css and js code;

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

What I have tried:

I'm getting lost when trying to change done to be an arrow... and position of it