Question

嘿，伙计们，希望你们过得愉快。

我遇到的问题几天来一直困扰着我。以下是我将如何描述它，如果您想要任何进一步的细节，请随时询问：

我试图为每张幻灯片使用两张图片，我只希望其中一张图片可见。当宽度小于800px时，我想将图像更改为另一个。我用简单的CSS实现了这一点。它有效，但存在问题。

当滑块突然滑动时，不应该看到的图像会显示在应该可见的图像下方，但一旦图像退出滚动它就会立即消失。

我不希望图像一起显示。我该如何解决这个问题？

我无法弄清楚jsFiddle是如何工作的，但这里有一些代码：

#twins7-0 {
	display: none;

}

#pizza13-0 {
	display: none;
}

#twins1-0 {
	display: none;
}

@media screen and (max-width: 800px) {

	#twins7-0 {
		display: block;
	}

	#twins7-1 {
		display: none;
	}
	#pizza13-0 {
		display: block;
	}

	#pizza13-1 {
		display: none;
	}

	#twins1-0 {
		display: block;
	}

	#twins1-1 {
		display: none;
	}

}

	<div class="slider-container">
		<div class="slider">
			<div class="slider-content">
				<div id="pizza">
					<img src="img/twins-stock/store-images/pizza13-1.jpg" alt="pizza" id="pizza13-1">
					<img src="img/twins-stock/store-images/pizza13.jpg" alt="pizza" id="pizza13-0">

				</div>
				<div class="slider-text" id="pizza-text">
					<h1>Pizza med färska råvaror</h1>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error id dignissimos ut?</p>
				</div>
			</div>
			<div class="slider-content">
				<div id="twins1">
					<img src="img/twins-stock/store-images/pizza12-1.jpg" alt="twins1" id="twins1-1">
					<img src="img/twins-stock/store-images/pizza12.jpg" alt="twins1" id="twins1-0">

				</div>
				<div class="slider-text" id="twins1-text">
					<h1>Pizza med färska råvaror</h1>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
				</div>
			</div>
			<div class="slider-content">
				<div id="twins7">
					<img src="img/twins-stock/store-images/twins7-1.jpg" alt="twins7" id="twins7-1">
					<img src="img/twins-stock/store-images/twins7.jpg" alt="twins7" id="twins7-0">
				</div>
				<div class="slider-text" id="twins6-text">
					<h1>Pizza med färska råvaror</h1>
					<p>Deserunt, quam, voluptate! Error id dignissimos ut? Dorro harum deleniti aliquam.</p>
				</div>
			</div>
		</div>
	</div>

Answer 1

首先，你应该使用类而不是许多个人id，它会让你的代码更加简化和易于管理！

话虽如此，我发现你的css规则可能被光滑的风格所覆盖。要正确覆盖它们，你可以重新安排你的css的优先级（也可以在你的css之后加载slick的css）或者你可以在你的css中更具体：here's a good article about that kind of thing。

这是我放在一起的JSFiddle：https://jsfiddle.net/kuxzs7sz/1/。您可以通过使用类来查看我已经能够删除多少css，它完全相同。为了安全起见，我还使用了媒体查询，以便第一张图像只显示在更大的屏幕上：

@media screen and (min-width: 801px) {
  .slick-slide img.big{
    display: block;

  }
  .slick-slide img.small {
    display: none;
  }
}

@media screen and (max-width: 800px) {
  .slick-slide img.big{
    display: none;
  }

  .slick-slide img.small {
    display: block;
  }
}

每张幻灯片使用两张图片时出现问题

1 个答案: