Position Carousel arrow bootstrap: You create a carousel and find that the next and prev arrow is hidden by the images in your carousel. It takes away the feature of the carousel as the buttons to navigate forward and backwards is hidden behind the colour of your images. You can add the below-mentioned styles in your style sheet to override the positioning of the next and prev arrows.
CSS Styles for changing the position of Carousel Next and Prev arrows.
Changing the margin-left and margin-right for the prev and next icons will move them towards left and right respectively. The higher the negative value of margins, the more they will move outside the carousel images.
.carousel-control-prev-icon {
margin-left: -40px;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/%3e%3c/svg%3e");
}
.carousel-control-next-icon {
margin-right: -40px;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/%3e%3c/svg%3e");
}The style mentioned above will help you to position the carousel arrow just on the sides of the images as shown in the display image. If you want to position it outside the image you can increase the margins.
- Best practices for unsubscribing from subscriptions of Observables in Angular
- 10 best practices for creating Angular Application
- How to GroupBy in MongoDB
- How to Join two collections in MongoDB
- How to take screenshot on Android Phone- Samsung, Redmi Note
Happy Coding 🙂