Slick Slider-使用php实施会导致背景图片错误

Question

Good day all,

I have made a rather cute slick-slider.

It works a treat before I make it utilise PHP and host it on my site.

  $(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> 

The example is only showing my HTML, JS, CSS version with my PHP version commented out.

I have then gone on to use ACF - Advanced Custom Fields within Wordpress and made the appropriate fields to generate an image url.

I then as illustrated in my commented out php code - set the background image.

The page will then load the slider beautifully when in full screen (larger than the first breakpoint - 1024px). However, will remove the inline-styles for the background-image when the page is made smaller than the first breakpoint.

Is this because slick slider removes inline styles?

Worst case scenario - you all get a beautiful slick slider starter kit...

Thanks, Jason.

Answer 1

I have figured out what is happening. When entering the responsive slick settings it removes inline-styles.

To work around this I have used this code:

<!-- 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 -->

This creates a style sheet that applies the background image to the relevant slide. Then goes on to create the slides that will be slicked.

Hope I have helped a few people in my situation.

Thanks, Jason.