WordPress. 如何禁用视差滑块的视差效果

本教程将展示如何禁用 parallax effect of the parallax slider 对于某个屏幕 resolution in WordPress模板.

WordPress. 如何禁用视差滑块的视差效果

首先，你要确保你的 slider is a parallax slider. 要做到这一点，你需要检查你的 slider 使用元素检查器工具(例如，FireBug或Google开发工具). If the slider 被包裹在 div 具有类的元素 parallax-slider，这是我们的情况:

为了禁用 parallax 效果，你应该执行以下操作:

1. 选择我们的更改将生效的屏幕宽度. 例如，让我们禁用 parallax 为屏幕宽度 1680px.



2. Open up the wordpress / wp-content /主题/ themeXXXXX /风格.css 文件并向下滚动到最底部. 在这里加上a media query 我们的窗口宽度为1680px. 该查询中的所有代码将仅在网站上查看时才能工作 browser 使用特定的窗口宽度.

   			@media only screen and (width: 1680px) {
   			//我们的代码放到这里
   			}
   		

3. 控件中添加以下代码 media query 这将禁用 parallax animation:

   			@media only screen and (width: 1680px) {
   			.parallax-slider #mainImageHolder {
   			变换:没有 !important;
   			}
   			}
   		

4. 添加以下代码，将更改幻灯片图像的尺寸，从而防止图像在顶部和底部边缘被切割:

   			@media only screen and (width: 1680px) {
   			.parallax-slider-img.obj-inner {
   			背景尺寸:100%自动 !important;
   			}
   			}
   		

5. 添加代码，将降低的高度 slider 面积，因为我们不再需要那么大了. 在此之前，我们需要计算 slider we need. 我们来算一下幻灯片的比例. 为此，我们将幻灯片图像的宽度除以它的高度. 在我们的情况下，它将是 1880 / 807 = 2.33. 然后我们将屏幕宽度除以比率: 1680 / 2.33 = 721px -这是我们想要的 slider height. 让我们为它编写一个规则:

   			@media only screen and (width: 1680px) {
   			.parallax-slider {
   			身高:721像素 !important;
   			}
   			}
   		

6. 将更改保存在 wordpress / wp-content /主题/ themeXXXXX /风格.css 文件并将其上传到服务器.

   结果应该是这样的:

   

请随时查看下面的详细视频教程:

WordPress. 如何禁用视差滑块的视差效果