如果只有一個，我想刪除輪播箭頭和指示器

Question

如果只有一個圖像，我想刪除圖像上的下一個和上一個箭頭

                <Col md={6}>
                    <Carousel>
                        {product.image ?  
                            <Carousel.Item>
                                <img
                                className="d-block w-100"
                                src={product.image}
                                style={{width:'540px', height:'480px'}}
                                />
                            </Carousel.Item> : 

                            <Carousel.Item>
                                <img
                                className="d-block w-100"
                                src={product.image}
                                style={{width:'540px', height:'480px'}}
                                />
                            </Carousel.Item>
                        }

                        {product.imageSecond ?  
                            <Carousel.Item>
                                <img
                                className="d-block w-100"
                                src={product.imageSecond}
                                style={{width:'540px', height:'480px'}}
                                />
                            </Carousel.Item> : 

                            null
                        }

                        {product.imageThird ?  
                            <Carousel.Item>
                                <img
                                className="d-block w-100"
                                src={product.imageThird}
                                style={{width:'540px', height:'480px'}}
                                />
                            </Carousel.Item> : 

                            null
                        }

                        {product.imageFourth ?  
                            <Carousel.Item>
                                <img
                                className="d-block w-100"
                                src={product.imageFourth}
                                style={{width:'540px', height:'480px'}}
                                />
                            </Carousel.Item> : 

                            null
                        }

                        {product.imageFifth ?  
                            <Carousel.Item>
                                <img
                                className="d-block w-100"
                                src={product.imageFifth}
                                style={{width:'540px', height:'480px'}}
                                />
                            </Carousel.Item> : 

                            null
                        }

                        {product.imageSixth ?  
                            <Carousel.Item>
                                <img
                                className="d-block w-100"
                                src={product.imageSixth}
                                style={{width:'540px', height:'480px'}}
                                />
                            </Carousel.Item> : 

                            null
                        }

                        {product.imageSeventh ?  
                            <Carousel.Item>
                                <img
                                className="d-block w-100"
                                src={product.imageSeventh}
                                style={{width:'540px', height:'480px'}}
                                />
                            </Carousel.Item> : 

                            null 
                        }

                    </Carousel>

                    </Col>

我嘗試使用 DOM 來做，但它沒有工作，因為它顯示 class 是未定義的。 我不太擅長 css 和 DOM

僅當有兩個或更多圖像時，我才希望圖像具有這些箭頭和底部指示器 任何幫助將不勝感激

Answer 1

const imagesArray = [...document.querySelectorAll('.d-block.w-100')]
if(imagesArray.length === 1){
    const leftArrow = document.querySelector('.carousel-control-prev-icon')
    const rightArrow = document.querySelector('.carousel-control-next-icon')

    leftArrow.style.hidden = true
    rightArrow.style.hidden = true
}