비전공자 개발일기

Vertical Carousel 본문

Javascript

Vertical Carousel

HiroDaegu 2022. 9. 19. 21:55
728x90
SMALL

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>VERTICAL CAROUSEL</title>
    <link rel="stylesheet" href="style.css">
    <script defer src="main.js"></script>
</head>
<body>
    <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>
</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();
})();
728x90
LIST

'Javascript' 카테고리의 다른 글

Stopwatch  (0) 2022.09.27
Image Color Picker  (0) 2022.09.24
Drum Kit 2  (0) 2022.09.18
Neomorphic Analog Clock  (0) 2022.09.16
Copy To Clipboard  (0) 2022.09.11
'Javascript' Related Articles more