css SwiperJS滑块选项循环：false无法正常工作，滑块消失

大家好，我的SwiperJS滑块有问题，我使用videos和iframeAPI将视频写入html，但是当我希望我的幻灯片有一个循环选项视频消失时，有人能帮助我吗这里是示例代码，所以基本上在代码中，现在我有循环真选项，幻灯片视频根本不显示，但当你删除它时，一切都正常。为什么会发生这种情况？

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Video</title>

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
    
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css" />
    <script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
</head>
<body>
<!-- START SWIPERJS SLIDER -->
<style>
    .swiper {
        width: 100%;
        padding-top: 50px;
        padding-bottom: 50px;
        height: 100vh;
    }
    
    .swiper-slide,
    .pd-swiperjs-video-iframe {
        background-position: center;
        background-size: cover;
        width: 600px;
        height: 100%;
    }
    
    .swiper-slide img {
        display: block;
        width: 100%;
    }

    .swiper-button-prev,
    .swiper-button-next {
        background: #fff;
        padding: 10px;
        transition: all 0.3s;
        -webkit-transition: all 0.3s;
        width: 60px;
        height: 60px;
        box-sizing: border-box;
    }

    .swiper-button-next:after, .swiper-button-prev:after {
        font-size: 18px;
        color: #000;
    }
</style>

<div class="container">
    <div class="row">
        <div class="swiper mySwiper">
            <div class="swiper-wrapper">
            <div class="swiper-slide">
                <div id="player1"></div>
            </div>
            <div class="swiper-slide">
                <div id="player2"></div>
            </div>
            <div class="swiper-slide">
                <div id="player3"></div>
            </div>
            </div>
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
            <div class="swiper-pagination"></div>
        </div>
    </div>
</div>
<!-- END SWIPERJS SLIDER -->

<!-- Initialize Swiper -->
<script>
    var swiper = new Swiper(".mySwiper", {
      initialSlide: 1,
      effect: "coverflow",
      grabCursor: true,
      centeredSlides: true,
      slidesPerView: "auto",
      loop: true,
      coverflowEffect: {
        rotate: 50,
        stretch: 0,
        depth: 100,
        modifier: 1,
        slideShadows: true,
      },
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
      pagination: {
        el: ".swiper-pagination",
      },
    });

    var tag = document.createElement('script');
    tag.src = "https://www.youtube.com/iframe_api";

    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    var yt = [];
    function onYouTubeIframeAPIReady() {
        let w = '100%';
        let h = '100%';

        yt['player1'] = new YT.Player('player1', {
            width: w,
            height: h,
            videoId: '37cZyFIKHRQ',
        });
        yt['player2'] = new YT.Player('player2', {
            width: w,
            height: h,
            videoId: 'o3YIpredyNA',
            // Put this in order to start the video - We put this in second slider because we initialize the slider with second slide active
            events: {
                'onReady': onPlayerReady,
            },
        });
        yt['player3'] = new YT.Player('player3', {
            width: w,
            height: h,
            videoId: 'Fx-zmUwV1pc',
        });
    }

    function onPlayerReady(event) {
        event.target.mute();
        event.target.playVideo();
    }

    swiper.on('transitionStart', function(){
        yt['player1'].pauseVideo();
        yt['player2'].pauseVideo();
        yt['player3'].pauseVideo();
    });

    swiper.on('transitionEnd', function(){
        var index = this.realIndex;
        var slide = document.getElementsByClassName('swiper-slide')[index];
        var slideVideo = slide.getElementsByTagName('iframe')[0];
        var slideVideoId = slideVideo.getAttribute('id');

        if(slideVideo != null || slideVideo != undefined){
            yt[slideVideoId].mute();
            yt[slideVideoId].playVideo();
        }
    });
</script>
</body>
</html>

css SwiperJS滑块选项循环：false无法正常工作，滑块消失

1条答案

相关问题

热门标签

最新问答