Cacher is the code snippet organizer for pro developers

$(document).ready(function () {
    $('#forward').on('click', function () {
        var activeCard = $('.active_card')
        var nextCard = activeCard.next()
        var activePoint = $('.active_point')
        var nextPoint = activePoint.next()
        if (nextCard.length === 0) {
            nextCard = $('#card').first();
            nextPoint = $('#point').first();
        }
        else {};
        activeCard.fadeOut(0).removeClass('active_card');
        nextCard.fadeIn(100).addClass('active_card');
        activePoint.removeClass('active_point');
        nextPoint.addClass('active_point');
    });
    $('#back').on('click', function () {
        var activeCard = $('.active_card')
        var lastCard = activeCard.prev()
        var activePoint = $('.active_point')
        var lastPoint = activePoint.prev()
        if (lastCard.length === 0) {
            lastCard = $('div div#card').last();
            lastPoint = $('div div#point').last();
        }
        else {};
        activeCard.fadeOut(0).removeClass('active_card');
        lastCard.fadeIn(100).addClass('active_card');
        activePoint.removeClass('active_point');
        lastPoint.addClass('active_point');
    });
});

.cards {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
    min-height: 600px
}

#card {
    width: 50%;
    max-width: 500px;
    min-width: 300px;
    min-height: 450px;
    max-height: 500px;
    margin-top: 60px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    background-color: gray;
    display: none;
    text-align: center;
}

.slider {
    display: flex;
    flex-direction: column;
}

.slider_arrow {
    height: 20px;
    cursor: pointer;
}

#point {
    height: 10px;
    width: 10px;
    background-color: black;
    border-radius: 100px;
    margin: 5px;
    cursor: pointer;
    ;
}

.points {
    display: flex;
    justify-content: center;
    align-items: center;
}

.slider_navigation {
    width: 20%;
    position: relative;
    margin: auto;
    margin-top: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#forward {
    transform: rotate(180deg);
}

.active_card#card {
    display: block
}

.active_point#point {
    background-color: #EBEBEB;
    width: 15px;
    height: 15px;
}

    <div class="slider">
        <div class="cards">
            <div class="active_card" id="card"><p>A</p></div>
            <div id="card"><p>B</p></div>
            <div id="card"><p>C</p></div>
            <div id="card"><p>D</p></div>
            <div id="card"><p>E</p></div>
            <div id="card"><p>F</p></div>
        </div>
        <div class="slider_navigation"> <img src="images/slider_arrow.svg" class="slider_arrow" id="back">
            <div class="points">
                <div class="active_point" id="point"></div>
                <div id="point"></div>
                <div id="point"></div>
                <div id="point"></div>
                <div id="point"></div>
                <div id="point"></div>
            </div> <img src="images/slider_arrow.svg" class="slider_arrow" id="forward"> </div>
    </div>