如何在WordPress网站中制作塔塔集团官网同款自定义Slider

通用WordPress轮播插件的配置自由度有限，无法匹配定制化的交互和视觉效果，直接基于轻量轮播库自定义开发是最稳妥的方案，具体步骤如下：

• 拆解原轮播核心参数
  用浏览器开发者工具提取原站轮播的核心配置：切换动画时长600ms、自动播放间隔5s、文字入场动画延迟200ms、背景视差偏移量15px、淡入淡出切换效果、底部可点击点状分页器。
• 引入轻量轮播依赖
  推荐使用SwiperJS作为底层轮播框架，无需引入额外冗余功能。将Swiper的CSS和JS文件放到当前主题的assets对应目录下，在主题functions.php中添加以下代码引入资源：

  function custom_enqueue_swiper_assets() {
      wp_enqueue_style( 'swiper-css', get_template_directory_uri() . '/assets/css/swiper-bundle.min.css', array(), '8.4.7' );
      wp_enqueue_script( 'swiper-js', get_template_directory_uri() . '/assets/js/swiper-bundle.min.js', array(), '8.4.7', true );
  }
  add_action( 'wp_enqueue_scripts', 'custom_enqueue_swiper_assets' );
  

• 编写轮播结构与样式
  可以新建自定义页面模板，或者在需要插入轮播的位置添加自定义HTML块，结构参考如下：

  <div class="tata-custom-slider swiper">
    <div class="swiper-wrapper">
      <!-- 轮播项示例 -->
      <div class="swiper-slide">
        <div class="slide-bg" data-swiper-parallax="-15" style="background-image: url('你的图片地址');"></div>
        <div class="slide-content">
          <h2 data-swiper-parallax="-30" data-swiper-parallax-duration="600">轮播标题</h2>
          <p data-swiper-parallax="-20" data-swiper-parallax-duration="600" data-swiper-parallax-delay="200">轮播描述</p>
          <a href="#" class="slide-btn" data-swiper-parallax="-10" data-swiper-parallax-duration="600" data-swiper-parallax-delay="400">了解更多</a>
        </div>
        <div class="slide-overlay"></div>
      </div>
      <!-- 更多轮播项重复上面结构即可 -->
    </div>
    <div class="swiper-pagination"></div>
  </div>
  

  配套编写CSS实现原站的全屏高度、深色半透明遮罩、文字左对齐、按钮样式，以及不同屏幕尺寸的响应式适配规则。
• 初始化轮播匹配交互
  加入以下JS代码初始化轮播，完全匹配原站交互效果：

  const tataCustomSlider = new Swiper('.tata-custom-slider', {
    effect: 'fade',
    fadeEffect: { crossFade: true },
    parallax: true,
    autoplay: {
      delay: 5000,
      disableOnInteraction: false
    },
    pagination: {
      el: '.swiper-pagination',
      clickable: true
    },
    speed: 600,
    loop: true
  });
  

• 对接WordPress后台自定义字段
  安装Advanced Custom Fields插件创建轮播组字段，支持后台自由上传轮播图片、编辑标题、描述和按钮链接，在模板中循环输出轮播项即可实现后台可视化管理，无需每次修改都改动代码。

注意：仅复刻轮播的交互与样式逻辑即可，不要直接使用塔塔集团官网的版权图片、文案内容，避免侵权风险。

内容的提问来源于stack exchange，提问作者Malik Zeeshan