Блог

Главная - Вопросы по программированию - Как остановить медленную загрузку и накопление элементов slick js при использовании тега select

Как остановить медленную загрузку и накопление элементов slick js при использовании тега select

#carousel #html-select #slick.js

Вопрос:

Я создаю сайт для напитков, на котором представлено более 1 категории ароматов. Я поместил каждый отдельный продукт в свою собственную карточку и поместил все карточки в скользкую карусель js. Поскольку существует более одной категории ароматов, есть 3 карусели, соответствующие категории ароматов, и я поместил тег select с тегами опций, которые при нажатии скрывают все остальные карусели с помощью display: none и показывают только категорию, соответствующую выбранному выбору. Теперь я думаю, что slick 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>

карты карусели складываются друг на друга,прежде чем они должным образом отобразятся, обычно через некоторое время

Метки: