建一个会赚钱的外贸网站

Elementor免费Banner滑块教程（WordPress滑块2026）

Elementor免费横幅滑块设计教程

文章目录

重要链接：

本教程所需材料：

  1. Elementor + elementor pro插件
  2. 切换图片，需要几个准备几张（横向）
  3. 对应每个切换元素的文案：标题+描述+按钮

课程所需代码

1.滑块CSS代码：

      <style>

/*Banner Slider Item */
.b-slide .banner-slide-item {
  width: 200px;
  height: 300px;
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  border-radius: 20px;
  box-shadow: 0 30px 50px #505050;
  transition: 0.5s;
}

.b-slide .banner-slide-item:nth-child(1),
.b-slide .banner-slide-item:nth-child(2) {
  top: 0;
  right: 0;
  transform: translate(0, 0);
  border-radius: 0 !important;
  width: 100%;
  height: 100%;
}

.b-slide .banner-slide-item:nth-child(3) {
  right: calc(0% + 420px);
}
.b-slide .banner-slide-item:nth-child(4) {
      right: calc(0% + 180px);
}
.b-slide .banner-slide-item:nth-child(5) {
  right: calc(0% - 60px);
}

/* here n = 0, 1, 2, 3,... */
.b-slide .banner-slide-item:nth-child(n + 6) {
  right: calc(0% - 300px);
  opacity: 0;
}

 .banner-slide-item:nth-child(2) .content {
  display: flex;
  opacity: 0;
  animation: animate-fade-in 1s ease-in-out 0.3s 1 forwards;
}



.content {
    backdrop-filter: blur(10px);
}
.banner-slide-item .content {
  display: none;
  
}

@keyframes animate-fade-in {
  from {
    opacity: 0;
    transform: translate(0, 50px);
    filter: blur(33px);
  }

  to {
    opacity: 1;
    transform: translate(0);
    filter: blur(0);
  }
}





/* responsive */
@media (max-width:767.98px){
    .b-slide .banner-slide-item {
    width: 90px;
    height: 120px;
    top: calc(100% - 105px);
    transform: translate(0, -100%);
}

.b-slide .banner-slide-item:nth-child(4) {
    right: calc(0% + 40px);
}

.b-slide .banner-slide-item:nth-child(3) {
    right: calc(0% + 140px);
}


}

@media (min-width:768px) and (max-width:1024.98px){
    .b-slide .banner-slide-item {
    width: 130px;
    height: 160px;
}

.b-slide .banner-slide-item:nth-child(4) {
    right: calc(0% + 90px);
}

.b-slide .banner-slide-item:nth-child(3) {
    right: calc(0% + 240px);
}


}

@media (min-width: 1025px) and (max-width: 1349.98px){
    .b-slide .banner-slide-item {
    width: 165px;
    height: 225px;
}

.b-slide .banner-slide-item:nth-child(4) {
    right: calc(0% + 145px);
}
.b-slide .banner-slide-item:nth-child(3) {
    right: calc(0% + 350px);
}
}
</style>

2.滑块CSS Classes：

      b-slide
banner-slide-item
content

3.滑块按钮CSS代码：

      /* For slider button */

.bslide-button .prev, .bslide-button .next{
    cursor: pointer;
}

.bslide-button .prev .elementor-button, .bslide-button .next .elementor-button{
    backdrop-filter: blur(8px);
}

4.滑块按钮 CSS Classes：

      bslide-button
prev
next

5.滑块JS代码：(滑块手动点击切换用这个代码）

      <script>
let next = document.querySelector(".next");
let prev = document.querySelector(".prev");

next.addEventListener("click", function () {
  let items = document.querySelectorAll(".banner-slide-item");
  document.querySelector(".b-slide").appendChild(items[0]);
});

prev.addEventListener("click", function () {
  let items = document.querySelectorAll(".banner-slide-item");
  document.querySelector(".b-slide").prepend(items[items.length - 1]); // here the length of items = 6
});

</script>

6.滑块JS代码：(滑块自动切换用这个代码）

      <script>
// 获取DOM元素
let next = document.querySelector(".next");
let prev = document.querySelector(".prev");
let slideContainer = document.querySelector(".b-slide");
let autoSlideInterval;

// 切换到下一张
function slideNext() {
  let items = document.querySelectorAll(".banner-slide-item");
  slideContainer.appendChild(items[0]);
}

// 切换到上一张
function slidePrev() {
  let items = document.querySelectorAll(".banner-slide-item");
  slideContainer.prepend(items[items.length - 1]);
}

// 开始自动轮播
function startAutoSlide() {
  // 清除现有的定时器
  if (autoSlideInterval) {
    clearInterval(autoSlideInterval);
  }
  // 每5秒自动切换一次（5000毫秒）
  autoSlideInterval = setInterval(slideNext, 5000);
}

// 停止自动轮播（当用户交互时）
function stopAutoSlide() {
  if (autoSlideInterval) {
    clearInterval(autoSlideInterval);
    autoSlideInterval = null;
  }
}

// 点击事件监听
next.addEventListener("click", function () {
  slideNext();
  // 用户交互后重置自动轮播
  startAutoSlide();
});

prev.addEventListener("click", function () {
  slidePrev();
  // 用户交互后重置自动轮播
  startAutoSlide();
});

// 鼠标悬停时暂停自动轮播
slideContainer.addEventListener("mouseenter", stopAutoSlide);
slideContainer.addEventListener("mouseleave", startAutoSlide);

// 页面失去焦点时暂停自动轮播
document.addEventListener("visibilitychange", function() {
  if (document.hidden) {
    stopAutoSlide();
  } else {
    startAutoSlide();
  }
});

// 初始化：页面加载后开始自动轮播
document.addEventListener("DOMContentLoaded", function() {
  // 延迟1秒开始，让页面完全加载
  setTimeout(startAutoSlide, 1000);
});

// 窗口重新获得焦点时重新开始
window.addEventListener("focus", startAutoSlide);
window.addEventListener("blur", stopAutoSlide);
</script>

操作步骤说明：

打开elementor编辑页面。

第一步：拖入一个Container。选择上下排列。

  • Content width: Full width
  • Width：按默认100%
  • Gaps：Clomn:0 Row:0
  • Addtional options中Overflow: hidden
  • Advanced中: pading全部设为0
  • Structure中将此Container命名为Banner Container

第二步：在Banner Container中拖入一个Container命名为Slider Container

  • Slider container的Content width设置为Full width
  • Width按默认的100%
  • Min Height选择VH设置为100
  • Gaps全部设置为0
  • Advanced中Padding全部设为0

第三步：在Slider Container中拖入一个Container命名为Items Container

  • 将Items Container的Content Width设置为Boxed
  • Width设为1240px
  • Justify content: center
  • Gaps: 设置为0
  • Style中添加背景图：position-center center, Repeat-No-repeat, Display size-cover
  • Advanced中Padding设为0

第四步：在Items Container中拖入一个Container命名为Contents Container

  • 将Contents Container的Content Width设置为Full Width
  • Width设为475px
  • Min height设为280
  • Justify Content：Center
  • Gaps: 设为0
  • Style中将content container的背景色设为：#70707047
  • Border Type设为Solid
  • Border width设为3
  • Border Color设为#FFFCA705
  • Border Radius设为8
  • Advanced中将Pading设为Top 59, right 55, Bottom59, left 55
  • 在Contents Container中拖入Heading（H2，字体poppin,size 50, weight 700, Transform-capitalize, 字体颜色设为#EEEEEE）, text editor（字体Roboto, size 14, paragraph space设为0，字体颜色设为#EEEEEE，advanced中margin设为top0, bottom 20, 左右各为0)和一个按钮（更改按钮文案，字体设为arail, size 13, weight:500, 字体颜色设为黑色，背景色设为#F0F0F0， border radius设为4， padiing 设为：top/10-right/20-bottom/10-left/20）

第五步：收起Slider Container，并在structure中在此container上点右键点Add New Container, 命名为Button Container

  • 这样在Slider container下面得到一个和slider container并列的button container
  • 将Button Container的 Content width设为full width, Width选择最下面的个笔的符号，并在空格中输入：max-content
  • Direction选择第一个Row
  • Advanced中将padding设为0
  • Position设为Absolute, Horizontal orientation设为left, offset选%，值设为50，Vertical Orientation设为Bottom, offset设为40 （注意这个vertical orientation可以根据前台预览做调整）
  • 在button container中拖入一个按钮（确保一定拖入到该container中）
  • 将button text删掉， icon选择向左的箭头icon
  • Style中将button背景颜色设为#FFFFFF33
  • Border type设为solid, border width 设为1， border color设为：#C9C9C94F， border radius: 设为5
  • Structure中在此button上右键点duplicate, 复制出一个一样的button
  • 新button的icon设为向右的箭头

第六步：移动端响应设置

  • 首选选择平板端
  • Structure中选择items container, 在style中将Border radius设为20
  • Advanced中将pading设为0-20-0-20
  • 选择手机端
  • Structure中选择Content container
  • Content width: Full width
  • Width- %- 100
  • Min height设为99 px
  • Advanced中padding设为34-24-34-24
  • 选择heading, 打开style, 字体中size设为rem, size设为8
  • ADvanced中width设为costom, custom width选择最下面笔的icon, 值设为fit-content
  • 选择text editor， 打开advanced, width设为custom,  custom width 设为%， 值设为70
  • 选择button, advanced中，width设为custom, custom width设为最下面笔icon, 值设为： max-content

第七步：设置代码

  • 点击+号，在新container中拖入一个HTML
  • 将此container命名为HTML CONTAINER
  • 把Html container gaps设为0
  • Advanced中padding 设为0
  • 点击Html输入代码第一段代码

复制：b-slide

选择slider container，advanced中在CSS classes中粘贴b-slide

复制：banner-slide-item

选择items container，advanced中在CSS CLASSES中粘贴banner-slide-item

复制：content

选择content container， advanced中在CSS CLASSES中粘贴content

选择HTML，输入第二段代码 ， 确保此段代码加入到</style>标签前面。

在HTML中继续添加第三段代码， 确保此段代码加入到</style>标签后面，回车几次，粘贴即可。

注意此段代码是手动点箭头切换banner背景和文案，非自动切换。 如果你想自动切换banner背景和文案，请不要输入上面的第三段代码，而是选择第三段自动切换代码。同样确保此段代码加入到</style>标签后面，回车几次，粘贴即可。

点击Publish按钮。

第八步：复制出多个Banner卡片。

  • Structure中在items container上点右键，点击duplicate, 需要几个切换选项就点击duplicate几次。
  • 为新添加的items container设置不同的背景图片。
  • 点开每个content container，输入相应的heading, text介绍和按钮链接。
  • 可以再次给item container进行重命名，比如后面加序号1-2-3-4
  • 注意新duplicate出来的items container，记得一定要将他们的Content Width设为Boxed。

Publish

最后一步：设置按钮代码

  • 复制bslide-button到button container的css classes中
  • 复制prev到向左箭头按钮的css classes中
  • 复制next到向右箭头按钮的css classes中
  • 将按钮设置在水平中间位置点选button container，advanced中点开transform, offset中X轴-%-值输入-50

微调：

按钮的水平位置和上下位置调整：

  • 点选 button container， 在Advanced中调整horizontal orientation（水平）和vertical orientation（上下）的值。

Banner切换时间调整，HTML最后一段js代码修改5000的数值就可以：

  • autoSlideInterval = setInterval(slideNext, 5000);

Banner整体高度调整：

  • 点选Slider container，调整Min height数值即可
最新文章

桥页

什么是面包屑导航？如何简化导航？（附示例）

WordPress网站速度优化插件Seraphinite Accelerator

WordPress 邮箱验证码登录后台视频教程提升安全性（WP 2FA）

Elementor免费Banner滑块教程（WordPress滑块2026）

解决 Yoast XML 网站地图重复 URL 问题（WooCommerce + Elementor）

5个步骤教你如何在加拿大开展联盟营销

7个亚马逊联盟网站案例

2026年21个成功联盟营销网站真实案例

博主的12个联盟营销披露案例和最佳实践

20年外贸与营销积累沉淀！为您打造一站式外贸营销合作、交流与学习平台。
本站内容话题涉及：谷歌SEO，外贸建站，内容营销，视频营销，联盟营销，WordPress，社交营销，邮件营销等。
董哥
埃克森数字营销

20年外贸与营销积累沉淀！为您打造一站式外贸营销合作、交流与学习平台。
本站内容话题涉及：谷歌SEO，外贸建站，内容营销，视频营销，联盟营销，WordPress，社交营销，邮件营销等。
董哥
埃克森数字营销
Facebook Linkedin Youtube

Leave a Comment

Your email address will not be published. Required fields are marked *

埃克森数字营销youtube视频订阅
外贸Wordpress建站+SEO-埃克森数字营销
Facebook 社区
前往社区

联系我们

联系电话：13665461054 或者表单留言

让我们帮你打造更高转化的网站

需要更专业的外贸网站设计、WordPress建站或SEO优化？把你的需求告诉我们，埃克森数字营销将为你提供更适合海外市场的解决方案。填写信息即可获得免费咨询，我们会尽快与您联系。

联系我们

  • 付款后，请点击右侧按钮联系我们进行订单交付。
联系我们

免费获取《谷歌快速排名秘诀-4.0》

---这些都是埃克森数字营销多年SEO总结而来的实践经验汇聚而成

  • 教你一天排名谷歌首页
  • 快速排名高效策略
  • 所有策略经过埃克森数字营销亲身测试
  • 20页+5000字电子书
  • 独家发布
  • 完全免费
  • 按照本策略实施可以迅速帮你获得排名，接询盘，拿订单！
  • 填写下面表单，马上收取快速排名秘诀吧！

请放心，我们只会偶尔发几封有干货的邮件，你的信息我们会严格保密。

注：订阅后请一定，一定，一定到您的邮箱中确认您的订阅，这样才能收到我们的《谷歌快速排名秘诀》！！！