从 'active' 幻灯片上的数据属性获取文本并使用其值更新 p 标签

Question

我已经尝试（但失败了） 写了一些 javascript 从轮播的 'active' 幻灯片中获取 data-attribute ，然后将相同的文本添加到容器外的 p 标记中。当旋转木马获得新的 'active' 幻灯片时，文本应该会发生变化 - 如果可能会稍微淡化。

我不希望标题出现在轮播中，overflow: hidden 阻止我在幻灯片中添加标题，然后使用 absolute.

将其定位在幻灯片之外

如果更简单，我可以从幻灯片中的 p 而不是 data- 获取文本。然后将文本隐藏在其中。

这是我的尝试：

var caption = document.querySelector(".caption");

if(document.querySelector(".swiper-slide").classList.contains("swiper-slide-active")){
    console.log(this.getAttribute('data-caption'));
    caption.innerHTML('data-caption');
}

我发现了一个使用相同旋转木马的 CodePen，所以我想我会添加一个基本示例来检查当活动幻灯片中的 class 为 added/removed 时会发生什么。

代码笔：https://codepen.io/moy/pen/OJOyGKR

在此先感谢，希望有人能告诉我哪里出错了。渴望更多地了解 JS！

Answer 1

Swiper JS, Events Docs 具有有用的 事件方法 ，如 init、slideChange 等，它们是 选项的一部分 on 对象.

创建此类事件回调函数是为了在 Swiper 执行内部更改后触发所需的功能。这是一种表达方式：“当你这样做时，让我也这样做”

你的 JS 应该是这样的：

const EL_caption = document.querySelector(".caption");

function doSomethingWithActiveSlide() {
    const EL_currentSlide = this.slides[this.activeIndex - 1];    
    EL_caption.innerHTML = EL_currentSlide.dataset.caption;
}

const MySwiper = new Swiper('.swiper-container', {
    loop: true,
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
    pagination: {
        el: '.swiper-pagination',
    },
    // Events
    on: {
        init: doSomethingWithActiveSlide,
        slideChange: doSomethingWithActiveSlide,
    }
});

Answer 2

只需用这个替换你的“错误代码”

var caption = document.querySelector(".caption");
Swipes.on('slideChange', function () {
    this.slides[this.activeIndex].dataset.caption;
});

Answer 3

您可以为此使用 activeIndexChange 事件，可在以下位置找到： https://swiperjs.com/swiper-api#event-activeIndexChange

var caption = document.querySelector(".caption");

var Swipes = new Swiper('.swiper-container', {
    loop: true,
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
    pagination: {
        el: '.swiper-pagination',
    },
    on: {
        
        init: function() {
          updateCaptionText(this); 
        },
        activeIndexChange: function() {
            updateCaptionText(this);
        }
    }
});

function updateCaptionText(slider) {
    caption.textContent = slider.slides[slider.activeIndex].dataset.caption
}

// external css https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.3/css/swiper.css
// tat for styling is from line 50 >

.swiper-container {
    width: 100%;
}

.swiper-slide {
    background-size: cover;
    background-position: 50%;
    min-height: 20vh;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.caption {
    background: red;
    position: fixed;
    top: 0;
    left: 0;
    text-align: center;
    width: 100%;
    z-index: 10000;
}

// overwrite swiper defaults
.swiper-pagination {
    &-bullet {
        background-color: transparent;
        border: 2px solid #fff;
        border-radius: 50%;
        width: 12px;
        height: 12px;
        opacity: 1;
    }

    &-bullet-active {
        background-color: #fff;
    }
}

.swiper-button {
    &-container {
        background-color: rgba(0, 0, 0, 0.25);
    }
    &-prev {
        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");
    }
    &-next {
        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");
    }
}

// GENERIC STUFF TO MAKE IT POP 
body {
    display: flex;
    height: 100vh;
    width: 100%;
    font-family: "San Francisco Display Semibold";
}
.swiper-slide {
    &:before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: black;
        opacity: 0.4;
    }
    h2 {
        pointer-events: none;
        opacity: 0;
        color: #ffffff;
        font-size: calc(5vw);
        letter-spacing: -1px;
        transform: translateY(-5%) scale(0.8);
        transition: 1s ease;
        text-transform: uppercase;
        text-shadow: 0 5px 5px rgba(0, 0, 0, 0.01);
    }
    &-active h2 {
        opacity: 1;
        transform: translateY(0%) scale(1);
        transition: 1s ease;
    }
}

// This gets in apple san francisco web font 

@font-face {
    font-family: "San Francisco Display Semibold";
    font-style: normal;
    font-weight: 400;
    src: url(https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-semibold-webfont.eot?#iefix)
            format("embedded-opentype"),
        url(https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-semibold-webfont.woff2)
            format("woff2"),
        url(https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-semibold-webfont.woff)
            format("woff"),
        url(https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-semibold-webfont.ttf)
            format("truetype"),
        url("fonts/sanfrancisco/sanfranciscodisplay-semibold-webfont.svg#San Francisco Display Semibold")
            format("svg");
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.3/css/swiper.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.3/js/swiper.js"></script>
<div class="swiper-container">
    
    <!-- swiper slides -->
    <div class="swiper-wrapper">
        <div class="swiper-slide" data-caption="text caption one" style="background-image: url(https://source.unsplash.com/random?sig=24);">
            <h2>Slide One</h2>
        </div>
        
        <div class="swiper-slide" data-caption="text caption two" style="background-image: url(https://source.unsplash.com/random?sig=53);"> 
            <h2>Slide Two</h2>
        </div>
        
        <div class="swiper-slide" data-caption="text caption three" style="background-image: url(https://source.unsplash.com/random?sig=52);">
            <h2>Slide Three</h2>
        </div>
   
    </div>
    <!-- !swiper slides -->
    
    <!-- next / prev arrows -->
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
    <!-- !next / prev arrows -->
    
    <!-- pagination dots -->
    <div class="swiper-pagination"></div>
    <!-- !pagination dots -->
</div>

<p class="caption">Text Updates Here</p>

从 'active' 幻灯片上的数据属性获取文本并使用其值更新 p 标签

Get text from data attribute on 'active' slide and update p tag with its value

html

javascript

jquery

custom-data-attribute

swiperjs