This is the 15th day of my participation in the August More Text Challenge. For details, see:August is more challenging

BattleKing warehouse: Github, CodePen blog: CSDN, nuggets feedback email: [email protected] Special statement: original is not easy, shall not be reproduced without authorization or plagiarism, if you need to reprint can contact the author authorization

background

Double vertical slider: Refers to the page is divided into two and a half, general place image, the other half place pictures related information, such as images, image classification, image and so on the details, images and their corresponding presentation automatically round, text moves down, the picture moving up, at the same time, the background color on the left and right images theme color is the same, should create a stunning visual effects. Its main function is to show pictures and text, and the same as the carousel diagram, basically applicable to all and carousel diagram related scenarios. Advantages of double vertical slider

  1. Compared to the ordinary rotation diagram, the effect is more amazing, let a person shine
  2. Strong compatibility, compatible with most of the market browser
  3. Can place large amounts of text without blocking images

Faults of double vertical sliders

  1. If not widely recognized by the industry, it may not be adopted by Party A
  2. Because of the vertical up and down rotation design, the applicable scenarios are less than the ordinary rotation diagram
  3. Since the background color of the text on the left is the same as that of the image, the image may be limited to a large area of the same body color

The final result

1. Add HTML files

<div class="slider-container">
    <div class="left-slide">
        <div style="background-color: #FD3555">
            <h1>Nature flower</h1>
            <p>all in pink</p>
        </div>
        <div style="background-color: #2A86BA">
            <h1>Bluuue Sky</h1>
            <p>with it's mountains</p>
        </div>
        <div style="background-color: #252E33">
            <h1>Lonely castle</h1>
            <p>in the wilderness</p>
        </div>
        <div style="background-color: #FFB866">
            <h1>Flying eagle</h1>
            <p>in the sunset</p>
        </div>
    </div>
    <div class="right-slide">
        <div
            style="background-image: The url (' https://images.unsplash.com/photo-1508768787810-6adc1f613514?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=e27f6661df2 1ed17ab5355b28af8df4e&auto=format&fit=crop&w=1350&q=80')">
        </div>
        <div
            style="background-image: The url (' https://images.unsplash.com/photo-1519981593452-666cf05569a9?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=90ed8055f06 493290dad8da9584a13f7&auto=format&fit=crop&w=715&q=80')">
        </div>
        <div
            style="background-image: The url (' https://images.unsplash.com/photo-1486899430790-61dbf6f6d98b?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=8ecdee5d1b3 ed78ff16053b0227874a2&auto=format&fit=crop&w=1002&q=80')">
        </div>
        <div
            style="background-image: The url (' https://images.unsplash.com/photo-1510942201312-84e7962f6dbb?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=da4ca7a7800 4349f1b63f257e50e4360&auto=format&fit=crop&w=1050&q=80')">
        </div>
    </div>
    <div class="action-buttons">
        <button class="down-button">
            <i class="fas fa-arrow-down"></i>
        </button>
        <button class="up-button">
            <i class="fas fa-arrow-up"></i>
        </button>
    </div>
</div>
Copy the code

Add CSS files

  1. Set up the* 为 box-sizing: border-box
  2. Set up thebodyTo center the project
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    height: 100vh;
}
Copy the code

The main CSS code

.slider-container {
    position: relative;
    overflow: hidden;
    width: 100vw;
    height: 100vh;
}

.left-slide {
    height: 100%;
    width: 35%;
    position: absolute;
    top: 0;
    left: 0;
    transition: transform 0.5 s ease-in-out;
}

.left-slide>div {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.left-slide h1 {
    font-size: 40px;
    margin-bottom: 10px;
    margin-top: -30px;
}

.right-slide {
    height: 100%;
    position: absolute;
    top: 0;
    left: 35%;
    width: 65%;
    transition: transform 0.5 s ease-in-out;
}

.right-slide>div {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    height: 100%;
    width: 100%;
}

button {
    background-color: #fff;
    border: none;
    color: #aaa;
    cursor: pointer;
    font-size: 16px;
    padding: 15px;
}

button:hover {
    color: # 222;
}

button:focus {
    outline: none;
}

.slider-container .action-buttons button {
    position: absolute;
    left: 35%;
    top: 50%;
    z-index: 100;
}

.slider-container .action-buttons .down-button {
    transform: translateX(-100%);
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.slider-container .action-buttons .up-button {
    transform: translateY(-100%);
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}
Copy the code

Add JS file

The main logic

const sliderContainer = document.querySelector('.slider-container')
const slideRight = document.querySelector('.right-slide')
const slideLeft = document.querySelector('.left-slide')
const upButton = document.querySelector('.up-button')
const downButton = document.querySelector('.down-button')
const slidesLength = slideRight.querySelectorAll('div').length

let activeSlideIndex = 0

slideLeft.style.top = ` -${(slidesLength - 1) * 100}vh`

upButton.addEventListener('click'.() = > changeSlide('up'))
downButton.addEventListener('click'.() = > changeSlide('down'))

const changeSlide = (direction) = > {
    const sliderHeight = sliderContainer.clientHeight
    if (direction === 'up') {
        activeSlideIndex++
        if (activeSlideIndex > slidesLength - 1) {
            activeSlideIndex = 0}}else if (direction === 'down') {
        activeSlideIndex--
        if (activeSlideIndex < 0) {
            activeSlideIndex = slidesLength - 1
        }
    }

    slideRight.style.transform = `translateY(-${activeSlideIndex * sliderHeight}px)`
    slideLeft.style.transform = `translateY(${activeSlideIndex * sliderHeight}px)`
}
Copy the code

❤️ Thank you all

If this post is helpful to you, give it a thumbs-up. Your thumbs-up are my motivation.

If you like this post, you can “like” + “bookmark” + “forward” to more friends.