Jquery 使用上一个/下一个按钮进行双幻灯片放映

我对jQuery和JS基本上都是新手。我有一个缩略图幻灯片，我已经在工作，但后来我添加了“上一步/下一步”按钮，它现在根本不工作。我只是需要你帮我弄清楚。在过去的两个小时里，我的头一直撞在墙上。这是一个幻灯片，缩略图上方有图像，下方有内容。我只想能够切换这两个，上面的图像和下面的内容，同时显示缩略图上的活动状态。在使用“下一步/上一步”按钮之前，它一直工作

$（'.filmstrip div span'）。打开（'单击'，函数（）{
var guts_id=$（this.attr（'data-tab'）；
$（'.filmstrip div span'）.removeClass（'current'）.addClass（'gs'）；
$（this.toggleClass（'当前gs'）；
$（'.guts，.hero image'）.removeClass（'active'）；
$（'..+guts_id）.addClass（'active'）；
});
//var guts_id=$（'.filmstrip div span'）.attr（'data-tab'）；
var fSlide=$（'li:first'，'ul'）；
var lSlide=$（'li:last'，'ul'）；
var fGuts=$（'section:first'，'.guts-wrapper'）；
var lGuts=$（'section:last'，'.guts wrapper'）；
var fThumb=$（“.thumb:first”，“filmstrip”）；
var lThumb=$（'.thumb:last'，'.filmstrip'）；
var$nextSlide=$（'.hero.active'）。下一个（'li'）。长度$（'hero.active'）。next（'li'）：fSlide；
变量$prevSlide=$（'.hero.active'）。prev（'li'）。长度$（'hero.active'）.prev（'li'）：lSlide；
var$nextGuts=$（'.guts wrapper.active'）。下一个（'section'）。长度$（'.guts wrapper.active'）。下一个（'section'）：fGuts；
var$prevGuts=$（'.guts wrapper.active'）。prev（'section'）。长度$（'.guts wrapper.active'）.prev（'section'）：lGuts；
var$nextThumb=$（'.filmstrip.alive'）。下一个（'.thumb'）。长度$（'.filmstrip.alive'）。下一个（'.thumb'）：fThumb；
变量$prevThumb=$（'.filmstrip.alive'）。prev（'.thumb'）。长度$（'.filmstrip.alive'）.prev（'.thumb'）：lThumb；
//var$nextThumb=$（'.filmstrip.thumb.current'）。下一个（'.thumb'）。长度$（'.filmstrip.thumb.current'）。下一步（'.thumb'）：fThumb；
//变量$prevThumb=$（'.filmstrip.thumb.current'）。prev（'.thumb'）。长度$（'.filmstrip.thumb.current'）.prev（'.thumb'）：lThumb；
//变量$currentThumb=$（'.filmstrip.current'）；
$（'.next'）。在（'click'，function（）上{
$（'.hero.active'）.removeClass（'active'）；
$（'.guts wrapper.active'）.removeClass（'active'）；
$（'.filmstrip.alive'）.removeClass（'alive'）.find（'.thumb>.current'）.removeClass（'current'）.addClass（'gs'）；
$nextSlide.addClass（'active'）；
$nextGuts.addClass（'active'）；
$nexttumb.addClass（'alive'）。find（'span'）。addClass（'current'）。removeClass（'gs'）；
$nextSlide=$（'.hero.active'）.next（'li'）.length？$（'.hero.active'）.next（'li'）：fSlide；
$prevSlide=$（'.hero.active'）.prev（'li'）.length？$（'.hero.active'）.prev（'li'）：lSlide；
$nextGuts=$（'.guts wrapper.active'）。下一个（'section'）。长度？$（'.guts wrapper.active'）。下一个（'section'）：fGuts；
$prevGuts=$（'.guts wrapper.active'）.prev（'section'）.length？$（'.guts wrapper.active'）.prev（'section'）：lGuts；
$nextThumb=$（'.filmstrip.alive'）。下一个（'.thumb'）。长度？$（'.filmstrip.alive'）。下一个（'.thumb'）：fThumb；
$prevThumb=$（'.filmstrip.alive'）.prev（'.thumb'）.length？$（'.filmstrip.alive'）.prev（'.thumb'）：lThumb；
});
$（'.previous'）。在（'click'，function（）上{
$（'.hero.active'）.removeClass（'active'）；
$（'.guts wrapper.active'）.removeClass（'active'）；
$（'.filmstrip.alive'）.removeClass（'alive'）.find（'.thumb>.current'）.removeClass（'current'）.addClass（'gs'）；
$prevSlide.addClass（'active'）；
$prevGuts.addClass（'active'）；
$prevThumb.addClass（'alive'）。find（'span'）。addClass（'current'）。removeClass（'gs'）；
$prevSlide=$（'.hero.active'）.prev（'li'）.length？$（'.hero.active'）.prev（'li'）：fSlide；
$prevSlide=$（'.hero.active'）.prev（'li'）.length？$（'.hero.active'）.prev（'li'）：lSlide；
$prevGuts=$（'.guts wrapper.active'）.prev（'section'）.length？$（'.guts wrapper.active'）.prev（'section'）：fGuts；
$prevGuts=$（'.guts wrapper.active'）.prev（'section'）.length？$（'.guts wrapper.active'）.prev（'section'）：lGuts；
$nextThumb=$（'.filmstrip.alive'）。下一个（'.thumb'）。长度？$（'.filmstrip.alive'）。下一个（'.thumb'）：fThumb；
$prevThumb=$（'.filmstrip.alive'）.prev（'.thumb'）.length？$（'.filmstrip.alive'）.prev（'.thumb'）：lThumb；
});
.container{
宽度：800px；
位置：相对位置；
}
.英雄{
宽度：800px；
高度：275px；
位置：相对位置；
列表样式类型：无；
保证金：0；
填充：0；
}
.cf：之前，
.cf：之后{
内容：“；
显示：表格；
}
.cf：之后{
明确：两者皆有；
}
.英雄形象{
宽度：100%；
身高：100%；
背景：丽贝卡紫；
位置：绝对位置；
排名：0；
左：0；
右：0；
底部：0；
不透明度：0；
z指数：2；
}
.hero-image.content1{
背景：橙色；
高度：275px；
}
.hero-image.content2{
背景：丽贝卡紫；
高度：275px；
}
.英雄形象{
背景：浅绿色；
高度：275px；
}
.勇气{
背景：红色；
高度：275px；
}
.勇气{
背景：蓝色；
高度：275px；
}
.勇气{
背景：绿色；
高度：275px；
}
.hero-image.active{
不透明度：1；
z指数：3；
}
.电影带{
填充：0；
高度：10雷姆；
背景：黑色；
位置：相对位置；
宽度：100%；
}
.电影带.按钮{
*缩放：1；
浮动：左；
明确：无；
左侧填充：0；
右边填充：0；
文本对齐：继承；
宽度：22.5%；
左边缘：0%；
右边距：0%；
高度：10雷姆；
位置：相对位置；
溢出：隐藏；
颜色：白色；
}
巴顿：之前，
.电影带.按钮：之后{
内容：''；
显示：表格；
}
.电影带.按钮：之后{
明确：两者皆有；
}
.filmstrip.button.arrow{
*缩放：1；
浮动：左；
明确：无；
左侧填充：0；
右边填充：0；
文本对齐：居中；
宽度：16.25%；
左边缘：0%；
右边距：0%；
字体大小：5rem；
线高：10雷姆；
}
.电影带.按钮.箭头：在，
.电影带.按钮.箭头：之后{
内容：''；
显示：表格；
}
.电影带.按钮.箭头：之后{
明确：两者皆有；
}
.电影带.但是
    var fSlide = $('li:first', 'ul');
var lSlide = $('li:last', 'ul');

var fGuts = $('section:first', '.guts-wrapper');
var lGuts = $('section:last', '.guts-wrapper');

var fThumb = $('.thumb:first', '.filmstrip');
var lThumb = $('.thumb:last', '.filmstrip');

var $nextSlide = $('.hero .active').next('li').length ? $('.hero .active').next('li') : fSlide;
var $prevSlide = $('.hero .active').prev('li').length ? $('.hero .active').prev('li') : lSlide;

var $nextGuts = $('.guts-wrapper .active').next('section').length ? $('.guts-wrapper .active').next('section') : fGuts;
var $prevGuts = $('.guts-wrapper .active').prev('section').length ? $('.guts-wrapper .active').prev('section') : lGuts;

var $nextThumb = $('.filmstrip .alive').next('.thumb').length ? $('.filmstrip .alive').next('.thumb') : fThumb;
var $prevThumb = $('.filmstrip .alive').prev('.thumb').length ? $('.filmstrip .alive').prev('.thumb') : lThumb;

$('.next').on('click', function(){
    $('.hero .active').removeClass('active');
    $('.guts-wrapper .active').removeClass('active');
    $('.filmstrip .alive').removeClass('alive').find('.thumb > .current').removeClass('current').addClass('gs');
    $nextSlide.addClass('active');
    $nextGuts.addClass('active');
    $nextThumb.addClass('alive').find('span').addClass('current').removeClass('gs');
    $nextSlide = $('.hero .active').next('li').length ? $('.hero .active').next('li') : fSlide;
    $prevSlide = $('.hero .active').prev('li').length ? $('.hero .active').prev('li') : lSlide;
    $nextGuts = $('.guts-wrapper .active').next('section').length ? $('.guts-wrapper .active').next('section') : fGuts;
    $prevGuts = $('.guts-wrapper .active').prev('section').length ? $('.guts-wrapper .active').prev('section') : lGuts;
    $nextThumb = $('.filmstrip .alive').next('.thumb').length ? $('.filmstrip .alive').next('.thumb') : fThumb;
    $prevThumb = $('.filmstrip .alive').prev('.thumb').length ? $('.filmstrip .alive').prev('.thumb') : lThumb;

});

$('.previous').on('click', function(){
    $('.hero .active').removeClass('active');
    $('.guts-wrapper .active').removeClass('active');
    $('.filmstrip .alive').removeClass('alive').find('.thumb > .current').removeClass('current').addClass('gs');
    $prevSlide.addClass('active');
    $prevGuts.addClass('active');
    $prevThumb.addClass('alive').find('span').addClass('current').removeClass('gs');
    $prevSlide = $('.hero .active').prev('li').length ? $('.hero .active').prev('li') : fSlide;
    $prevSlide = $('.hero .active').prev('li').length ? $('.hero .active').prev('li') : lSlide;
    $prevGuts = $('.guts-wrapper .active').prev('section').length ? $('.guts-wrapper .active').prev('section') : fGuts;
    $prevGuts = $('.guts-wrapper .active').prev('section').length ? $('.guts-wrapper .active').prev('section') : lGuts;
    $nextThumb = $('.filmstrip .alive').next('.thumb').length ? $('.filmstrip .alive').next('.thumb') : fThumb;
    $prevThumb = $('.filmstrip .alive').prev('.thumb').length ? $('.filmstrip .alive').prev('.thumb') : lThumb;
});