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

Posted 2021-04-12

美好的一天，

我做了一个相当可爱的光滑滑块。

在我使用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）时，页面将以漂亮的方式加载滑块。但是，当页面小于第一个断点时，将删除背景图像的内联样式。

这是因为光滑的滑块会删除内联样式吗？

最糟糕的情况 - 你们都得到了漂亮的光滑滑块入门套件......

谢谢你，杰森。

答案

我已经弄清楚发生了什么。输入响应式光滑设置时，它会删除内联样式。

要解决这个问题，我使用了以下代码：

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

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

希望我在我的情况下帮助了一些人。

谢谢你，杰森。