如何使用光滑的大宽度滑块制作块

我有2个光滑的幻灯片。

第一个是组件，第二个是（分组）选项。 每个组件至少有一个或多个组。 当用户单击某个组件时，我必须显示此组件选项（但已分组）。 并且用户必须浏览以查看其所选组件的所有选项。

我的幻灯片正在运行但问题是，当此组件中只有一组选项以及该组中的多个选项时，无法显示所有选项。 只有第一个选项可见，其他选项位于组块的末尾，因此不可见。 不可能滑动看其余的。 另一个问题是，“下一步”按钮未被禁用。

这里https://jsfiddle.net/odLmujfq/32/在第一个组件的唯一一组中可以看到4个选项。

这是我的js：

(function( $ ) { 'use strict'; $(document).ready(function(){ var curCompIndex; var curComponent; initCompSlide(); initOptSlide(); function initCompSlide(){ $('#vpc-components .vpc-components').not('.slick-initialized').slick({ infinite: false, slidesToShow: 4, slidesToScroll: 4, prevArrow: $('#vpc-components button.vpc-arrow-prev'), nextArrow: $('#vpc-components button.vpc-arrow-next'), responsive: [ { breakpoint: 1024, settings: { slidesToShow: 3, slidesToScroll: 3, infinite: true, dots: true } }, { breakpoint: 600, settings: { slidesToShow: 2, slidesToScroll: 2 } }, { breakpoint: 480, settings: { slidesToShow: 1, slidesToScroll: 1 } } ] }); } function initOptSlide(){ $('.vpc-options').not('.slick-initialized').slick({ infinite: false, slidesToShow: 1, slidesToScroll: 1, prevArrow: $('#vpc-options button.vpc-arrow-prev'), nextArrow: $('#vpc-options button.vpc-arrow-next'), variableWidth: true, }); } $(document).on('click', '.vpc-component', function () { console.log('clic sur composant'); curComponent = $(this); $('.vpc-component.vpc-active').removeClass('vpc-active vpc-current'); $(this).addClass('vpc-active vpc-current'); var componentText = curComponent.find('.vpc-component-name > span:first-child').text() + ': ' + curComponent.find('.vpc-component-name > span:nth-child(2)').text() + ''; $('.vpc-current-component .vpc-cname').html(componentText); //make visible title and close button after add text $('.vpc-current-component').css('visibility','visible'); //init options block for component on which we click $('#vpc-components .vpc-components').slick('unslick'); $('#vpc-options').removeClass('vpc-hidden').addClass('vpc-shown'); $('#vpc-components').removeClass('vpc-shown').addClass('vpc-hidden'); //get the current position of components slide to save it to bring back after curCompIndex = $('#vpc-components .vpc-components').slick('slickCurrentSlide'); //console.log(curCompIndex); //bring back slide parent to begin position to avoid cons on slide nested $('.slick-slider').slick('slickGoTo', 0);//or 'setPosition' to reset //Filter current component options and show them var curComponentId = curComponent.attr('id'); var optBlock = $('.vpc-options'); optBlock.slick('slickFilter', function() { return $('.vpc-group[data-cid="'+ curComponentId + '"]', this).length === 1; }); $('#vpc-options button').removeClass('slick-hidden'); }); $(document).on('click', '.vpc-options-close', function (e) { e.stopPropagation(); $('.vpc-component').removeClass('vpc-active vpc-current').show(); curComponent.addClass('vpc-current'); $('.vpc-options').slick('slickUnfilter'); $('#vpc-components').removeClass('vpc-hidden').addClass('vpc-shown'); $('#vpc-options').removeClass('vpc-shown').addClass('vpc-hidden'); initCompSlide(); $('.vpc-current-component').css('visibility','hidden'); $('#vpc-components .vpc-components').slick('slickGoTo', curCompIndex); }); }); })( jQuery ) 

请帮忙，当我制作嵌套的光滑幻灯片时，我遇到了这个问题。 http://sofzh.miximages.com/jquery/1JiP7jn.png （显示10个项目但总共12个。无法滑动以查看其他2个项目）。 我认为这是导致这个问题的“嵌套”结构，但不是。