i want to remove the Carousel arrows and indicators if there is only one

70
May 24, 2021, at 9:00 PM

i wanna remove the next and previous arrows on images if there is only one image

                <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>

i tried to do it using DOM but it didnt work becuase it shows class is undefined. I am not really good with css and DOM

i want images to have these arrows and bottom indicators only if there are two or more images Any help will be appreciated

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
}
READ ALSO
How can I run a java.class from Main Activity

How can I run a java.class from Main Activity

I'm a beginner at Android Development and hoping someone can help me a bit out

54
Virtual Environment in Django

Virtual Environment in Django

When we create virtual environment is it good practice to keep, our virtual environment folder and our project folder inside same root folder? If i am not wrong then every project have its own viretual environment so how can we remmember which project...

61
why UNION ALL command in mysql doesn&#39;t give back any results?

why UNION ALL command in mysql doesn't give back any results?

I am trying to merge two queries into one, but UNION is not working for meHere is the code:

47