如何从响应式设计中删除滑块答案

【问题标题】：How To Remove a Slider from Responsive Design如何从响应式设计中删除滑块
【发布时间】：2015-06-26 08:05:31
【问题描述】：

我是一个小企业主，（到目前为止）管理着一个成功的网站。

但是，由于未决的 Google Mobilegeddon，我的网站由于某种原因未通过 Google 移动友好测试 (https://www.google.com/webmasters/tools/mobile-friendly/)。我相信这是由于滑块，当我禁用滑块插件并将其删除时。网站通过了。

该网站是在 WordPress 中构建的，使用 Catalyst/Dynamik 作为子主题。我用于滑块的插件是 Soliloquy。我已经尝试了很多不同的滑块，所以现在我只想取出响应式/移动版本的滑块。

我将这个作为响应式面板中的代码：

#header-wrap {background:none !important;}
.logo-image #header-wrap #header {width:100%;text-align:center;}
.logo-image #header #header-left {width:200px;background:url('images/air-conditioning-brisbane.png') no-repeat scroll center top transparent;margin:0 auto !important;}
.logo-image #header-left, .logo-image #header-left #title, .logo-image #header-left #title a {width:200px;}
#callus {margin-top:5px;margin-bottom:5px;}
.slider-wrapper, #soliloquy {display:none;}

我认为这与最后一行有关。

我可以请求任何帮助以帮助从移动/响应版本中删除滑块。

非常感谢您的帮助。 :)

【问题讨论】：

我还需要查看您的 html - 我们可以实时查看该网站/您可以预览一下吗？
当然是安妮麦克。网址是 rapidairconditioningbrisbane.com.au

标签： jquery html css wordpress slider

【解决方案1】：

虽然使用像这样的 css 媒体查询简单地隐藏手机的滑块是完全可以接受的：

@media screen and (max-width: 768px) {
 .your-slider-container {
    display: none;
 }
}

值得注意的是，即使图像没有显示，它们仍然会被加载。

如果您要提供 1100 到 1920 像素宽的大型桌面图像，则在 3g 移动网络上加载需要更长的时间，并且对于用户将带宽浪费在他们看不到的东西上是不公平的。

我会推荐以下解决方案：

1) 将滑块默认设置为隐藏：

.your-slider-container {display: none;}

2) 将滑块中所有图像 (img) 的 src 属性交换为 data-src，以便在页面加载时不请求图像；如果屏幕大于您想要的尺寸，则使用以下 Javascript 调用图像。

if (window.innerWidth >= 768) {

    var slider = $('.your-slider-container');

    slider.find('img').each(function() {
        $(this).attr('src', $(this).data('src'));
    }); //load images

    slider.sliderPluginName(slider_options); //call slider
    slider.show();

}

【讨论】：

【解决方案2】：

您需要使用媒体查询来隐藏它。包含幻灯片的 div 类似乎是 .soliloquy-container 因此将以下内容添加到样式表的底部

@media screen and (max-width: 768px) {
 .soliloquy-container {
    display: none;
 }
}

这应该可以为您解决问题 - 如果没有，请告诉我

【讨论】：

感谢 AnnieMac 和 @dgilmore。虽然它确实从响应版本中删除了滑块，但当 Google 在测试中抓取它时它仍然会出现。 google.com/webmasters/tools/mobile-friendly/… 很奇怪。我不知道为什么 Google 在运行移动友好测试时会呈现与我不同的响应式/移动设计？
我现在离开我的电脑，以“从谷歌的角度”查看此内容，但如果没有其他人看到，我会在几个小时内查看 - 抱歉耽搁了跨度>
嘿，我刚刚检查了这个（抱歉等待），它是说网站现在是移动友好的？也许最初谷歌仍然看到该网站的缓存版本？ google.com/webmasters/tools/mobile-friendly/…

【解决方案3】：

这里有些片段与上下文无关，但如果您有权编辑 CSS，那么这应该不是问题。我也不确定你的技能水平，所以我假设你的编码经验接近于零。

首先你需要找到元素的选择器。您可以使用 Chrome 或 Firefox 并右键单击滑块并使用 Inspect Element 来执行此操作。找到根元素并注意它是选择器。查看“class”和“id”属性（如果存在）。最好抓住身份证。 CSS 文件应如下所示：

/* up to wide mobile */
@media screen and (max-width: 768px) {
    /* using the ID of the element */
    #my-slider {
        display: none;
    }

    /* using the class of the element */
    .my-slider {
        display: none;
    }
}

如果它在移动设备上仍未隐藏，可能是因为优先级，您可以通过向 CSS 选择器添加更多父级和/或添加 !important 标志来提高优先级。

body .my-slider {
    display: none !important;
}

如果您使用的是 Jetpack 插件，您还可以将样式粘贴到自定义 CSS 样式表中，或者您也可以将样式粘贴到 /wp-content/themes/catalyst-theme/style 中的 style.css 文件中。 .

【讨论】：