如何從響應式設計中刪除滑塊

我是一位小企業主，他（至今）管理着一個成功的網站。如何從響應式設計中刪除滑塊

但是，隨着即將推出的Google Mobilegeddon，我的網站出於某種原因未通過Google移動友好測試（https://www.google.com/webmasters/tools/mobile-friendly/）。我相信這是由於滑塊，因爲當我禁用滑塊插件並將其刪除。該網站通過它。

該網站建立在使用催化劑/ Dynamik作爲兒童主題的WordPress。我用於滑塊的插件是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;}

我認爲這事做的最後一行。

我可以請求任何幫助，以幫助從移動/響應版本中刪除滑塊。

非常感謝您的幫助。 :)

來源

2015-04-19 Gary

我需要看看你的html也可以 - 我們可以查看網站直播/你有預覽嗎？ – AnnieMac

Sure AnnieMac。網址是rapidairconditioningbrisbane.com.au – Gary

剛回答那裏 – AnnieMac

有些作品不在上下文中，但如果您有權訪問編輯CSS，那麼這應該不成問題。我也不確定你的技能水平，所以我會假設你有接近零的編碼經驗。

首先你需要找到元素的選擇器。您可以使用Chrome或Firefox執行此操作，然後右鍵單擊滑塊並使用檢查元素。找到根元素並記下它的選擇器。看看「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選擇器和/或增加的增加優先的重要標誌！。

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

如果您正在使用Jetpack的插件，您還可以將樣式粘貼到自定義CSS樣式表，或者你也可以粘貼風格融入在/可溼性粉劑內容/主題/觸媒 - style.css文件主題/ style.css中。

來源

2015-04-19 19:40:09

您將需要使用媒體查詢來隱藏它。包含幻燈片的div類似乎是.soliloquy容器，以便增加以下到您的樣式表的底部

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

應該可以解決這個問題你 - 讓我知道，如果它不

來源

2015-04-19 19:52:50 AnnieMac

感謝AnnieMac和@dgilmore。儘管它會從響應版本中刪除滑塊，但當Google在測試中對其進行爬網時，它仍會顯示。 https://www.google.com/webmasters/tools/mobile-friendly/?url=http%3A%2F%2Frapidairconditioningbrisbane.com.au%2F 這很奇怪。我不知道爲什麼Google在運行移動友好測試時爲我呈現不同的響應/移動設計？ – Gary

我現在遠離我的電腦來檢查這個'從谷歌的角度'，但我會看幾個小時，如果沒有其他人得到它 - 抱歉的延遲 – AnnieMac

嘿，我只是現在檢查（抱歉等待），這是說，該網站現在是移動友好？也許最初谷歌仍然看到該網站的緩存版本？ https://www.google.com/webmasters/tools/mobile-friendly/?url=http%3A%2F%2Frapidairconditioningbrisbane.com.au%2F – AnnieMac

雖然這是完全可以接受的只是隱藏滑塊使用CSS媒體查詢，像這樣的手機：

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

值得一提的是，即使他們不顯示的圖像仍然會被加載。

如果你提出大型1100年至1920年像素寬的桌面映像，它會採取3g移動網絡上更長的加載，並在用戶上浪費的東西，他們不會看到他們的帶寬不公平的。

我會建議以下解決方案：

1）設定滑塊默認是隱藏的：

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

2）交換src屬性的所有圖像（ img）到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(); 

}

來源

2016-01-28 11:25:28 Kiee

如何從響應式設計中刪除滑塊

回答

相關問題