Carousel

A slideshow component for cycling through elements—images or slides of text—like a carousel.

Bootstrap Carousel

Carousel works with a series of images, text, or custom markup. It also includes support for previous/next controls and indicators.

Preview

Jsx

Props

First slide label

This is content paragraph enough to say.

Second slide label

This is content paragraph enough to say.

Third slide label

This is content paragraph enough to say.

import React from 'react';
import { Carousel } from 'react-bootstrap';
//Images
import slide1 from '../../../Assets/dist/img/slide1.jpg';
import slide2 from '../../../Assets/dist/img/slide2.jpg';
import slide3 from '../../../Assets/dist/img/slide3.jpg';

const BsCarousel = () => {
  return (
    <Carousel>
        <Carousel.Item>
            <img
                className="d-block w-100"
                src={slide1}
                alt="First slide"
            />
            <Carousel.Caption>
                <h5 className="text-white">First slide label</h5>
                <p>This is content paragraph enough to say.</p>
            </Carousel.Caption>
        </Carousel.Item>
        <Carousel.Item>
            <img
                className="d-block w-100"
                src={slide2}
                alt="Second slide"
            />

            <Carousel.Caption>
                <h5 className="text-white">Second slide label</h5>
                <p>This is content paragraph enough to say.</p>
            </Carousel.Caption>
        </Carousel.Item>
        <Carousel.Item>
            <img
                className="d-block w-100"
                src={slide3}
                alt="Third slide"
            />

            <Carousel.Caption>
                <h5 className="text-white">Third slide label</h5>
                <p>This is content paragraph enough to say.</p>
            </Carousel.Caption>
        </Carousel.Item>
    </Carousel>
  );
}

export default BsCarousel;

props	Type	Default	Description
activeIndex	number		controlled by: `onSelect`, initial prop: `defaultActiveIndex` Controls the current visible slide
controls	boolean	`true`	Show the Carousel previous and next arrows for changing the current slide
fade	boolean	`false`	Animates slides with a crossfade animation instead of the default slide animation
indicatorLabels	array{'{'}"<>"{'}'}	`[]`	An array of labels for the indicators. Defaults to "Slide #" if not provided.
indicators	boolean	`true`	Show a set of slide position indicators
interval	number \|`null`	`5000`	The amount of time to delay between automatically cycling an item. If `null`, carousel will not automatically cycle.
keyboard	boolean	`true`	Whether the carousel should react to keyboard events.
nextIcon	node		Override the default button icon for the "next" control
nextLabel	string	`'Next'`	Label shown to screen readers only, can be used to show the next element in the carousel. Set to null to deactivate.
onSelect	function		controls `activeIndex` Callback fired when the active item changes. `(eventKey: number, event: Object \| null) ={'{'}">"{'}'} void`
onSlid	function		Callback fired when a slide transition ends. `(eventKey: number, direction: 'left' \| 'right') ={'{'}">"{'}'} void`
onSlide	function		Callback fired when a slide transition starts. `(eventKey: number, direction: 'left' \| 'right') ={'{'}">"{'}'} void`
pause	`'hover'` \| `false`	`'hover'`	If set to `"hover"`, pauses the cycling of the carousel on `mouseenter` and resumes the cycling of the carousel on `mouseleave`. If set to `false`, hovering over the carousel won't pause it. On touch-enabled devices, when set to `"hover"`, cycling will pause on `touchend` (once the user finished interacting with the carousel) for two intervals, before automatically resuming. Note that this is in addition to the above mouse behavior.
prevIcon	node		Override the default button icon for the "previous" control
prevLabel	string	`'Previous'`	Label shown to screen readers only, can be used to show the previous element in the carousel. Set to null to deactivate.
slide	boolean	`'true'`	Enables animation on the Carousel as it transitions between slides.
touch	boolean	`'true'`	Whether the carousel should support left/right swipe interactions on touchscreen devices.
variant	`'dark'`	Color variant that controls the colors of the controls, indicators and captions.
wrap	boolean	`'true'`	Whether the carousel should cycle continuously or have hard stops.
bsPrefix	string	`'carousel'`	Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Basic Swiper carousel

Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. It is intended to be used in mobile websites, mobile web apps, and mobile native/hybrid apps.

Preview

Jsx

import React from 'react';
//Swiper Carousel
import { Swiper, SwiperSlide } from 'swiper/react';
import { Pagination, Lazy } from 'swiper';
import "swiper/css/pagination";

//Images
import slide1 from '../../../Assets/dist/img/slide1.jpg';
import slide2 from '../../../Assets/dist/img/slide2.jpg';
import slide4 from '../../../Assets/dist/img/slide4.jpg';
import slide5 from '../../../Assets/dist/img/slide5.jpg';

const BasicSwiperCarousel = () => {
  return (
    <Swiper
        lazy={true}
        pagination={{
            dynamicBullets: true,
        }}
        modules={[Pagination, Lazy]}
    >
        <SwiperSlide><img src={slide2} alt="Swiper content" /></SwiperSlide>
        <SwiperSlide><img src={slide4} alt="Swiper content" /></SwiperSlide>
        <SwiperSlide><img src={slide5} alt="Swiper content" /></SwiperSlide>
        <SwiperSlide><img src={slide1} alt="Swiper content" /></SwiperSlide>
    </Swiper>
  );
}

export default BasicSwiperCarousel;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Responsive Swiper carousel

Responsive option can be used for setting breakpoints and additional options within. Try changing your browser width to see.

Preview

Jsx

import React from 'react';
//Swiper Carousel
import { Swiper, SwiperSlide } from 'swiper/react';
import { Pagination, Lazy } from 'swiper';
import "swiper/css/pagination";

//Images
import slide1 from '../../../Assets/dist/img/slide1.jpg';
import slide2 from '../../../Assets/dist/img/slide2.jpg';
import slide3 from '../../../Assets/dist/img/slide3.jpg';
import slide4 from '../../../Assets/dist/img/slide4.jpg';
import slide5 from '../../../Assets/dist/img/slide5.jpg';
import slide6 from '../../../Assets/dist/img/slide6.jpg';

const ResponsiveSwiperCarousel = () => {
  return (
    <Swiper
        lazy={true}
        pagination={{
            clickable: true,
        }}
        breakpoints={{
            0: {
                slidesPerView: 1,
            },
            480: {
                slidesPerView: 2,
                spaceBetween: 20,
            },
            640: {
                slidesPerView: 2,
                spaceBetween: 20,
            },
            768: {
                slidesPerView: 2,
                spaceBetween: 30,
            },
            800: {
                slidesPerView: 3,
                spaceBetween: 10
            },
            1024: {
                slidesPerView: 4,
                spaceBetween: 10,

            },
        }}
        modules={[Pagination, Lazy]}
        className="swiper-carousel"
    >

        <SwiperSlide className='swiper-item swiper-content'>
            <img height={"auto"} src={slide1} alt="Swiper content" />
        </SwiperSlide>
        <SwiperSlide className='swiper-item swiper-content'>
            <img height={"auto"} src={slide2} alt="Swiper content" />
        </SwiperSlide>
        <SwiperSlide className='swiper-item swiper-content'>
            <img height={"auto"} src={slide3} alt="Swiper content" />
        </SwiperSlide>
        <SwiperSlide className='swiper-item swiper-content'>
            <img height={"auto"} src={slide4} alt="Swiper content" />
        </SwiperSlide>
        <SwiperSlide className='swiper-item swiper-content'>
            <img height={"auto"} src={slide5} alt="Swiper content" />
        </SwiperSlide>
        <SwiperSlide className='swiper-item swiper-content'>
            <img height={"auto"} src={slide6} alt="Swiper content" />
        </SwiperSlide>

    </Swiper>
  );
}

export default ResponsiveSwiperCarousel;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Card Carousel - Center with Loop

Works well with odd and even items on screen. Keep in mind that dots don't work here like a pagination.

Preview

Jsx

Some quick example text to build on the card title and make up the bulk of the card's content.

import React from 'react';
//Swiper Carousel
import { Swiper, SwiperSlide } from 'swiper/react';
import { Pagination, Lazy } from 'swiper';
import "swiper/css/pagination";

const CardCarousel = () => {
  return (
    <Swiper
        slidesPerView={3}
        centeredSlides={true}
        loop={true}
        lazy={true}
        loopFillGroupWithBlank={true}
        pagination={{
            clickable: true,
        }}
        breakpoints={{
            0: {
                slidesPerView: 1
            },
            480: {
                slidesPerView: 2
            }, spaceBetween: 20,
            640: {
                slidesPerView: 2,
                spaceBetween: 20,
            },
            768: {
                slidesPerView: 2,
                spaceBetween: 20,
            },
            800: {
                slidesPerView: 3,
                spaceBetween: 20
            },
            1024: {
                slidesPerView: 3,
                spaceBetween: 30,

            },
        }}
        modules={[Pagination, Lazy]}
        className="swiper-carousel"
    >
        <SwiperSlide>
            <Card >
                <Card.Img variant="top" src={slide1} />
                <Card.Body>
                    <Card.Text>
                        Some quick example text to build on the card title and make up the bulk of the card's content.
                    </Card.Text>
                </Card.Body>
            </Card>
        </SwiperSlide>
        <SwiperSlide>
            <Card >
                <Card.Img variant="top" src={slide2} />
                <Card.Body>
                    <Card.Text>
                        Some quick example text to build on the card title and make up the bulk of the card's content.
                    </Card.Text>
                </Card.Body>
            </Card>
        </SwiperSlide>
        <SwiperSlide>
            <Card >
                <Card.Img variant="top" src={slide3} />
                <Card.Body>
                    <Card.Text>
                        Some quick example text to build on the card title and make up the bulk of the card's content.
                    </Card.Text>
                </Card.Body>
            </Card>
        </SwiperSlide>
        <SwiperSlide>
            <Card >
                <Card.Img variant="top" src={slide4} />
                <Card.Body>
                    <Card.Text>
                        Some quick example text to build on the card title and make up the bulk of the card's content.
                    </Card.Text>
                </Card.Body>
            </Card>
        </SwiperSlide>
    </Swiper>
  );
}

export default CardCarousel;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Auto Height Carousel

To enable use autoHeight= {true}. At the moment works only with 1 item on screen. The plan is to calculate all visible items and change height according to heighest item.

Preview

Jsx

Lorem ipsum dolor sit, amet consectetur adipisicing elit. A hic magni rem consectetur iure? Suscipit esse totam id sed! Nostrum. https://demo.de Posted on Jan 9, 2022

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Rem, dicta!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis natus molestias quas voluptas at atque doloremque odit doloribus tempora perferendis ratione dolorum ea eligendi enim est, culpa rerum quo sunt, ex tempore accusamus in assumenda fuga quibusdam!Posted on Jan 11, 2022

import React from 'react';
import { Card } from 'react-bootstrap';
//Swiper Carousel
import { Swiper, SwiperSlide } from 'swiper/react';
import { Autoplay, Pagination } from 'swiper';
const CarouselWithAutoHight = () => {
  return (
    <Card bg="primary" className="text-center">
        <Card.Body className="twitter-slider-wrap">
            <div className="twitter-icon text-center mb-3">
                <i className="fa fa-twitter" />
            </div>
            <Swiper
                autoHeight={true}
                loop={true}
                autoplay={{
                    delay: 5000,
                }}
                pagination={{
                    clickable: true,
                }}
                modules={[Pagination, Autoplay]}
                className="swiper-carousel tweeter-carousel"
            >
                <SwiperSlide>
                    <p className="tweet">Lorem ipsum dolor sit, amet consectetur adipisicing elit. A hic magni rem consectetur iure? Suscipit esse totam id sed! Nostrum. <a href="#demo" data-expanded-url="#demo" target=" _blank" title="#title" data-scribe="element:url"><span>https://</span>demo.de<span> </span></a>
                        <p className="timePosted"><a href="#demo">Posted on Jan 9, 2022</a></p>
                    </p>
                </SwiperSlide>
                <SwiperSlide>
                    <p className="tweet">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Rem, dicta!<br /><br />
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis natus molestias quas voluptas at atque doloremque odit doloribus tempora perferendis ratione dolorum ea eligendi enim est, culpa rerum quo sunt, ex tempore accusamus in assumenda fuga quibusdam!
                        <p className="timePosted"><a href="#demo">Posted on Jan 11, 2022</a></p>
                    </p>
                </SwiperSlide>
            </Swiper>
        </Card.Body>
    </Card>
  );
}

export default CarouselWithAutoHight;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

React-Bootstrap Carousel
Basic Swiper Carousel
Responsive Swiper carousel
Card Carousel
Auto Height Carousel