独立站幻灯片插件Smart Slider3下载安装使用视频教程

你好，欢迎来到学建站网，这节课为大家去分享一个设计类的轮播slider插件。当然在学建站网之前也给大家分享过两个非常知名的幻灯片轮播插件，比如说第一个 Slider Revolution 这样的一个slider，还有一个LayerSlider。

这两个插件都是非常强悍的，特别是 revolution 这个基本上常年在 Themeforest 上面排名第一的这样的一个幻灯片轮播插件，这个插件里面的每一个元素都可以去自定义，但是这个插件使用起来是相对来说是比较复杂的，特别是它这里面提供的很多的 Template 模板是需要我们逐个进行安装的，所以相对来说是比较麻烦。并且它的使用会比较慢，会拖慢我们网页的速度，所以我一般在做独立站的过程当中，这个使用的并不是特别多。

那另外一个LayerSlider，是一个图层幻灯片，但是它的功能又偏于太简单，所以很多时候没办法完成我们想要的效果。

smart slide3插件介绍：

这一节课我们要给大家分享的是一个 smart slider 这样的一个插件。 smart slide3 这样的一个轮播幻灯片的插件，那么这个插件相对来说它就结合了这两个。之前给大家分享了这两个插件的优点。首先第一个它也可以像 revolution 这样的插件可以进行逐模块的自定义，所以它相对来说它的深度是足够的。然后另外它提供了很多的一些模板，可以方便我们在后台直接进行导入，导入完以后，然后我们就可以对这些模板进行二次修改了。

针对幻灯片元素修改：

所以首先我们就看一下这个插件， smart slider 这个插件它的一些功能介绍。

比如说我们可以看到这里面它就可以针对幻灯片上面的每一个元素，然后进行去修改它的样式风格，还有它的布局，还有它的位置等等，这些都可以进行修改。当然每一个模块它的入场和出场的顺序，包括它的时间流等等，这些都可以进行自由的控制，所以这是它非常强大的一个地方，另外一个就是它的使用人群非常的多，所以方便我们如果遇到一些问题的话就很容易去操作，可以找到这些相对应的文档。

好，这是它的一些主要的功能介绍，下面我们去看一下它的特点，它到底聪明在什么地方？它竟然自称为smart slider。

支持产品、博客等数据轮播：

首先第一个当然就是它有很多的基本的要素，这里面可能会包含我们的一些滑块，就是我们可以去建立一些滑块，不仅仅可以使用在我们独立站的首页的幻灯片，也可以用在轮播图，或者是我们的一些listing。

就是我们的产品列表，或者是我们的文章列表的一些显示效果，所以这是它的基本要素，它可以调用这些数据。然后第二个就是针对这里面的内容，它都可以进行自由编辑，就是每一个元素进行编辑和设计。

smart slide3插件速度快：

另外它的速度也是相对来说比较快的，因为它是支持 Webp 这种图片的上传的，然后它对它的 Javascript 或者是 jquery 这样的库都做了一些优化，另外它有一些原生态的一些媒体等等，这些都是可以加快我们的速度的。

那么关于我们独立站的速度，大家可以去学建站网，去找一下我们之前给大家分享的怎么样去提升速度，其中比较关键的就是我们的素材，当然我们的素材除了我们的图片、视频之外，当然也包含我们的 JS 文件、 CSS 文件等等这些内容，如果它可以针对这些文件进行优化的话，当然一定程度上肯定是可以针对这个模块而言，可以提高我们的响应速度。

smart slide3插件特效：

然后当然它这里面还添加了很多的一些时间特效，这个刚才我们已经给大家讲过了，包括一些图片的效果、色差，这些都可以让我们的独立站看起来非常的炫酷，实际上在我们去搭建独立站的过程当中，不管是 ToC 的还是 ToB 的，那么一般在我们的导航菜单下面，一般我们都会去加上一个slider，就是轮播、幻灯片等等，因为这一个它一般情况下，因为我们的首页的权重是最高的，所以用户一旦进来以后，你这个 slider 的效果往往会影响别人对你这个独立站的专业度的认可度，所以正常我们都会在这里面放一个非常炫酷的。

当然如果你要是不放 slider 也是可以的，我们可以去放一些营销话术，当然也可以起到这样的作用，这个就根据你自己的需要来了。然后另外它还有一些其他的一些集成，比如说可以集成我们刚才讲到的 WordPress 的 blog的文件，包括YouTube。还有我们的产品列表等等，包括我们的文件夹等等，这里面的文件夹一般指的是我们的portfolio，也就是我们的项目案例等等，这些都是可以把它集成进来的。

smart slide3支持翻译等：

当然它也支持在线翻译，它也会持续更新，因为它使用的人群比较多，所以这个插件的作者他不会轻易把它放弃，他提供了非常详细的文档和视频教程，这个大家都可以，在使用的过程当中，如果有一些小细节我们没有讲到，你都可以去看它的文档。

smart slide3多模板支持导入：

然后我们去看一下它的模板，我们之所以选择这个插件，最主要的原因就是它这里面提供了很多现成的模板。

而这些模板大部分覆盖了我们经常搭建独立站的时候所需要的一些效果。比如说我们经常会用到的一些轮播效果，这上面都是有的，我们可以简单的打开两个去看一下它的效果。因为这也是因为之前有一个我的学员学电商网的学员，他跟我讲他想要的一种效果，其中有一个这样的效果，那我就告诉他直接可以使用这个插件就可以快速导入，然后你再修改一下上面的内容，修改成你自己的就可以了。

好，其他的有很多的效果，大家可以根据自己的需要进行选择，比如说我们打开了两个，然后我们去看一下它的效果。好，打开以后我们可以看到其中有一个就是我们常见的这种 slider 的效果，就是在我们的 menu 下面有一个slider，然后我们可以左右浮动，然后也可以选择数字，就是这样的一个效果。

然后我们使用手机端，我们把它切换到手机端模式，我们也可以看到在手机端它的兼容性也是非常好的，所以就不需要我们去单独去调试它的设备的适配度。

然后另外一个也是一样的，这个其实就是我其中一个学员他想要的一个效果。那你点击其中有一个，它就会有一个详细的介绍，然后下面可以进行轮播等等，所以这种效果相对来说是比较复杂的，如果你使用一些固定的模板，或者用elementor，实际很难达到这种效果，所以这个时候我们用这样的插件就可以帮我们一键搞定好，这就是这个插件的介绍。

smart slide3插件安装：

下面我们给大家去演示一下这个 smart slider 这样的一个插件的安装和使用。首先这个插件我们已经给大家准备好了它目前的版本是3.5.1.29，然后我们直接进入我们独立站的后台，然后点击安装插件。

我使用这个插件的最主要的目的就是因为它提供了非常丰富的轮播图的 slider 的模板，那么这些模板可以解决我们大部分的需要。当然这些模板它并不是固定的，因为在这个模板你导入进来以后，你还可以在这个基础上进行修改，这是我们比较方便的地方，而之前我们使用的这个 revolution 这个插件基本上就需要我们独立去定制，然后每一个模块需要我们去调试，这种实际上它的使用起来就像我们在使用一个 Photoshop 一样，所以相对来说对我们很多的新手而言不太友好。

smart slide3面板介绍：

当然如果你有一些设计的一些基础的话，当然使用起来就会方便，因为它可以完全自定义好插件安装成功以后，然后点击安装好，安装成功以后，在我们的功能按钮里面就可以看到有一个 smart slider，然后我们把它打开这个 smart slider 这个插件，它实际上和我们的elementor，包括一些常用的页面构建器都是兼容的，也就说我们在后台创建了好了这样的一个 smart slide，我们不需要通过一些解码的方式，然后把它显示在我们的页面当中。

我们直接可以使用elementor，然后去调用这个模块，它这里会有一个简单的教程，这个我们就不用管它了。

当然这里面有一个设置，我们可以简单的去看一下，我们是可以直接使用的，所以既不需要考虑它的 Pro 版本或者是它的免费版本，直接去使用就行了。

smart slide3插件设置：

但是这里面会有一些简单的设置，我们可以根据自己的需要去添加一下，然后如果你不想设置就默认就可以了。

当然这里我们看到它有一个断点，就比如说我们的适配，比如说我们的手机端，还有我们的平板等等，这些都是可以进行修改的，里面还提供了一些框架等等这些内容。这些其实你设置不设置都无所谓，包括它的字体还有它的默认布局。这里主要是针对我们的标题，还有图片的模块上面的一些组件。

元素你可以做一些设置，下面就是假如说你想去调用 Instagram 的一个信息，那你就需要在这里去申请一下 Instagram 的API，然后把它填写进来就行了，包括我们的Vimeo，也就是国外的一个第三方的视频托管平台，那如果有一些视频你不方便放在 Youtube 上面，那么你就可以去申请一个Vimeo，当然这个也是收费的，前面三个视频是免费的，但后面都是需要收费的，然后你需要把它的 API 填写进来，包括我们的Youtube，如果你想显示的是我们的 Youtube 的视频的轮播。那我们也需要去申请一下我们的 Youtube 的 API key。

smart slide3模板导入修改：

好，这个都可以根据你自己的需要来这里我们主要给大家去演示一下它的轮播图怎么样添加，以及怎么样去显示到我们的页面当中。那么首先我们进到它的仪表盘里面以后，我们可以看到这里面会有一个默认的效果，我们不用管它，当然我们也可以把它删除掉。然后如果我们第一次进入，我们就可以去添加新的project，然后点击添加。

这里有两种方式，第一种方式就是你手搓一个，从头到尾就设置一个slider，然后另外一个就是导入它的模板，这里我们主要给大家去演示一下它的模板效果，然后点击导入，然后它就会跳转到它的一个 template 这样的一个界面。比如说我们刚才想实现一个简单的效果，就比如说这样的一个效果，那我们就可以直接把这个效果导入进来。就比如说包括这个也是一样的。那我们去找一个我们喜欢的一个模板，比如说这个模板这个简单一点，然后我们直接现在把它import，把它导入进来。

好，导入进来以后我们就可以看到这里它就包含了四个轮播的选项。

那么每一个轮播的选项我们都可以进行设置，比如说我们点击编辑第一个，现在进入这样的一个页面，就和我们之前给大家去演示的这个 revolution 它的效果是类似的了。那比如说这里面的每一个元素我们都可以进行修改，比如说我们去修改它的背景，这个背景我们可以去修改，然后我们可以去修改它的聚焦的内容，然后上面的这个图片我们可以把它替换掉。

选一个我们之前已经有的图片，如果有的话，当然我们一般设置slider，最好是选择一些它的尺寸是统一的，这样的话我们和好调整它的效果，那比如说这个已经替换完了，当然除了图片之外，我们也可以去设置一些视频显示在这个位置，背景视频我们也可以去调整，那包括它的颜色，就是它的前景颜色、背景颜色我们都可以去调整好。然后下面一个是它的内容，这个内容主要是这刚才我们调整的是它的风格，它的内容指的是我们这样的一个轮播图，我们可以给它起一个名字，但它不是显示在这个位置，因为这里面的位置的话我们是通过，就像我们的 elementor编辑器是一样的，我们可以在这里去添加模块，比如说去添加一个布局，添加一个标题、添加一个段落，这些都是可以添加的，包括添加一个按钮。

那么之前这里面的内容我们可以选中它以后，然后我们就可以去修改这里面的模块，修改它的文本，然后修改它的大小，给它添加超链接等等，包括修改这个标题的字体、样式、颜色这些都是非常简单的，当然我们可以去修改它的动态效果，这个和我们之前使用的这个 revolution 是类似的，但是你可以额外去添加一些内容，那我们也可以直接切换到这个图片的位置，然后去修改这个图片的内容，然后当然我们也可以去修改它的大小，还有它的布局。

最下面当然还有一个时间轴，这个所谓的时间轴指的是这个轮播图上面的每一个模块，它的入场顺序和出场顺序，这个和我们之前的 revolution 是一样的。好，这个修改完了以后，然后我们直接保存一下，然后返回到我们的原始页面，那么其他的图片都是这样一个一个去修改的，上面是针对它这里面的选项进行修改。

smart slide3幻灯片插入页面：

然后下面一个就是我们可以针对我们所添加的这个slider，就是它的 ID 是2，然后我们可以去修改它这里面的控制。

当然它提供了一个简码，在我们的 element 里面也有一个相应的模块，当然我们也可以直接把它集成到我们的 PHP 文件里面，这个都是可以的。

然后另外就是我们可以去修改它的缩略图，就是这个图片的缩。缩略图，因为我们可以添加很多个slider，每个 slider 都是有一个独一无二的缩略图以及它的标题，另外就是它的设计，它的背景颜色等等，这些我们都可以修改。然后另外一个就是它的尺寸，就是这个 slider 在我们的前台它显示的效果就它的宽度、高度，还有在我们的手机端、移动端是不是要把它隐藏掉？这个根据你自己的需要进行设置，这样的话我们就可以为不同的设备去设置不同的slider，然后分别去调用就可以了。那么其他的像我们的 control 就是我们上下左右的那两个按钮，我们也可以把它修改成我们想要的那个风格。

好，下面就是它的一些样式，另外就是它下面的一个小按钮也可以去调整，当然这个 slide 我们也可以给它添加一个文本的控制器，或者是缩略图，或者给它加上阴影全屏等等，这个根据自己的需要进行调整。另外就是它的动态，还有就是不是自动播放，那这个根据自己的需要。然后下面一个就是它所优化的内容，我们可以针对它的图片去压缩一下它的图片，调整一下它的大小。然后另外是不是全屏显示，然后我们可以给它添加一些自定义的样式，可以给它加上一个类，还有一些开发的内容，基本上我们不怎么用到。

好，这样的话我们就完成了一个 slide 的导入，以及怎么样去修改它。好，设置完了以后，当然我们需要保存一下，保存完以后返回。实际上在返回之前我们是可以去预览一下的，我们看到这里有一个预览按钮，好，它就是显示这样的一个效果，左右的轮播好，如果这个风格满足你的需要，那么你就可以把这个模块显示在我们的前台了。

好，显示的方法我们刚才已经跟大家说过了，你可以直接使用这个简码，也可以直接在我们的 element 里面去使用。比如说现在我们打开我们首页的 element 编辑器页面。

打开以后我们可以看到这是我们之前的轮播的效果，我们可以把之前的这个轮播的效果给它删了，现在就变成一个空的了，然后我们在这个里面去搜索 smart slider，然后我们就可以找到这个模块，然后把这个模块拖拽进来，然后去选择我们想要显示的，然后点击插入，然后我们让它全屏显示，然后上面这个模块因为它这里面加了很多的padding，然后我们把它关掉，好，然后点击发布。

现在我们去刷新我们的首页，我们看到这样的一个 slader 效果就已经加进来了，当然它的高度和宽度这些都可以根据你自己的需要然后去调整就可以了。上面的内容都可以按照我们自己的需要去添加，那如果你使用的不是elementor，那你就使用这个简码把它添加进来就可以了。好，这就是关于 smart slider3这个插件的安装和使用方法。