Title: High Performance CSS Only Slider
Author: Speznat
Published: <strong>2020 年 8 月 2 日</strong>
Last modified: 2020 年 8 月 2 日

---

搜索插件

![](https://ps.w.org/high-performance-css-slider/assets/banner-772x250.jpg?rev=2351212)

**该插件尚未通过WordPress的最新3个主要版本进行测试**。 当与较新版本的WordPress一起
使用时，可能不再受到维护或支持，并且可能会存在兼容性问题。

![](https://ps.w.org/high-performance-css-slider/assets/icon-256x256.jpg?rev=2351212)

# High Performance CSS Only Slider

 作者：[Speznat](https://profiles.wordpress.org/speznat/)

[下载](https://downloads.wordpress.org/plugin/high-performance-css-slider.zip)

 * [详情](https://cn.wordpress.org/plugins/high-performance-css-slider/#description)
 * [评价](https://cn.wordpress.org/plugins/high-performance-css-slider/#reviews)
 * [开发进展](https://cn.wordpress.org/plugins/high-performance-css-slider/#developers)

 [支持](https://wordpress.org/support/plugin/high-performance-css-slider/)

## 描述

Its a High Performance CSS only slider, That is Optimized to the Max possible.
 
The CSS of the Slider only gets loaded in if the Shortcode is used on that page,
so other pages without that slider dont suffer performance issues. The CSS is just
2.2 Kb in Size.

In Google Lighthouse the slider have:
 100% In Performance 100% in Best practices
100% in Accessibility and 99% in SEO

How it should be used:
 2-5 Images that have the SAME size, the image sizes and 
repsonsive look depends on where you place the shortcode of the slider. and they
should be in jpg format, for the best performance possible. Its Optimized for a 
max of 5 Slides only, dont use more. Also non minified version of the CSS is in 
the Plugin folder if you want to Style it yourself, but please use a minifier too.

### HPCSS Slider Installation and Usage

This Instructions are in Pictures explained but here short in text form:

 1. Upload ‘hpcss_slider’ to the wordpress admin
 2. Activate the plugin through the ‘Plugins’ menu in WordPress
 3. Open hpcss_slider and add a slide
 4. insert the image gallery using ‘add media’ button
 5. Select “Create Gallery” on the far left than pick your items and click on save
 6. Take the shortcode from the overview page
 7. Place it anywhere on your page
 8. Add Title and Meta Description to the Images than they will appear. (in the description
    field of the image you can also ad html)

## 屏幕截图

 * [[
 * Slider Preview
 * [[
 * Slider on website with content
 * [[
 * Performance Test
 * [[
 * Features Explained
 * [[
 * Features Explained
 * [[
 * How to Use Step 1
 * [[
 * How to Use Step 2
 * [[
 * How to Use Step 3
 * [[
 * How to Use Step 4
 * [[
 * How to Use Step 5
 * [[
 * How to Use Step 6
 * [[
 * How to Use Step 7
 * [[
 * Mobile Example
 * [[
 * Mobile Example

## 常见问题

### Can I use unlimited slides?

no please only use max of 5

### What about image format?

If you place the Slider Shortcode than it will use the full width on the element
above. The Images will be adjusted to that format. Please use only images of the
the same size in the slider.

## 评价

此插件暂无评价。

## 贡献者及开发者

「High Performance CSS Only Slider」是开源软件。 以下人员对此插件做出了贡献。

贡献者

 *   [ Speznat ](https://profiles.wordpress.org/speznat/)

「High Performance CSS Only Slider」插件已被翻译至 1 种本地化语言。 感谢[所有译者](https://translate.wordpress.org/projects/wp-plugins/high-performance-css-slider/contributors)
为本插件所做的贡献。

[帮助将「High Performance CSS Only Slider」翻译成简体中文。](https://translate.wordpress.org/projects/wp-plugins/high-performance-css-slider)

### 对开发感兴趣吗?

您可以[浏览代码](https://plugins.trac.wordpress.org/browser/high-performance-css-slider/)，
查看[SVN仓库](https://plugins.svn.wordpress.org/high-performance-css-slider/)，或
通过[RSS](https://plugins.trac.wordpress.org/log/high-performance-css-slider/?limit=100&mode=stop_on_copy&format=rss)
订阅[开发日志](https://plugins.trac.wordpress.org/log/high-performance-css-slider/)。

## 更新日志

#### 1.0

 * Initial Release

## 额外信息

 *  版本 **1.0**
 *  最后更新：**6 年前**
 *  活跃安装数量 **不到10**
 *  WordPress 版本 ** 5.4 或更高版本 **
 *  已测试的最高版本为 **5.4.19**
 *  PHP 版本 ** 7.4 或更高版本 **
 *  语言
 * [English (US)](https://wordpress.org/plugins/high-performance-css-slider/) 和
   [Swedish](https://sv.wordpress.org/plugins/high-performance-css-slider/).
 *  [翻译成简体中文](https://translate.wordpress.org/projects/wp-plugins/high-performance-css-slider)
 * 标签
 * [image slider](https://cn.wordpress.org/plugins/tags/image-slider/)[responsive slider](https://cn.wordpress.org/plugins/tags/responsive-slider/)
   [slider](https://cn.wordpress.org/plugins/tags/slider/)[wordpress slider](https://cn.wordpress.org/plugins/tags/wordpress-slider/)
 *  [高级视图](https://cn.wordpress.org/plugins/high-performance-css-slider/advanced/)

## 评级

尚未提交反馈。

[Your review](https://wordpress.org/support/plugin/high-performance-css-slider/reviews/#new-post)

[查看全部评论](https://wordpress.org/support/plugin/high-performance-css-slider/reviews/)

## 贡献者

 *   [ Speznat ](https://profiles.wordpress.org/speznat/)

## 支持

有话要说吗？是否需要帮助？

 [查看支持论坛](https://wordpress.org/support/plugin/high-performance-css-slider/)