Question

我有2张光滑的幻灯片。

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

我的幻灯片正在工作，但是问题是，当此组件中只有一组选项，而该组中只有几个选项时，无法显示所有选项。仅第一个选项可见，其他选项位于组块的末尾，因此不可见。无法滑动查看其余部分。另一个问题是，“下一个”按钮未被禁用。

在https://jsfiddle.net/odLmujfq/32/中只有四个第一组组件可见四个选项。

这是我的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() + ': <span class="vpc-choosed-opt">' + 
            curComponent.find('.vpc-component-name > span:nth-child(2)').text() + '</span>';
        $('.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 )

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

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

0 个答案: