I have added sections witha background image each representing a project. I would like the website to have each section become a slider that contains an infinite loop of background images with an image on the cursor on 50% (left) and 50% (right) of the image to change image on click. then the user can scroll down to the next section, same thing. etc.

 <a href="#">
        <section style="background-image: url('/src/img/additiv_apparel_photography_4.jpg');  background-repeat: no-repeat;
    background-attachment: fixed;background-position: center center;
    background-size: cover;">
            <div class="center">
                <h1>additiv apparel</h1>
            </div>
        </section>
    </a>
    <a href="#">
        <section style="background-image: url('/src/img/ECAL_bachelor_thesis_The_working_ways_of_designers6739.jpg');  background-repeat: no-repeat;
        background-attachment: fixed;background-position: center center;
     
        background-size: cover;
        ">
            <div class="center">
                <h1>additiv apparel</h1>

            </div>
        </section>
    </a>
    <a href="#">
        <section style="background-image: url('/src/img/saplatte_sans_type_specimen2.png');  background-repeat: no-repeat;
        background-attachment: fixed;background-position: center center;;
        background-size: cover;">
            <div class="center">
                <h1>Saplatte Sans</h1>

            </div>
        </section>
    </a>
    <a href="#">
        <section style="background-image: url('/src/img/ERACOM_diploma_c6fa6d40859663.578fdcb7b9696.jpg');  background-repeat: no-repeat;
            background-attachment: fixed;background-position: center center;
            background-size: cover;">
            <div class="center">
                <h1>Diploma ERACOM</h1>

            </div>
        </section>
    </a>

    <a href="#">
        <section style="background-image: url('/src/img/Angelo_Barbattini_whole_scene.jpg');  background-repeat: no-repeat;
                background-attachment: fixed;background-position: center center;
                background-size: cover;">
            <div class="center">
                <h1>Diploma ECAL</h1>

            </div>
        </section>
    </a>

    <a href="#">
        <section style="background-image: url('/src/img/architecture_in_contexte_An_emotional_expierence_through_primark3.jpg');  background-repeat: no-repeat;
                    background-attachment: fixed;background-position: center center;
                    background-size: cover;">
            <div class="center">
                <h1>Diploma ECAL</h1>

            </div>
        </section>
    </a>

    <a href="#">
        <section style="background-image: url('/src/img/A-Z_le_26_one_chapter_per_alphabet_1_img_per_chapter5.jpg');  background-repeat: no-repeat;
                        background-attachment: fixed;background-position: center center;;
                        background-size: cover;">
            <div class="center">
                <h1>A-Z</h1>

            </div>
        </section>
    </a>

    <a href="#">
        <section style="background-image: url('/src/img/app_design_JE_EPFL.jpg');  background-repeat: no-repeat;
                            background-attachment: fixed;background-position: center center;
                            background-size: cover;">
            <div class="center">
                <h1>SportsApp</h1>

            </div>
        </section>
    </a>

    <a href="#">
        <section style="background-image: url('/src/img/b_app_design_JE_EPFL_.jpg');  background-repeat: no-repeat;
                                background-attachment: fixed;background-position: center center;
                                background-size: cover;">
            <div class="center">
                <h1>MeetmApp</h1>

            </div>
        </section>
    </a>

    <a href="#">
        <section style="background-image: url('/src/img/data_center_pollution_3.jpg');  background-repeat: no-repeat;
                                    background-attachment: fixed;background-position: center center;
                                    background-size: cover;">
            <div class="center">
                <h1>MeetmApp</h1>

            </div>
        </section>
    </a>

    <a href="#">
        <section style="background-image: url('/src/img/0.png');  background-repeat: no-repeat;
                                        background-attachment: fixed;background-position: center center;
                                        background-size: cover;
                                    
                                        ">
            <div class="center">
                <h1>Diplomma ECAL</h1>

            </div>
        </section>
    </a>

    <a href="#">
        <section style="background-image: url('/src/img/0.png');  background-repeat: no-repeat;
                                            background-attachment: fixed;background-position: center center;
                                            background-size: cover;
                                            mix-blend-mode: exclusion;
                                            ">
            <div class="center">
                <h1>Diploma ECAL</h1>

            </div>
        </section>
    </a>

    <a href="#">
        <section style="background-image: url('/src/img/0.png');  background-repeat: no-repeat;
                                            background-attachment: fixed;background-position: center center;
                                            background-size: cover;
                                            mix-blend-mode: exclusion;
                                            ">
            <div class="center">
                <h1>Diploma ECAL</h1>

            </div>
        </section>
    </a>

Don’t have clean solution