javascript - Slick Slider - 使用 php 实现导致背景图像错误

Question

大家好，

我做了一个相当可爱的 slick-slider。

在我使用 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 版本已被注释掉。

然后我继续使用 ACF - Wordpress 中的高级自定义字段并创建适当的字段来生成图像 url。

然后我按照我注释掉的 php 代码中的说明 - 设置背景图像。

然后，页面将在全屏(大于第一个断点 - 1024 像素)时漂亮地加载 slider 。但是，当页面小于第一个断点时，将删除背景图像的内联样式。

这是因为光滑的 slider 移除了内联样式吗？

最坏的情况——你们都得到了一个漂亮的光滑 slider 入门套件...

谢谢，杰森。

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

这将创建一个将背景图像应用于相关幻灯片的样式表。然后继续创建要平滑的幻灯片。

希望我能帮助一些处于我的情况的人。

谢谢，杰森。