如果只有一个，我想删除轮播箭头和指示器

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
}