<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Slider</title>
</head>
<body>


<link rel="stylesheet" href="slider.css">

<section class="slider">

    <div class="content_container">

        <h1>Content Container</h1>

        <p>Cillum laborum reprehenderit dolor tempor ullamco veniam in veniam mollit ex minim id anim dolore cillum.</p>

        <ul class="slide_navigation">
            <li><a href="#slide_1" class="active">Slide 1</a></li>
            <li><a href="#slide_2">Slide 2</a></li>
            <li><a href="#slide_3">Slide 3</a></li>
        </ul>
    </div>


    <div class="slides">
        <div class="slide">
            <div class="inner_content">
                <h1>Slide 1</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
        </div>

        <div class="slide">
            <div class="inner_content">
                <h1>Slide 2</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
        </div>

        <div class="slide">
            <div class="inner_content">
                <h1>Slide 3</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
        </div>
    </div>
</section>

<script src="slider.js"></script>

</body>
</html>
body{
    justify-content: center;
    font-family: sans-serif;
    align-items: center;
    display: flex;
    height: 100vh;
    margin: 0;
    padding: 0 40px;
}

p{
    line-height: 1.4;
}

a{
    color: inherit;
}

ul{
    list-style: none;
    padding: 0;
}

ul > * + *{
    margin-top: 10px;
}

li{
    display: block;
}

li a.active{
    font-weight: bold;
}

.slider{
    background-color: teal;
    max-width: 1400px;
    color: #fff;

    grid-template-columns: 35% 65%;
    position: relative;
    display: grid;

}

.slider .content_container{
    padding: 40px;
}

.slider .slides{
    overflow-y: auto;
    max-height: 500px;
    scrollbar-width: none;
}

.slider .slides::-webkit-scrollbar{
    display: none;
}

.slider .slides .slide{
    min-height: calc(100% - 80px);
    background-color: skyblue;
    display: flex;
    padding: 40px;
    color: #333;
    align-items: center;
}

.slider .slides .slide:nth-child(even){
    background-color: palegreen;
}
(function () {
    "use strict";

    // Vertical Slider object
    const vertical_slider = {

        // Slide class name
        slider_class: ".slider",

        // Show slide
        show_slide: function (slide_id, context_item) {
            const slide_container = context_item.closest(this.slider_class).querySelector(".slides");
            if (slide_container) {
                const slides = slide_container.querySelectorAll(".slide");
                if (slides && slides[slide_id]) {

                    // Scroll to active slide
                    slide_container.scrollTo({
                        top: slides[slide_id].offsetTop,
                        behavior: "smooth"
                    });


                    // Set active context item
                    const active_context_item = context_item.closest(".slide_navigation").querySelector(".active");
                    if (active_context_item) {
                        active_context_item.classList.remove("active");
                    }

                    context_item.classList.add("active");
                }
            }
        },

        // Initialize slide
        init_slider: function (slider) {

            const navigation_items = slider.querySelectorAll(".slide_navigation a");

            if (navigation_items) {
                Object.keys(navigation_items).forEach(function (key) {
                    navigation_items[key].onclick = function (e) {
                        e.preventDefault();

                        vertical_slider.show_slide(key, navigation_items[key]);
                    };
                });
            }

        },

        // Initialize sliders
        init: function () {

            // Iterate over each slider
            document.querySelectorAll(this.slider_class).forEach((slider) => this.init_slider(slider));

        }
    };

    // Initialize sliders
    vertical_slider.init();
}());

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.