双轮播图尺寸冲突：固定首页轮播尺寸并保留产品轮播功能

你的问题根源在于jQuery选择器范围太广，.carousel-item、.carousel img和.carousel会匹配页面上所有轮播组件，导致产品区轮播被意外修改。只需缩小选择器的作用范围，只针对首页（#index区域）的轮播元素操作即可。

修改后的jQuery代码 #

// 仅选中首页#index下的carousel-item
var $item = $('#index .carousel-item'); 
var $wHeight = $(window).height();
$item.eq(0).addClass('active');
$item.height($wHeight); 
$item.addClass('full-screen');

// 仅处理首页#index下的carousel图片
$('#index .carousel img').each(function() {
  var $src = $(this).attr('src');
  var $color = $(this).attr('data-color');
  $(this).parent().css({
    'background-image' : 'url(' + $src + ')',
    'background-color' : $color
  });
  $(this).remove();
});

// 窗口resize时仅调整首页轮播的高度
$(window).on('resize', function (){
  $wHeight = $(window).height();
  $('#index .carousel-item').height($wHeight);
});

// 仅初始化首页的轮播配置
$('#index .carousel').carousel({
  interval: 6000,
  pause: "false"
});

关键修改点说明 #

• 把全局的.carousel-item改为#index .carousel-item：只选中首页区域内的轮播项
• 把.carousel img改为#index .carousel img：仅处理首页轮播内的图片
• 窗口resize事件中，同样限定为#index .carousel-item调整高度
• 轮播初始化时，只针对#index .carousel设置自定义的interval和pause，产品区轮播会使用默认配置正常工作

这样修改后，首页轮播会保持全屏高度的效果，产品区的轮播则不受任何影响，完全按照原有样式和逻辑运行。

内容的提问来源于stack exchange，提问作者Hein Zarni Maung