使用 select 标签时如何停止缓慢加载和堆积 slick js 的元素

问题描述

我正在制作一个饮料网站，其中有不止一种口味。我将每个单独的产品放在自己的卡片中，并将所有卡片放在一个光滑的 js 轮播中。由于有不止一种口味类别，因此有 3 个与口味类别相对应的轮播，我已经放置了一个带有选项标签的选择标签，单击该标签时，它会使用 display: none 隐藏所有其他轮播，并且只显示与选择点击。现在我认为当单击该选项时，光滑的 js 将所有卡片堆叠在一起，然后在一段时间（10 秒以上）后正确显示旋转木马（见图片），这很烦人。选择功能由一个小 javascript 提供支持我写了（见代码）。有没有办法修复这种光滑的 js 行为

 $(".card-deck").slick({
        slidesToShow: 3,slidesToScroll: 3,autoplay: true,dots:true,autoplaySpeed: 2000,arrows:true,outline:false
      });

        // products page
       displayKombuchaList = () =>{

        let choice = document.getElementById("selectKombucha").value;
        let allVarieties = document.getElementById("allVarieties");
        let herbalVarieties = document.getElementById("herbalVarieties");
        let fruitvarieties = document.getElementById("fruitvarieties");

        if(choice == "fruitvarieties"){
          
          fruitvarieties.style.display = "block";
          allVarieties.style.display = "none";
          herbalVarieties.style.display = "none";
        }
        else if( choice == "herbalVarieties"){
          herbalVarieties.style.display = "block";
          allVarieties.style.display = "none";
          fruitvarieties.style.display = "none";
        }else{
          allVarieties.style.display = "block";
          herbalVarieties.style.display = "none";
          fruitvarieties.style.display = "none";
        }
     }

#herbalVarieties,#fruitvarieties{
    display: none;
}

select{
position: relative;
left: 34vw;
padding: 20px 10px;
text-align: start;
font-size: 2.5rem;
font-family: "Raleway";
width:450px;
font-weight: 200;
border: none;
appearance: none;
-moz-appearance:none;
border-bottom: 1px solid transparent;
transition: border-bottom 1s ease;
outline: none;
}

.slick-slide{
    outline: none;
}

<div class="selectWrap">
                        <select name="flavors" onchange="displayKombuchaList()" id="selectKombucha">
                            <option value="allVarieties">All Kombucha Varieties</option>
                            <option value="herbalVarieties">Herbal Tea Kombucha</option>
                            <option value="fruitvarieties">Fruit based Kombucha</option>
                        </select>
                        <div class="selectBtn"> <i class="fas fa-chevron-down"></i> </div>
                    </div>
                    <div class="card-deck " id="fruitvarieties">

<!--Carousel-->
                        <div class="cardWrap">
                            <div class="card">
                                <img src="./images/card-deck/blueBerry-card deck.jpg" alt="">
                                <h3>BlueBerry Kombucha</h3>
                                <div class="buttons">
                                    <button>Read </button>
                                    <button>Buy</button>
                                </div>
                            </div> 
                        </div>   

                        <div class="cardWrap">
                            <div class="card">
                                <img src="./images/card-deck/pineapple-card deck.jpg" alt="">
                                <h3>Pineapple Kombucha</h3>
                                <div class="buttons">
                                    <button>Read </button>
                                    <button>Buy</button>
                                </div>
                            </div> 
                        </div>   

                        <div class="cardWrap">
                            <div class="card">
                                <img src="./images/card-deck/strawBerry-card deck.jpg" alt="">
                                <h3>StrawBerry Kombucha</h3>
                                <div class="buttons">
                                    <button>Read </button>
                                    <button>Buy</button>
                                </div>
                            </div> 
                        </div>   

                        <div class="cardWrap">
                            <div class="card">
                                <img src="./images/card-deck/raspBerry-card deck.jpg" alt="">
                                <h3>RaspBerry Kombucha</h3>
                                <div class="buttons">
                                    <button>Read </button>
                                    <button>Buy</button>
                                </div>
                            </div> 
                        </div>   

                        <div class="cardWrap">
                            <div class="card">
                                <img src="./images/card-deck/Berrymix-card deck.jpg" alt="">
                                <h3>Mango Kombucha Kombucha</h3>
                                <div class="buttons">
                                    <button>Read </button>
                                    <button>Buy</button>
                                </div>
                            </div> 
                        </div>   

                        <div class="cardWrap">
                            <div class="card">
                                <img src="./images/card-deck/strawLav-card deck.jpg" alt="">
                                <h3>StrawBerry Lavender Kombucha(Kombu Combo)</h3>
                                <div class="buttons">
                                    <button>Read </button>
                                    <button>Buy</button>
                                </div>
                            </div> 
                        </div>   

                        <div class="cardWrap">
                            <div class="card">
                                <img src="./images/card-deck/Berrymix-card deck.jpg" alt="">
                                <h3>BerryMix Kombucha</h3>
                                <div class="buttons">
                                    <button>Read </button>
                                    <button>Buy</button>
                                </div>
                            </div> 
                        </div>   

                    </div>

？ cards of the carousel piling on top of each other,before they properly display,usually after some time

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）