Top Categories
Bootstrap 4 Tutorial in Hindi Part 12 : Carousel in bootstrap 4 in Hindi | Image Slider in Bootstrap
- Category:
- Sub Category:
Welcome to my Bootstrap 4 Tutorial in Hindi Part 12. Carousel in bootstrap 4 in Hindi. Image Slider in Bootstrap in Hindi. bootstrap 4 carousel tutorial in Hindi. Bootstrap Carousel Plugin. The Carousel Plugin The Carousel plugin is a component for cycling through elements, like a carousel (slide
Welcome to my Bootstrap 4 Tutorial in Hindi Part 12. Carousel in bootstrap 4 in Hindi. Image Slider in Bootstrap in Hindi. bootstrap 4 carousel tutorial in Hindi. Bootstrap Carousel Plugin. The Carousel Plugin The Carousel plugin is a component for cycling through elements, like a carousel (slideshow). Tip: Plugins can be included individually (using Bootstrap's individual "carousel.js" file), or all at once (using "bootstrap.js" or "bootstrap.min.js"). Carousels require the use of an id (in this case id="myCarousel") for carousel controls to function properly. The class=" carousel" specifies that this div contains a carousel. The .slide class adds a CSS transition and animation effect, which makes the items slide when showing a new item. Omit this class if you do not want this effect. The data-ride="carousel" attribute tells Bootstrap to begin animating the carousel immediately when the page loads. The "Indicators" part: The indicators are the little dots at the bottom of each slide (which indicates how many slides there is on the carousel, and which slide the user are currently viewing). The indicators are specified in an ordered list with class .carousel-indicators. The data-target attribute points to the id of the carousel. The data-slide-to attribute specifies which slide to go to when clicking on the specific dot. The "Wrapper for slides" part: The slides are specified in a div with class .carousel-inner. The content of each slide is defined in a div with class .item. This can be text or images. The .active class needs to be added to one of the slides. Otherwise, the carousel will not be visible. The "Left and right controls" part: This code adds "left" and "right" buttons that allow the user to go back and forth between the slides manually. The data-slide attribute accepts the keywords "prev" or "next", which alters the slide position relative to its current position.