Slick Slider-使用php實施會導致背景圖片錯誤

Question

大家好

我做了一個相當可愛的光滑滑塊。

在我利用PHP並將其托管在我的網站上之前，它可以正常工作。

  $(function() { //console.log( "ready!" ); // SLIDER console.clear(); var carousels = $('.funky-slider'); var config = { dots: true, arrows: false, infinite: true, speed: 700, autoplay: false, autoplaySpeed: 5000, slidesToShow: 3, slidesToScroll: 1, swipeToSlide: true, pauseOnHover: false, responsive: [ { breakpoint: 1024, settings: { slidesToShow: 2 } }, { breakpoint: 767, settings: { slidesToShow: 1 } } ] }; carousels.slick(config); carousels.on('breakpoint', function(slick) { carousels.slick('setPosition'); // console.log(slick.currentTarget.slick); var count = slick.currentTarget.slick.slideCount; var show = slick.currentTarget.slick.options.slidesToShow; if (show >= count) { carousels.slick('unslick'); } }); carousels.on('destroy', function() { carousels.slick(config); }); // END SLIDER }); 

  /* FUNKY SLIDER */ /* FUNCTIONAILTY */ .funky-slider, .slick-track, .funky-slide { height: 400px; } .funky-slide { background-size: cover; background-position: center; background-repeat: no-repeat; } .funky-slider .slick-slide { outline: none; } .funky-slider .slick-dots { width: 100%; height: 2rem; margin: 0; padding: 0.5rem 0; display: flex; align-items: center; justify-content: center; list-style-type: none; position: absolute; bottom: 0; } .funky-slider .slick-dots li { width: auto; height: auto; margin: 0 0.25rem; } .funky-slider .slick-dots button { display: block; width: 1rem; height: 1rem; padding: 0; border: 1px solid white; border-radius: 100%; background-color: #db3c36; color: transparent; -webkit-transition: width 0.5s, height 0.5s; /* Safari */ transition: width 0.5s, height 0.5s; outline: none; } .funky-slider .slick-dots li.slick-active button { background-color: #241f21; width: 1.6rem; height: 1.6rem; } /* END FUNCTIONAILTY */ /* FUNKY SLIDER */ 

 <link rel="stylesheet" type="text/css" href="https://kenwheeler.github.io/slick/slick/slick.css"/> <!-- HTML --> <div class="funky-slider-container"> <div class="funky-slider"> <div class="funky-slide" style="background-image: url('https://usercontent2.hubstatic.com/12593011_f520.jpg')"> Hello! </div> <div class="funky-slide"> Hello! </div> <div class="funky-slide"> Hello! </div> <div class="funky-slide"> Hello! </div> <div class="funky-slide"> Hello! </div> <div class="funky-slide"> Hello! </div> <div class="funky-slide"> Hello! </div> <div class="funky-slide"> Hello! </div> <div class="funky-slide"> Hello! </div> <div class="funky-slide"> Hello! </div> </div> </div> <!-- END HTML --> <!-- PHP SLIDER <?php $funky_slider = get_field('funky_slider'); ?> <?php if( $funky_slider ) : ?> <section id="funky-slider" class="funky-slider-section"> <div class="funky-slider"> <?php while( have_rows('funky_slider') ): the_row(); $funky_slider_image = get_sub_field('funky_slider_image'); ?> <div class="funky-slide" style="background-image: url('<?php echo $funky_slider_image['url'] ?>')"></div> <?php endwhile; ?> </div> </section> <?php endif; ?> --> <!-- END PHP SLIDER --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script type="text/javascript" src="https://kenwheeler.github.io/slick/slick/slick.min.js"></script> 

該示例僅顯示我的HTML，JS和CSS版本，而我的PHP版本已被注釋掉。

然后，我繼續在Wordpress中使用ACF-高級自定義字段，並設置了適當的字段來生成圖像url。

然后，如我注釋掉的php代碼所示-設置背景圖像。

在全屏（大於第一個斷點-1024px）時，頁面將漂亮地加載滑塊。 但是，當頁面小於第一個斷點時，將刪除背景圖像的內聯樣式。

這是因為光滑的滑塊會刪除嵌入式樣式嗎？

最壞的情況-大家都會得到一個漂亮的光滑滑塊入門套件...

謝謝，傑森。

Answer 1

我已經知道發生了什么事。 輸入響應式滑動設置時，它將刪除內聯樣式。

要解決此問題，我使用了以下代碼：

<!-- SLIDER -->
<?php
    $funky_slider = get_field('funky_slider');
?>
<?php if( $funky_slider ) : ?>

    <!-- generate image css -->
    <style>
        <?php
            $count = 1;
            while( have_rows('funky_slider') ): the_row();
            $funky_slider_image = get_sub_field('funky_slider_image');
        ?>

            .slick-slide:nth-of-type(<?php echo $count ?>) .funky-slide {
                background-image: url('<?php echo $funky_slider_image['url'] ?>');
            }

            <?php $count++; ?>

        <?php endwhile; ?>
    </style>
    <!-- END generate image css -->

    <!-- generate slider -->
    <section id="funky-slider" class="funky-slider-section">
        <div class="funky-slider">
            <?php
                while( have_rows('funky_slider') ): the_row();
            ?>

                <div class="funky-slide">
                </div>

            <?php endwhile; ?>
        </div>
    </section>
    <!-- END generate slider -->
<?php endif; ?>
<!-- END SLIDER -->

這將創建一個樣式表，將背景圖像應用於相關的幻燈片。 然后繼續創建將滑動的幻燈片。

希望我對我的情況有所幫助。

謝謝，傑森。