10+ React Carousel Examples

This post contains a total of 10+ React Carousel Examples with Source Code. All these Carousels are made using React.

You can use the source code of these examples with credits to the original owner.

Related Posts

React Carousel Examples

1. Simple React Carousel Slides

Made by Ryan Santos. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
html {
  box-sizing: border-box;
  font-size: 10px;
}
@media (max-width: 425px) {
  html {
    font-size: 8px;
  }
}

body {
  font-size: 1.5rem;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  box-sizing: inherit;
}

ul {
  list-style-type: none;
  padding: 0;
}

a {
  text-decoration: none;
  color: inherit;
}

.carousel__wrap {
  margin-top: 10%;
  align-items: center;
  display: flex;
  flex: 1;
  justify-content: center;
  position: relative;
  width: 80%;
  left: 50%;
  transform: translateX(-50%);
}

.carousel__inner {
  height: 40rem;
  position: relative;
  width: calc(90rem);
}

.carousel__container {
  height: 100%;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.carousel__slide-list {
  height: 100%;
  left: 50%;
  list-style-type: none;
  margin: 0;
  padding: 0;
  position: absolute;
  transform: translateX(-50%);
  width: calc(330rem);
}

.carousel__slide-item {
  display: inline-block;
  height: 30rem;
  margin: 0;
  padding: 1rem;
  position: absolute;
  transition: all 0.3s;
  width: 30rem;
}

.carousel__slide-item-img-link {
  cursor: zoom-in;
  display: flex;
  height: 100%;
  overflow: hidden;
  position: relative;
  width: 100%;
}
.carousel__slide-item-img-link img {
  height: 100%;
  object-fit: cover;
  transition: all 0.5s ease;
  width: 100%;
}
.carousel__slide-item-img-link::after {
  align-items: center;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  content: "read more";
  display: flex;
  height: 100%;
  justify-content: center;
  opacity: 0;
  position: absolute;
  transition: all 0.5s ease;
  width: 100%;
}
.carousel__slide-item-img-link:hover::after {
  opacity: 1;
}
.carousel__slide-item-img-link:hover img {
  transform: scale(1.3);
}

.carousel-slide-item__body {
  bottom: -2.5rem;
  height: 10%;
  position: absolute;
}
.carousel-slide-item__body h4 {
  margin: 0.7rem 0 0;
  text-transform: uppercase;
}
.carousel-slide-item__body p {
  font-size: 1.2rem;
  line-height: 1.3;
  margin: 0.7rem 0 0;
}

.carousel__btn {
  align-items: center;
  background: 0;
  border: 0;
  cursor: pointer;
  display: flex;
  justify-content: center;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.carousel__btn--prev {
  left: -10rem;
}
.carousel__btn--next {
  right: -10rem;
}

.carousel__btn-arrow {
  border: solid black;
  border-width: 0 0.4rem 0.4rem 0;
  height: 6rem;
  padding: 3px;
  width: 6rem;
  z-index: 10;
}
.carousel__btn-arrow--left {
  transform: rotate(135deg);
}
.carousel__btn-arrow--right {
  transform: rotate(-45deg);
}

.carousel__dots {
  display: inline-block;
  left: 50%;
  margin-top: 2rem;
  position: absolute;
  transform: translateX(-50%);
}
.carousel__dots .dot {
  background: #ccc;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  height: 2rem;
  margin: 0 0.3rem;
  outline: none;
  transform: scale(0.5);
  width: 2rem;
}
.carousel__dots .dot.active {
  background: black;
}
</style>
</head>
<body>
  <div id="root"></div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/react/16.7.0-alpha.2/umd/react.production.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.7.0-alpha.2/umd/react-dom.production.min.js'></script>
      <script>
/************************************
1. If you want to add or remove items you will need to change a variable called $slide-count in the CSS *minimum 3 slides

2. if you want to change the dimensions of the slides you will need to edit the slideWidth variable here πŸ‘‡ and the $slide-width variable in the CSS.
************************************/
const slideWidth = 30;

const _items = [
{
  player: {
    title: 'Efren Reyes',
    desc: 'Known as "The Magician", Efren Reyes is well regarded by many professionals as the greatest all around player of all time.',
    image: 'https://i.postimg.cc/RhYnBf5m/er-slider.jpg' } },


{
  player: {
    title: "Ronnie O'Sullivan",
    desc: "Ronald Antonio O'Sullivan is a six-time world champion and is the most successful player in the history of snooker.",
    image: 'https://i.postimg.cc/qBGQNc37/ro-slider.jpg' } },


{
  player: {
    title: 'Shane Van Boening',
    desc: 'The "South Dakota Kid" is hearing-impaired and uses a hearing aid, but it has not limited his ability.',
    image: 'https://i.postimg.cc/cHdMJQKG/svb-slider.jpg' } },


{
  player: {
    title: 'Mike Sigel',
    desc: 'Mike Sigel or "Captain Hook" as many like to call him is an American professional pool player with over 108 tournament wins.',
    image: 'https://i.postimg.cc/C12h7nZn/ms-1.jpg' } },


{
  player: {
    title: 'Willie Mosconi',
    desc: 'Nicknamed "Mr. Pocket Billiards," Willie Mosconi was among the first Billiard Congress of America Hall of Fame inductees.',
    image: 'https://i.postimg.cc/NfzMDVHP/willie-mosconi-slider.jpg' } }];




const length = _items.length;
_items.push(..._items);

const sleep = (ms = 0) => {
  return new Promise(resolve => setTimeout(resolve, ms));
};

const createItem = (position, idx) => {
  const item = {
    styles: {
      transform: `translateX(${position * slideWidth}rem)` },

    player: _items[idx].player };


  switch (position) {
    case length - 1:
    case length + 1:
      item.styles = { ...item.styles, filter: 'grayscale(1)' };
      break;
    case length:
      break;
    default:
      item.styles = { ...item.styles, opacity: 0 };
      break;}


  return item;
};

const CarouselSlideItem = ({ pos, idx, activeIdx }) => {
  const item = createItem(pos, idx, activeIdx);

  return /*#__PURE__*/(
    React.createElement("li", { className: "carousel__slide-item", style: item.styles }, /*#__PURE__*/
    React.createElement("div", { className: "carousel__slide-item-img-link" }, /*#__PURE__*/
    React.createElement("img", { src: item.player.image, alt: item.player.title })), /*#__PURE__*/

    React.createElement("div", { className: "carousel-slide-item__body" }, /*#__PURE__*/
    React.createElement("h4", null, item.player.title), /*#__PURE__*/
    React.createElement("p", null, item.player.desc))));



};

const keys = Array.from(Array(_items.length).keys());

const Carousel = () => {
  const [items, setItems] = React.useState(keys);
  const [isTicking, setIsTicking] = React.useState(false);
  const [activeIdx, setActiveIdx] = React.useState(0);
  const bigLength = items.length;

  const prevClick = (jump = 1) => {
    if (!isTicking) {
      setIsTicking(true);
      setItems(prev => {
        return prev.map((_, i) => prev[(i + jump) % bigLength]);
      });
    }
  };

  const nextClick = (jump = 1) => {
    if (!isTicking) {
      setIsTicking(true);
      setItems(prev => {
        return prev.map(
        (_, i) => prev[(i - jump + bigLength) % bigLength]);

      });
    }
  };

  const handleDotClick = idx => {
    if (idx < activeIdx) prevClick(activeIdx - idx);
    if (idx > activeIdx) nextClick(idx - activeIdx);
  };

  React.useEffect(() => {
    if (isTicking) sleep(300).then(() => setIsTicking(false));
  }, [isTicking]);

  React.useEffect(() => {
    setActiveIdx((length - items[0] % length) % length); // prettier-ignore
  }, [items]);

  return /*#__PURE__*/(
    React.createElement("div", { className: "carousel__wrap" }, /*#__PURE__*/
    React.createElement("div", { className: "carousel__inner" }, /*#__PURE__*/
    React.createElement("button", { className: "carousel__btn carousel__btn--prev", onClick: () => prevClick() }, /*#__PURE__*/
    React.createElement("i", { className: "carousel__btn-arrow carousel__btn-arrow--left" })), /*#__PURE__*/

    React.createElement("div", { className: "carousel__container" }, /*#__PURE__*/
    React.createElement("ul", { className: "carousel__slide-list" },
    items.map((pos, i) => /*#__PURE__*/
    React.createElement(CarouselSlideItem, {
      key: i,
      idx: i,
      pos: pos,
      activeIdx: activeIdx })))), /*#__PURE__*/




    React.createElement("button", { className: "carousel__btn carousel__btn--next", onClick: () => nextClick() }, /*#__PURE__*/
    React.createElement("i", { className: "carousel__btn-arrow carousel__btn-arrow--right" })), /*#__PURE__*/

    React.createElement("div", { className: "carousel__dots" },
    items.slice(0, length).map((pos, i) => /*#__PURE__*/
    React.createElement("button", {
      key: i,
      onClick: () => handleDotClick(i),
      className: i === activeIdx ? 'dot active' : 'dot' }))))));


};

ReactDOM.render( /*#__PURE__*/React.createElement(Carousel, null), document.getElementById('root'));
    </script>
</body>
</html>

2. React Carousel Photo Gallery

Made by Matthew Vincent. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
body {
  background: rgba(255, 255, 255, 0.7);
}

.bg-img {
  z-index: 0;
  width: 100%;
  height: 100%;
  filter: blur(20px);
  position: absolute;
  background-size: cover !important;
}
.bg-img.fade-bg {
  -webkit-animation: fade-bg 1000ms 1 ease-in;
          animation: fade-bg 1000ms 1 ease-in;
}

.app {
  z-index: 100;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.carousel {
  display: flex;
  padding: 4vh;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 2px;
  position: relative;
  width: 100vw;
  height: 100vh;
  justify-content: center;
  align-items: center;
}

.image {
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 70vh;
}
.image img {
  max-width: 70vh;
  border-radius: 2px;
  z-index: 10;
  position: absolute;
}
.image img.shadow {
  position: relative;
  z-index: 0;
  filter: blur(20px);
  top: 20px;
}
.image.fade {
  -webkit-animation: fadeIn 1000ms 1 ease-in;
          animation: fadeIn 1000ms 1 ease-in;
}

.controls {
  list-style: none;
  display: flex;
  flex-direction: column;
  height: 87vh;
}
.controls.stretch-controls {
  -webkit-animation: stretch-controls 500ms 1 cubic-bezier(0.25, 0.46, 0.45, 0.94);
          animation: stretch-controls 500ms 1 cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.controls li {
  min-width: 1.5vw;
  height: 100%;
  cursor: pointer;
  transform: scale(1);
  background: transparent;
  border-top: 1px solid rgba(0, 0, 0, 0.8);
  border-left: 1px solid rgba(0, 0, 0, 0.8);
  background: transparent;
}
.controls li.selected {
  background: rgba(0, 0, 0, 0.8);
}
.controls li:focus {
  outline: none;
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 0;
    transform: translateX(-5vw);
  }
  60% {
    transform: translateX(0vw);
  }
  80% {
    opcaity: 1;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 0;
    transform: translateX(-5vw);
  }
  60% {
    transform: translateX(0vw);
  }
  80% {
    opcaity: 1;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes fade-bg {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 0;
  }
  80% {
    opcaity: 1;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade-bg {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 0;
  }
  80% {
    opcaity: 1;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes stretch-controls {
  0% {
    height: 87vh;
    opacity: 0;
  }
  50% {
    height: 57vh;
  }
  100% {
    height: 87vh;
    opacity: 1;
  }
}
@keyframes stretch-controls {
  0% {
    height: 87vh;
    opacity: 0;
  }
  50% {
    height: 57vh;
  }
  100% {
    height: 87vh;
    opacity: 1;
  }
}
</style>
</head>
<body>
  <script src="https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-xpt1/t39.3284-6/12809151_461212794077232_1335969731_n.js"></script> 
<script src="https://fb.me/react-dom-15.0.1.js"></script>

<div id="app" />
    <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>

  <script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js'></script>
      <script>
const images = [
'https://66.media.tumblr.com/121484208c62e821a9aaae781eb71a0f/tumblr_ocabywSLDS1tt707ho1_1280.jpg',
'https://65.media.tumblr.com/23d832933a701e44e90bbde2c30abb5c/tumblr_nyc2laCLUO1tt707ho1_1280.jpg',
'https://67.media.tumblr.com/9a418535c1cda5e42bb9d76c106bffdd/tumblr_oc4uma7qWf1tt707ho1_1280.jpg',
'https://65.media.tumblr.com/24ed103915c9faefb2c87cc55fe8122f/tumblr_nxdifyM7HI1tt707ho1_1280.jpg',
'https://67.media.tumblr.com/254b588220d37334ab6513f3e9fdc87d/tumblr_o3f3kdJO1u1tt707ho1_1280.jpg',
'https://65.media.tumblr.com/83d341329b0080c3cbed3a9b9796a213/tumblr_nmxpzl5no81tt707ho1_1280.jpg',
'https://66.media.tumblr.com/5315659454f81912aa03d3943b22c392/tumblr_nmxpi5SRPa1tt707ho1_1280.jpg'];


class App extends React.Component {
  constructor() {
    super();

    this.state = {
      images: images,
      currentImg: images[3],
      fade: true };

  }

  componentDidMount() {
    this.removeFade();
  }

  goToPhoto(i) {
    this.setState({
      currentImg: this.state.images[i],
      fade: true });


    this.removeFade();
  }

  nextPhoto(i) {
    const images = this.state.images.slice();

    if (i + 1 < images.length) {
      this.setState({
        fade: true,
        currentImg: images[i + 1] });

    } else {
      this.setState({
        fade: true,
        currentImg: images[0] });

    }

    this.removeFade();
  }

  removeFade() {
    setTimeout(() => {
      this.setState({ fade: false });
    }, 1200);
  }

  render() {

    const bgStyle = {
      background: 'url(' +
      this.state.currentImg +
      ') no-repeat center center fixed' };


    const currentIndex = this.state.
    images.
    slice().
    indexOf(
    this.state.
    currentImg);

    return /*#__PURE__*/(
      React.createElement("div", { className: "app" }, /*#__PURE__*/
      React.createElement("div", {
        className: this.state.fade ? 'bg-img fade-bg' : 'bg-img',
        style: bgStyle }), /*#__PURE__*/

      React.createElement(Carousel, {
        img: this.state.currentImg,
        currentIndex: currentIndex,
        selectorCount: this.state.images.length,
        goToPhoto: this.goToPhoto.bind(this),
        nextPhoto: this.nextPhoto.bind(this),
        fade: this.state.fade })));



  }}
;

const Carousel = ({
  img,
  selectorCount,
  goToPhoto,
  currentIndex,
  nextPhoto,
  fade }) => /*#__PURE__*/

React.createElement("div", { className: "carousel" }, /*#__PURE__*/
React.createElement(Image, {
  img: img,
  nextPhoto: nextPhoto,
  currentIndex: currentIndex,
  fade: fade }), /*#__PURE__*/

React.createElement(Controls, {
  selectorCount: selectorCount,
  goToPhoto: goToPhoto,
  currentIndex: currentIndex,
  fade: fade }));




const Image = ({
  img,
  nextPhoto,
  currentIndex,
  fade }) => /*#__PURE__*/

React.createElement("div", {
  className: fade ? "image fade" : "image",
  onClick: () => {nextPhoto(currentIndex);} }, " ", /*#__PURE__*/
React.createElement("img", { src: img }), /*#__PURE__*/
React.createElement("img", {
  className: "shadow",
  src: img }));




const Controls = ({
  selectorCount,
  goToPhoto,
  currentIndex,
  fade }) =>
{
  const selectors = [];

  for (var i = 0; i < selectorCount; i += 1) {if (window.CP.shouldStopExecution(0)) break;
    selectors.push( /*#__PURE__*/
    React.createElement(Selector, {
      currentIndex: currentIndex,
      i: i,
      key: i,
      goToPhoto: goToPhoto }));


  }window.CP.exitedLoop(0);

  return /*#__PURE__*/(
    React.createElement("ul", { className: fade ? "controls stretch-controls" : "controls" },
    selectors));


};

const Selector = ({
  currentIndex,
  i,
  goToPhoto }) => /*#__PURE__*/

React.createElement("li", {
  className: i === currentIndex ? "selected" : "",
  key: i,
  onClick: () => {goToPhoto(i);} });




ReactDOM.render( /*#__PURE__*/React.createElement(App, null), document.getElementById('app'));
    </script>
</body>
</html>

3. React Carousel V-1.0

Made by Akhil kumar Amarneni. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title> 
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css'>
<style>
html {
  box-sizing: border-box;
  font-size: 10px;
}
@media (max-width: 425px) {
  html {
    font-size: 8px;
  }
}

body {
  font-size: 1.5rem;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

ul {
  list-style-type: none;
  padding: 0;
}

a {
  text-decoration: none;
  color: inherit;
}

.carousel__wrap {
  margin-top: 10%;
  align-items: center;
  display: flex;
  flex: 1;
  justify-content: center;
  position: relative;
  width: 80%;
  left: 50%;
  transform: translateX(-50%);
}

.carousel__inner {
  height: 40rem;
  position: relative;
  width: calc(90rem);
}

.carousel__container {
  height: 100%;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.carousel__slide-list {
  height: 100%;
  left: 50%;
  list-style-type: none;
  margin: 0;
  padding: 0;
  position: absolute;
  transform: translateX(-50%);
  width: calc(330rem);
}

.carousel__slide-item {
  display: inline-block;
  height: 30rem;
  margin: 0;
  padding: 1rem;
  position: absolute;
  transition: all 0.3s;
  width: 30rem;
}

.carousel__slide-item-img-link {
  display: flex;
  height: 85%;
  position: relative;
  width: 90%;
  margin-top: 20px;
}
.carousel__slide-item-img-link img {
  height: 85%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: all 0.5s ease;
  width: 90%;
}
.carousel__slide-item-img-link:hover::after {
  opacity: 1;
}
.carousel__slide-item-img-link:hover img {
  transform: scale(1.2);
}

.carousel-slide-item__body {
  bottom: -2.5rem;
  height: 10%;
  position: absolute;
}
.carousel-slide-item__body h4 {
  margin: 0.7rem 0 0;
  text-transform: uppercase;
  font-size: 1.6rem;
}
.carousel-slide-item__body p {
  font-size: 1.6rem;
  line-height: 1.3;
  margin: 0.7rem 0 0;
}

.carousel__btn {
  align-items: center;
  background: 0;
  border: 0;
  cursor: pointer;
  display: flex;
  justify-content: center;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.carousel__btn--prev {
  left: -10rem;
}
.carousel__btn--next {
  right: -10rem;
}

.carousel__btn-arrow {
  border: solid black;
  border-width: 0 0.4rem 0.4rem 0;
  height: 5rem;
  padding: 3px;
  width: 5rem;
  z-index: 10;
}
.carousel__btn-arrow--left {
  transform: rotate(135deg);
}
.carousel__btn-arrow--right {
  transform: rotate(-45deg);
}

.carousel__dots {
  display: inline-block;
  left: 50%;
  margin-top: 2rem;
  position: absolute;
  transform: translateX(-50%);
}
.carousel__dots .dot {
  background: #ccc;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  height: 2rem;
  margin: 0 0.3rem;
  outline: none;
  transform: scale(0.5);
  width: 2rem;
}
.carousel__dots .dot.active {
  background: black;
}
</style>
</head>
<body>
  <div id="root"></div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/react/16.13.0/umd/react.production.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.0/umd/react-dom.production.min.js'></script>
      <script>
const _items = [
{
  item: {
    name: 'OnePlus-Mirror-Black',
    price: ' 45,999.00 Rs',
    image: 'https://www.itl.cat/pngfile/big/15-153953_how-to-find-the-best-wallpapers-for-android.jpg',
    category: 'Mobile' } },


{
  item: {
    name: 'Townsman Leather Watch',
    price: '5678.00 Rs',
    image: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRwyiSsuTNAYnQNXeJSoPeTA_de8W9ykQDDmg&usqp=CAU',
    category: 'Watch' } },


{
  item: {
    name: 'Swiss-Luxury-Watch',
    price: '7595.00 Rs',
    image: 'https://cdn3.boutique.humbleandrich.com/wp-content/uploads/2018/06/09222629/Most-Respected-Swiss-Luxury-Watch-Brands.jpg',
    category: 'Watch' } },


{
  item: {
    name: 'Apple-iPhone-11-64GB',
    price: ' 51,999.00 Rs',
    image: 'https://images.unsplash.com/photo-1595941069915-4ebc5197c14a?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MTF8fHNtYXJ0JTIwcGhvbmV8ZW58MHx8MHw%3D&ixlib=rb-1.2.1&w=1000&q=80',
    category: 'Mobile' } },


{
  item: {
    name: 'Bovet-1822-RΓ©cital AstΓ©rium',
    price: '9867.00 Rs',
    image: 'https://2x1dks3q6aoj44bz1r1tr92f-wpengine.netdna-ssl.com/wp-content/uploads/2019/05/Bovet-1822-R%C3%A9cital-20-Ast%C3%A9rium-Watch.jpg',
    category: 'Watch' } }];





const length = _items.length;
_items.push(..._items);
const slideWidth = 30;

const sleep = (ms = 0) => {
  return new Promise(resolve => setTimeout(resolve, ms));
};

const createItem = (position, idx, activeIdx) => {
  const item = {
    styles: {
      transform: `translateX(${position * slideWidth}rem)` },

    item: _items[idx].item };


  switch (position) {
    case length - 1:
    case length + 1:
      item.styles = { ...item.styles, filter: 'grayscale(1)' };
      break;
    case length:
      item.styles = { ...item.styles };
      break;
    default:
      item.styles = { ...item.styles, opacity: 0 };
      break;}


  return item;
};

const getStyle = (position, idx, activeIdx) => {
  const item = {
    styles: {} };



  switch (position) {
    case length - 1:
    case length + 1:
      item.styles = { ...item.styles };
      break;
    case length:
      item.styles = { ...item.styles, height: '110%', width: '100%', marginTop: 0 };
      break;
    default:
      item.styles = { ...item.styles };
      break;}


  return item;
};

const CarouselSlideItem = ({ pos, idx, activeIdx }) => {
  const item = createItem(pos, idx, activeIdx);
  const imgStyle = getStyle(pos, idx, activeIdx);

  return /*#__PURE__*/(
    React.createElement("li", { className: "carousel__slide-item", style: item.styles }, /*#__PURE__*/
    React.createElement("div", { className: "carousel__slide-item-img-link", style: imgStyle.styles }, /*#__PURE__*/
    React.createElement("img", { src: item.item.image, alt: item.item.title })), /*#__PURE__*/

    React.createElement("div", { className: "carousel-slide-item__body" }, /*#__PURE__*/
    React.createElement("h4", null, item.item.name), /*#__PURE__*/
    React.createElement("p", null, /*#__PURE__*/React.createElement("b", null, item.item.price, " ")), /*#__PURE__*/
    React.createElement("p", null, /*#__PURE__*/React.createElement("b", null, item.item.category)))));



};

const keys = Array.from(Array(_items.length).keys());

const Carousel = () => {
  const [items, setItems] = React.useState(keys);
  const [isTicking, setIsTicking] = React.useState(false);
  const [activeIdx, setActiveIdx] = React.useState(0);
  const bigLength = items.length;

  const prevClick = (jump = 1) => {
    if (!isTicking) {
      setIsTicking(true);
      setItems(prev => {
        return prev.map((_, i) => prev[(i + jump) % bigLength]);
      });
    }
  };

  const nextClick = (jump = 1) => {
    if (!isTicking) {
      setIsTicking(true);
      setItems(prev => {
        return prev.map(
        (_, i) => prev[(i - jump + bigLength) % bigLength]);

      });
    }
  };

  const handleDotClick = idx => {
    if (idx < activeIdx) prevClick(activeIdx - idx);
    if (idx > activeIdx) nextClick(idx - activeIdx);
  };

  React.useEffect(() => {
    if (isTicking) sleep(300).then(() => setIsTicking(false));
  }, [isTicking]);

  React.useEffect(() => {
    setActiveIdx((length - items[0] % length) % length);
  }, [items]);

  return /*#__PURE__*/(
    React.createElement("div", { className: "carousel__wrap" }, /*#__PURE__*/
    React.createElement("div", { className: "carousel__inner" }, /*#__PURE__*/
    React.createElement("button", {
      className: "carousel__btn carousel__btn--prev",
      onClick: () => prevClick() }, /*#__PURE__*/
    React.createElement("i", { className: "carousel__btn-arrow carousel__btn-arrow--left" })), /*#__PURE__*/

    React.createElement("div", { className: "carousel__container" }, /*#__PURE__*/
    React.createElement("ul", { className: "carousel__slide-list" },
    items.map((pos, i) => /*#__PURE__*/
    React.createElement(CarouselSlideItem, {
      key: i,
      idx: i,
      pos: pos,
      activeIdx: activeIdx })))), /*#__PURE__*/




    React.createElement("button", {
      className: "carousel__btn carousel__btn--next",
      onClick: () => nextClick() }, /*#__PURE__*/
    React.createElement("i", { className: "carousel__btn-arrow carousel__btn-arrow--right" })), /*#__PURE__*/

    React.createElement("div", { className: "carousel__dots" },
    items.slice(0, length).map((pos, i) => /*#__PURE__*/
    React.createElement("button", {
      key: i,
      onClick: () => handleDotClick(i),
      className: i === activeIdx ? 'dot active' : 'dot' }))))));


};

ReactDOM.render( /*#__PURE__*/React.createElement(Carousel, null), document.getElementById("root"));
//# sourceURL=pen.js
    </script>
</body>
</html>

4. React carousel with Button

Made by netta bondy. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
html, body{
  height: 100%;
}
  
body {
  background: #333;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: Helvetica Neue;
}
  
.container {
  width: 64px;
  overflow: hidden;
  border: 1px solid white;
}

button {
  width: 50%;
} 
  
.slide-container {
  position: relative;
  display: flex;
  margin: 0;
  padding: 0;
} 
 
li {
  list-style: none;
  font-size: 112px;
  color: white;
  padding: 0 4px 0 4px 
}
  
li:nth-child(1) {
  background: #1abc9c
}
  
li:nth-child(2){
  background: #e67e22
}
  
li:nth-child(3){
  background: #2ecc71
}
  
li:nth-child(4) {
  background: #8e44ad
}
  
li:nth-child(5) {
  background: #e74c3c
}
</style>
</head>
<body>
  <div id="app"></app>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.min.js'></script>
      <script id="rendered-js" >
class Application extends React.Component {
  constructor() {
    super();
    this.state = {
      activeIndex: 0 };

    this.onNextClick = this.onNextClick.bind(this);
    this.onPrevClick = this.onPrevClick.bind(this);
  }
  onNextClick() {
    if (this.state.activeIndex < 4) {
      this.setState({ activeIndex: this.state.activeIndex + 1 });
    } else {
      this.setState({ activeIndex: 0 });
    }
  }

  onPrevClick() {
    if (this.state.activeIndex > 0) {
      this.setState({ activeIndex: this.state.activeIndex - 1 });
    } else {
      this.setState({ activeIndex: 4 });
    }
  }
  render() {
    let sliderStyle = {
      transform: `translateX(${this.state.activeIndex * -100}%)`,
      transition: '0.2s' };

    return /*#__PURE__*/(
      React.createElement("div", { className: "container" }, /*#__PURE__*/
      React.createElement("div", { className: "buttons" }, /*#__PURE__*/
      React.createElement("button", { onClick: this.onPrevClick }, "β—€"), /*#__PURE__*/
      React.createElement("button", { onClick: this.onNextClick }, "β–Ά")), /*#__PURE__*/

      React.createElement("ol", { className: "slide-container", style: sliderStyle }, /*#__PURE__*/
      React.createElement("li", { key: 0 }, 1), /*#__PURE__*/
      React.createElement("li", { key: 1 }, 2), /*#__PURE__*/
      React.createElement("li", { key: 2 }, 3), /*#__PURE__*/
      React.createElement("li", { key: 3 }, 4), /*#__PURE__*/
      React.createElement("li", { key: 4 }, 5))));



  }}


ReactDOM.render( /*#__PURE__*/React.createElement(Application, null), document.getElementById('app'));
//# sourceURL=pen.js
    </script>
</body>
</html>

5. Micro React Carousel 2019

Made by Remi Shergold. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body{
  background-color: #3b4652;
  padding:50px;
}
#root {
  margin: auto;
  max-width: 600px;
}

.carousel {
}

.carousel-frame {
  overflow-x: scroll;
  padding: 0;
  -ms-scroll-snap-type: x mandatory;
      scroll-snap-type: x mandatory;
  scrollbar-width: none;
  white-space: nowrap;
  -ms-overflow-style: none;
}
.carousel-frame::-webkit-scrollbar { 
  display: none;
}

.carousel-item {
  display: inline-block;
  scroll-snap-align: start;
  vertical-align: top;
  white-space: initial;
  width: 100%;
}

.carousel-item > * {
  max-width: 100%;
}

.carousel-progress {
  text-align: center;
}

.carousel-progress-dot {
  background-color: transparent;
  border-radius: 1rem;
  border: 1px solid white;
  display: inline-block;
  height: 0.75rem;
  margin: 0.25rem;
  padding: 0;
  transition: background-color 300ms;
  width: 0.75rem;
}
.carousel-progress-dot.is-current {
  background-color: white;
}
</style>
</head>
<body>
  <div id="root"></div>
  <script src='https://unpkg.com/[email protected]/umd/react.production.min.js'></script>
<script src='https://unpkg.com/[email protected]/umd/react-dom.production.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/iamdustan-smoothscroll/0.4.0/smoothscroll.js'></script>
      <script>
const App = () => /*#__PURE__*/
React.createElement(Carousel, null, /*#__PURE__*/
React.createElement("img", { src: "https://placeimg.com/600/250/nature" }), /*#__PURE__*/
React.createElement("div", null, /*#__PURE__*/
React.createElement("h1", null, "A React Carousel in 34 lines of js"), /*#__PURE__*/
React.createElement("p", null, "An experiment with css scroll-snap and js scrollIntoView"), /*#__PURE__*/
React.createElement("p", null, "Warning: This has browser compatibility issues. Check caniuse.com before using this.")), /*#__PURE__*/




React.createElement("img", { src: "https://placeimg.com/601/250/nature" }), /*#__PURE__*/
React.createElement("img", { src: "https://placeimg.com/602/250/nature" }), /*#__PURE__*/
React.createElement("img", { src: "https://placeimg.com/603/250/nature" }), /*#__PURE__*/
React.createElement("img", { src: "https://placeimg.com/604/250/nature" }), /*#__PURE__*/
React.createElement("img", { src: "https://placeimg.com/605/250/nature" }));



const scrollTo = (frameEl, index) =>
frameEl.current.children[index].scrollIntoView({ behavior: "smooth" });

const Carousel = ({ children }) => {
  const frameEl = React.useRef(null);
  const [current, setCurrent] = React.useState(0);
  return /*#__PURE__*/(
    React.createElement("div", { class: "carousel" }, /*#__PURE__*/
    React.createElement("ul", {
      ref: frameEl,
      class: "carousel-frame",
      onScroll: () => {
        const { scrollLeft, scrollWidth } = frameEl.current;
        setCurrent(Math.round(scrollLeft / scrollWidth * children.length));
      } },

    children.map((child, index) => /*#__PURE__*/
    React.createElement("li", { "aria-hidden": index !== current, class: "carousel-item" },
    child))), /*#__PURE__*/


    React.createElement("div", { class: "carousel-progress" },
    children.map((_, index) => /*#__PURE__*/
    React.createElement("button", {
      class: `carousel-progress-dot ${current === index && "is-current"}`,
      onClick: () => scrollTo(frameEl, index) }))), /*#__PURE__*/



    React.createElement("button", {
      disabled: current == children.length - 1,
      onClick: () => {
        scrollTo(frameEl, (current + 1) % children.length);
      } }, "next")));

};

ReactDOM.render( /*#__PURE__*/React.createElement(App, null), document.getElementById("root"));
    </script>
</body>
</html>

6. React Carousel Custom version

Made by Fernando Gomes. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/svgs/fi-list.svg'>
<style>
@import url("https://fonts.googleapis.com/css?family=Nunito");
body {
  padding-top: 1em;
  background-color: #673AB7;
  font-family: "Nunito";
}

.basedOn {
  text-align: center;
  font-size: 1.2em;
  color: #FFF;
}
.basedOn a, .basedOn a:visited, .basedOn a:hover, .basedOn a:active {
  color: #FFEB3B;
}

#carousel {
  height: 100%;
  width: 100%;
  margin: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

.arrow {
  position: absolute;
  width: 60px;
  height: 100%;
  background-color: #673AB7;
  text-align: center;
  font-size: 2em;
  cursor: pointer;
  line-height: 30px;
  z-index: 1000;
  top: 50%;
  transform: translate(0, -50%);
  transition: all 500ms;
}
.arrow i {
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  position: absolute;
}
.arrow-right {
  right: 0;
}
.arrow-left {
  left: 0;
}
.arrow:hover {
  background-color: #512DA8;
  color: #FFEB3B;
}

.item {
  text-align: center;
  color: white;
  font-size: 40px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: box-shadow 1s, height 250ms, width 250ms, left 1s, margin-top 1s, line-height 250ms, background-color 1s;
}

.level-2 {
  box-shadow: -0.1em 0.1em 0.2em #212121;
  height: 72%;
  width: 17%;
  line-height: 72%;
  background-color: #228291;
  left: 15%;
}

.level-1 {
  box-shadow: -0.2em 0.2em 0.4em #212121;
  height: 78%;
  width: 23%;
  line-height: 78%;
  background-color: #6796E5;
  left: 30%;
}

.level0 {
  box-shadow: 0 0.4em 0.8em #212121;
  height: 85%;
  width: 30%;
  line-height: 85%;
  background-color: #4EC9E1;
  left: 50%;
}

.level1 {
  box-shadow: 0.2em 0.2em 0.4em #212121;
  height: 78%;
  width: 23%;
  line-height: 78%;
  background-color: #6796E5;
  left: 70%;
}

.level2 {
  box-shadow: 0.1em 0.1em 0.2em #212121;
  height: 72%;
  width: 17%;
  line-height: 72%;
  background-color: #228291;
  left: 85%;
}

.level-2,
.level2 {
  z-index: 0;
}

.level-1,
.level1 {
  z-index: 1;
}

.level0 {
  z-index: 2;
}

.left-enter {
  opacity: 0;
  left: 85%;
  height: -8%;
  width: -8%;
  line-height: 42%;
}
.left-enter.left-enter-active {
  opacity: 1;
  left: 85%;
  height: 72%;
  width: 17%;
  line-height: 72%;
  transition: box-shadow 1s, left 1s, opacity 1s, height 250ms, width 250ms, margin-top 1s, line-height 1s;
}

.left-leave {
  opacity: 1;
  left: 15%;
  height: 72%;
  width: 17%;
  line-height: 72%;
  z-index: -1;
}
.left-leave.left-leave-active {
  z-index: -1;
  left: 15%;
  opacity: 0;
  height: -8%;
  width: -8%;
  line-height: 120px;
  transition: box-shadow 1s, left 1s, opacity 1s, height 250ms, width 250ms, margin-top 1s, line-height 1s;
}

.right-enter {
  opacity: 0;
  left: 15%;
  height: -8%;
  width: -8%;
  line-height: 42%;
}
.right-enter.right-enter-active {
  left: 15%;
  opacity: 1;
  height: 72%;
  line-height: 72%;
  width: 17%;
  transition: box-shadow 1s, left 1s, opacity 1s, height 250ms, width 250ms, margin-top 1s, line-height 1s;
}

.right-leave {
  left: 85%;
  height: 72%;
  opacity: 1;
  line-height: 72%;
  width: 17%;
}
.right-leave.right-leave-active {
  left: 85%;
  opacity: 0;
  height: -8%;
  width: -8%;
  line-height: 42%;
  transition: box-shadow 1s, left 1s, opacity 1s, height 250ms, width 250ms, margin-top 1s, line-height 1s;
}

.noselect {
  -webkit-user-select: none;
  -html-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
</style>
</head>
<body>
  <div id="app"></div>
    <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>

  <script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-with-addons.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.min.js'></script>
      <script>
var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;

class Carousel extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      items: this.props.items,
      active: this.props.active,
      direction: '' };

    this.rightClick = this.moveRight.bind(this);
    this.leftClick = this.moveLeft.bind(this);
  }

  generateItems() {
    var items = [];
    var level;
    console.log(this.state.active);
    for (var i = this.state.active - 2; i < this.state.active + 3; i++) {if (window.CP.shouldStopExecution(0)) break;
      var index = i;
      if (i < 0) {
        index = this.state.items.length + i;
      } else if (i >= this.state.items.length) {
        index = i % this.state.items.length;
      }
      level = this.state.active - i;
      items.push( /*#__PURE__*/React.createElement(Item, { key: index, id: this.state.items[index], level: level }));
    }window.CP.exitedLoop(0);
    return items;
  }

  moveLeft() {
    var newActive = this.state.active;
    newActive--;
    this.setState({
      active: newActive < 0 ? this.state.items.length - 1 : newActive,
      direction: 'left' });

  }

  moveRight() {
    var newActive = this.state.active;
    this.setState({
      active: (newActive + 1) % this.state.items.length,
      direction: 'right' });

  }

  render() {
    return /*#__PURE__*/(
      React.createElement("div", { id: "carousel", className: "noselect" }, /*#__PURE__*/
      React.createElement("div", { className: "arrow arrow-left", onClick: this.leftClick }, /*#__PURE__*/React.createElement("i", { className: "fi-arrow-left" })), /*#__PURE__*/
      React.createElement(ReactCSSTransitionGroup, {
        transitionName: this.state.direction },
      this.generateItems()), /*#__PURE__*/

      React.createElement("div", { className: "arrow arrow-right", onClick: this.rightClick }, /*#__PURE__*/React.createElement("i", { className: "fi-arrow-right" })), /*#__PURE__*/
      React.createElement("div", { className: "basedOn" }, "Based on: ", /*#__PURE__*/React.createElement("strong", null, /*#__PURE__*/React.createElement("a", { href: "https://codepen.io/andyNroses/pen/KaENLb", target: "_blank" }, "andyNroses")))));


  }}


class Item extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      level: this.props.level };

  }

  render() {
    const className = 'item level' + this.props.level;
    return /*#__PURE__*/(
      React.createElement("div", { className: className,
        style: {
          backgroundImage: "url(http://lorempixel.com/400/200/)",
          backgroundSize: "cover",
          backgroundRepeat: "no-repeat",
          backgroundPosition: "center center" } }));




  }}


var items = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 12];
ReactDOM.render( /*#__PURE__*/React.createElement(Carousel, { items: items, active: 0 }), document.getElementById('app'));
    </script>
</body>
</html>

7. Super simple react carousel using hooks

Made by Evan Jin. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title> 
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
.wrapper {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background: #DAF7A6;
  overflow: hidden;
}

.frame {
  border: 10px solid #FF8E00;
  width: 250px;
  overflow: hidden;
}

.box-container {
  display: flex;
}

.box {
  box-sizing: border-box;
  border: 5px solid #FFF;
  background: #00E7FF;
  width: 250px;
  height: 250px;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.button-container {
  display: flex;
}

.button {
  background: #666;
  color: #fff;
  width: 50px;
  text-align: center;
  padding: 10px 20px;
  margin: 10px;
  user-select: none;
  cursor: pointer;
}

.button-2-container {
  display: flex;
}

.button-2 {
  width: 15px;
  height: 15px;
  border-radius: 15px;
  background: #E0E0E0;
  margin: 6px;
  cursor: pointer;
}

.active {
  background: #999;
}
</style>
</head>
<body>
  <div id='root'></div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js'></script>
      <script id="rendered-js" >
const { useState, useEffect, useRef } = React;

const TOTAL_SLIDES = 3; // n-1 in Array

const App = () => {
  const [current, setCurrent] = useState(0);
  const ref = useRef(null);

  const next = () => {
    if (current >= TOTAL_SLIDES) return;else
    setCurrent(current + 1);
  };

  const prev = () => {
    if (current === 0) return;else
    setCurrent(current - 1);
  };

  const desired = e => {
    setCurrent(Number(e.target.id));
  };

  useEffect(() => {
    ref.current.style.transition = 'all 0.2s ease-in-out';
    ref.current.style.transform = `translateX(-${current}00%)`;
  }, [current]);

  return /*#__PURE__*/(
    React.createElement("div", { className: "wrapper" }, /*#__PURE__*/
    React.createElement("p", null, current), /*#__PURE__*/
    React.createElement("div", { className: "frame" }, /*#__PURE__*/
    React.createElement("div", { className: "box-container", ref: ref }, /*#__PURE__*/
    React.createElement("div", { className: "box" }, "0"), /*#__PURE__*/
    React.createElement("div", { className: "box" }, "1"), /*#__PURE__*/
    React.createElement("div", { className: "box" }, "2"), /*#__PURE__*/
    React.createElement("div", { className: "box" }, "3"))), /*#__PURE__*/


    React.createElement("div", { className: "button-container" }, /*#__PURE__*/
    React.createElement("div", { className: "button", onClick: prev }, "Left"), /*#__PURE__*/
    React.createElement("div", { className: "button", onClick: next }, "Right")), /*#__PURE__*/

    React.createElement("div", { className: "button-2-container" },
    [0, 1, 2, 3].map((num) => /*#__PURE__*/
    React.createElement("div", {
      className: `button-2 ${num === current && 'active'}`,
      onClick: desired,
      id: num,
      key: num })))));

};

ReactDOM.render( /*#__PURE__*/React.createElement(App, null), document.getElementById("root"));
//# sourceURL=pen.js
    </script>
</body>
</html>

8. Simple React carousel

Made by Arnaud Brun. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
html, body, #app {
  height: 100%;
  width: 100%;
}

body {
  background: #333;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-family: Helvetica Neue;
}

h1 {
  font-size: 2em;
  color: #eee;
  display: inline-block;
}

a {
  color: white;
}

p {
  margin-top: 1em;
  text-align: center;
  color: #aaa;
}

.carousel {
  position: relative;
  width: 500px;
  height: 500px;
  overflow: hidden;
  margin: 0 auto;
}

.carousel-item {
  position: absolute;
  min-width: 500px;
  min-height: 400px;
}

.onRight {
  left: 100%;
}

.displayed {
  left: 0;
}

.onLeft {
  left: -100%;
}

.ps-move {
  -webkit-transition: left 1000ms ease-in-out;
  -moz-transition: left 1000ms ease-in-out;
  -o-transition: left 1000ms ease-in-out;
  -ms-transition: left 1000ms ease-in-out;
  transition: left 1000ms ease-in-out;
}
</style>
</head>
<body>
  <h1>Carousel</h1>
<div id="app"/>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/react/16.4.1/umd/react.production.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.1/umd/react-dom.production.min.js'></script>
      <script>
/*
 * A simple React component
 */
class Carousel extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      current: 0,
      nbPictures: 3,
      firstRun: true };

    this.timer;
  }

  componentDidMount() {
    this.timer = setInterval(() => {
      let next = this.state.current + 1;
      if (next === this.state.nbPictures) {
        next = 0;
      }
      this.setState({
        current: next,
        firstRun: false });

    }, 2500);
  }

  componentWillUnmount() {
    clearInterval(this.timer);
  }

  renderCarouselItems() {
    const colors = ['red', 'yellow', 'blue', 'green', 'indigo', 'black'];
    const carouselContent = Array.from(Array(this.state.nbPictures)).map((elt, i) => {
      let classes = "carousel-item";
      if (i === this.state.current) {
        // Move in the picture
        classes += " displayed";
        if (!this.state.firstRun) {
          classes += " ps-move";
        }
      } else
      if (this.state.current === 0 && i === this.state.nbPictures - 1) {
        // Move out the previous displayed picture which is the last
        classes += " onLeft ps-move";
      } else
      if (i === this.state.current - 1) {
        // Move out the "previous" picture
        classes += " onLeft ps-move";
      } else
      {
        classes += " onRight";
      }
      return /*#__PURE__*/React.createElement("div", { className: classes, style: { backgroundColor: colors[i] } });
    });
    return carouselContent;
  }



  render() {
    return /*#__PURE__*/(
      React.createElement("div", { className: "carousel" },
      this.renderCarouselItems()));


  }}


ReactDOM.render( /*#__PURE__*/React.createElement(Carousel, null), document.getElementById('app'));
    </script>
</body>
</html>

9. React-carousel with Arrow Buttons

Made by Alex Taietti. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
<style>
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:[email protected];1&display=swap");
@keyframes fade-in {
  from {
    opacity: 0;
    transform: scale(1.3);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes next-slide-in {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}
@keyframes next-slide-out {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
@keyframes back-slide-in {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}
@keyframes back-slide-out {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100%);
  }
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
*::before, *::after {
  content: "";
}

html {
  font-size: 10px;
}

#app {
  background: linear-gradient(to top left, #e66465, purple);
  font-family: "Playfair Display", serif;
}

.wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  padding: 50px 50px 70px 50px;
  flex-direction: column;
  max-width: 650px;
  margin: 0 auto;
}
@media only screen and (max-width: 650px) {
  .wrapper {
    padding: 30px 30px 50px 30px;
  }
}

.intro {
  text-align: center;
  font-size: 1.6rem;
  margin-bottom: 50px;
}
.intro h1 {
  font-size: 5rem;
  font-weight: lighter;
}
.intro h1,
.intro h2 {
  font-style: italic;
}
.intro h2 {
  margin-bottom: 20px;
}
.intro span {
  text-decoration: underline;
  color: #ff7a2a;
}
@media only screen and (max-width: 550px) {
  .intro h1 {
    font-size: 4rem;
  }
  .intro h2 {
    font-size: 1.6rem;
  }
}
@media only screen and (max-width: 450px) {
  .intro p {
    font-size: 1.2rem;
  }
}
@media only screen and (max-width: 415px) {
  .intro h1 {
    font-size: 3rem;
  }
}

.carousel {
  display: flex;
  position: relative;
  overflow: hidden;
  justify-content: center;
  align-items: center;
  height: 350px;
  margin-bottom: 50px;
  box-shadow: 0px 15px 30px 0px #151515;
  border-style: solid;
  border-width: 3px;
  transition-duration: 0.5s;
  transition-property: border-color;
}
.carousel .controls {
  position: absolute;
  z-index: 12121996;
  height: 30px;
  width: 30px;
  background-color: purple;
  border-radius: 50%;
  cursor: pointer;
  color: white;
  font-size: 1.4rem;
  display: flex;
  justify-content: center;
  align-items: center;
  user-select: none;
  transition-duration: 0.1s;
  transition-timing-function: ease-in;
}
.carousel .controls--back {
  left: 25px;
}
.carousel .controls--back span {
  position: relative;
  border-left: 5px solid pink;
  border-top: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid pink;
  border-bottom-left-radius: 1px;
  transform: translate3d(-3px, -1px, 0) rotateZ(30deg);
}
.carousel .controls--back span::before {
  position: absolute;
  border-top: 4px solid pink;
  width: 12px;
  border-top-right-radius: 10px;
  height: 15px;
  transform: rotateZ(-45deg) translate3d(8px, -3px, 0);
}
.carousel .controls--next {
  right: 25px;
}
.carousel .controls--next span {
  position: relative;
  border-left: 5px solid transparent;
  border-top: 5px solid transparent;
  border-right: 5px solid pink;
  border-bottom: 5px solid pink;
  border-bottom-right-radius: 1px;
  transform: translate3d(4px, -1px, 0) rotateZ(-34deg);
}
.carousel .controls--next span::before {
  position: absolute;
  border-top: 4px solid pink;
  width: 12px;
  border-top-left-radius: 10px;
  height: 15px;
  transform: rotateZ(45deg) translate3d(-17px, 5px, 0);
}
.carousel .controls:hover {
  height: 33px;
  width: 33px;
}
.carousel .slide {
  position: absolute;
  background-color: pink;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  padding: 50px;
  z-index: 0;
}
.carousel .slide__copy-message {
  position: absolute;
  top: 10px;
  font-size: 1.2rem;
  transition-duration: 0.5s;
}
.carousel .slide__copy-message.nope {
  top: 0;
  transform: translate3d(0, -100%, 0);
}
.carousel .slide__shape {
  animation-name: fade-in;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  cursor: crosshair;
  position: relative;
}
.carousel .slide__shape--heart {
  position: relative;
  width: 100px;
  height: 90px;
}
.carousel .slide__shape--heart::before, .carousel .slide__shape--heart::after {
  position: absolute;
  left: 50px;
  top: 0;
  width: 50px;
  height: 80px;
  background: red;
  border-radius: 50px 50px 0 0;
  transform: rotate(-45deg);
  transform-origin: 0 100%;
}
.carousel .slide__shape--heart::after {
  left: 0;
  transform: rotate(45deg);
  transform-origin: 100% 100%;
}
.carousel .slide__shape--pacman {
  width: 0px;
  height: 0px;
  border-right: 60px solid transparent;
  border-top: 60px solid orange;
  border-left: 60px solid orange;
  border-bottom: 60px solid orange;
  border-top-left-radius: 60px;
  border-top-right-radius: 60px;
  border-bottom-left-radius: 60px;
  border-bottom-right-radius: 60px;
}
.carousel .slide__shape--yin-yang {
  width: 96px;
  box-sizing: content-box;
  height: 48px;
  background: #eee;
  border-color: black;
  border-style: solid;
  border-width: 2px 2px 50px 2px;
  border-radius: 100%;
  position: relative;
}
.carousel .slide__shape--yin-yang::before {
  position: absolute;
  top: 50%;
  left: 0;
  background: #eee;
  border: 18px solid black;
  border-radius: 100%;
  width: 12px;
  height: 12px;
  box-sizing: content-box;
}
.carousel .slide__shape--yin-yang::after {
  position: absolute;
  top: 50%;
  left: 50%;
  background: black;
  border: 18px solid #eee;
  border-radius: 100%;
  width: 12px;
  height: 12px;
  box-sizing: content-box;
}
.carousel .slide__shape--cut-diamond {
  border-style: solid;
  border-color: transparent transparent DodgerBlue transparent;
  border-width: 0 25px 25px 25px;
  height: 0;
  width: 50px;
  box-sizing: content-box;
  position: relative;
  margin-bottom: 50px;
}
.carousel .slide__shape--cut-diamond:after {
  position: absolute;
  top: 25px;
  left: -25px;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: DodgerBlue transparent transparent transparent;
  border-width: 70px 50px 0 50px;
}
.carousel .slide__shape--infinity {
  position: relative;
  width: 150px;
  height: 80px;
  box-sizing: content-box;
}
.carousel .slide__shape--infinity::before, .carousel .slide__shape--infinity::after {
  content: "";
  box-sizing: content-box;
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  border: 15px solid green;
  border-radius: 40px 40px 0 40px;
  transform: rotate(-45deg);
}
.carousel .slide__shape--infinity::after {
  left: auto;
  right: 0;
  border-radius: 40px 40px 40px 0;
  transform: rotate(45deg);
}
.carousel--heart {
  border-color: red;
}
.carousel--pacman {
  border-color: orange;
}
.carousel--yin-yang {
  border-color: black;
}
.carousel--cut-diamond {
  border-color: DodgerBlue;
}
.carousel--infinity {
  border-color: green;
}
@media only screen and (max-width: 450px) {
  .carousel {
    height: 300px;
  }
}

.code-wrapper {
  border-width: 3px;
  border-style: solid;
  background-color: pink;
  box-shadow: 0px 15px 30px 0px #151515;
  position: relative;
  overflow: hidden;
  width: 100%;
  display: flex;
  transition-property: border-color;
  transition-duration: 0.5s;
}
.code-wrapper .code {
  font-family: monospace;
  font-size: 1.2rem;
  white-space: pre-wrap;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  padding: 60px;
  width: 100%;
}
.code-wrapper .code--last {
  position: absolute;
}
.code-wrapper .code--last.slide-left {
  animation-name: back-slide-out;
}
.code-wrapper .code--last.slide-right {
  animation-name: next-slide-out;
}
.code-wrapper .code--active {
  position: relative;
}
.code-wrapper .code--active.slide-left {
  animation-name: back-slide-in;
}
.code-wrapper .code--active.slide-right {
  animation-name: next-slide-in;
}
@media only screen and (max-width: 550px) {
  .code-wrapper .code {
    padding: 45px;
  }
}
@media only screen and (max-width: 450px) {
  .code-wrapper .code {
    padding: 30px;
  }
}
.code-wrapper--heart {
  border-color: red;
}
.code-wrapper--pacman {
  border-color: orange;
}
.code-wrapper--yin-yang {
  border-color: black;
}
.code-wrapper--cut-diamond {
  border-color: DodgerBlue;
}
.code-wrapper--infinity {
  border-color: green;
}
</style>
</head>
<body>
  <div id="app"></div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js'></script>
      <script>
!function () {
  const useState = React.useState;

  const SHAPES = [
  [
  "heart",
  `#heart {

  position: relative;
  width: 100px;
  height: 90px;

}

#heart::before, #heart::after {

  content: '';
  position: absolute;
  left: 50px;
  top: 0;
  width: 50px;
  height: 80px;
  background: red;
  border-radius: 50px 50px 0 0;
  transform: rotate(-45deg);
  transform-origin: 0 100%;

}

#heart::after {

  left: 0;
  transform: rotate(45deg);
  transform-origin: 100% 100%;

}`],

  [
  "pacman",
  `#pacman {

  width: 0px;
  height: 0px;
  border-right: 60px solid transparent;
  border-top: 60px solid orange;
  border-left: 60px solid orange;
  border-bottom: 60px solid orange;
  border-top-left-radius: 60px;
  border-top-right-radius: 60px;
  border-bottom-left-radius: 60px;
  border-bottom-right-radius: 60px;

}`],

  [
  "yin-yang",
  `#yin-yang {

  width: 96px;
  box-sizing: content-box;
  height: 48px;
  background: white;
  border-color: black;
  border-style: solid;
  border-width: 2px 2px 50px 2px;
  border-radius: 100%;
  position: relative;

}

#yin-yang::before {

  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  background: white;
  border: 18px solid black;
  border-radius: 100%;
  width: 12px;
  height: 12px;
  box-sizing: content-box;

}

#yin-yang::after {

  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  background: black;
  border: 18px solid white;
  border-radius: 100%;
  width: 12px;
  height: 12px;
  box-sizing: content-box;

}`],

  [
  "cut-diamond",
  `#cut-diamond {

  border-style: solid;
  border-color: transparent transparent DodgerBlue transparent;
  border-width: 0 25px 25px 25px;
  height: 0;
  width: 50px;
  box-sizing: content-box;
  position: relative;
  margin-bottom: 50px;

}

#cut-diamond::after {

  content: "";
  position: absolute;
  top: 25px;
  left: -25px;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: DodgerBlue transparent transparent transparent;
  border-width: 70px 50px 0 50px;

}`],

  [
  "infinity",
  `#infinity {

  position: relative;
  width: 150px;
  height: 80px;
  box-sizing: content-box;

}

#infinity::before, #infinity::after {

  content: "";
  box-sizing: content-box;
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  border: 15px solid green;
  border-radius: 40px 40px 0 40px;
  transform: rotate(-45deg);

}

#infinity::after {

  left: auto;
  right: 0;
  border-radius: 40px 40px 40px 0;
  transform: rotate(45deg);

}`]];



  function App(props) {
    const [app, updateApp] = useState({
      currentIndex: 0,
      lastIndex: -1,
      direction: 0 });


    return /*#__PURE__*/(
      React.createElement("div", { className: "wrapper" }, /*#__PURE__*/
      React.createElement("div", { className: "intro" }, /*#__PURE__*/
      React.createElement("h1", null, "β€œThe Shapes of CSS”"), /*#__PURE__*/
      React.createElement("h2", null, "from CSS-Tricks"), /*#__PURE__*/
      React.createElement("p", null, "an incredibly clever article written by ", /*#__PURE__*/
      React.createElement("span", null, "Chris Coyier"), ","), /*#__PURE__*/

      React.createElement("p", null, "shamelessly copied (only a little part) by me")), /*#__PURE__*/


      React.createElement(Carousel, {
        direction: app.direction,
        currentIndex: app.currentIndex,
        lastIndex: app.currentIndex,
        updateApp: updateApp,
        shapes: props.shapes }), /*#__PURE__*/


      React.createElement(Code, {
        direction: app.direction,
        lastShape: props.shapes[app.lastIndex],
        currentShape: props.shapes[app.currentIndex],
        shapes: props.shapes })));



  }

  function Carousel(props) {
    function showNext(index) {
      let lastIndex =
      index < 0 ?
      0 :
      index === props.shapes.length ?
      props.shapes.length - 1 :
      index;
      let currentIndex = index + 1 === props.shapes.length ? 0 : index + 1;
      props.updateApp({ currentIndex, lastIndex, direction: 1 });
    }

    function showPrevious(index) {
      let lastIndex = index < 0 ? 0 : index;
      let currentIndex = index - 1 < 0 ? props.shapes.length - 1 : index - 1;
      props.updateApp({ currentIndex, lastIndex, direction: -1 });
    }

    return /*#__PURE__*/(
      React.createElement("div", {
        className: "carousel carousel--" + props.shapes[props.currentIndex][0] }, /*#__PURE__*/

      React.createElement("div", {
        onClick: () => showPrevious(props.currentIndex),
        className: "controls controls--back" }, /*#__PURE__*/

      React.createElement("span", null)), /*#__PURE__*/


      React.createElement(Slide, { shape: props.shapes[props.currentIndex] }), /*#__PURE__*/

      React.createElement("div", {
        onClick: () => showNext(props.currentIndex),
        className: "controls controls--next" }, /*#__PURE__*/

      React.createElement("span", null))));



  }

  function Slide(props) {
    const [copyMessage, setCopyMessage] = useState(false);

    function copyCSS(shapeCSS) {
      navigator.clipboard.writeText(shapeCSS).then(
      () => {
        console.log("Successfully copied CSS to clipboard");

        setCopyMessage(true);

        setTimeout(setCopyMessage, 2000, false);
      },
      () => {
        console.log("Error: couldn't copy to clipboard :(");
      });

    }

    return /*#__PURE__*/(
      React.createElement("div", { key: props.shape[0], className: "slide slide--" + props.shape[0] }, /*#__PURE__*/
      React.createElement("h6", {
        className: "slide__copy-message " + (copyMessage ? "show" : "nope") }, "I am in your Clipboard!"), /*#__PURE__*/




      React.createElement("div", {
        onClick: () => copyCSS(props.shape[1]),
        className: "slide__shape slide__shape--" + props.shape[0] })));



  }

  function Code(props) {
    return /*#__PURE__*/(
      React.createElement("div", { className: "code-wrapper code-wrapper--" + props.currentShape[0] }, /*#__PURE__*/
      React.createElement("pre", {
        key: props.currentShape[0],
        className:
        "code code--active" + (
        props.direction < 0 ? " slide-left" : " slide-right") },


      props.currentShape[1]),


      props.lastShape && /*#__PURE__*/
      React.createElement("pre", {
        key: props.lastShape[0],
        className:
        "code code--last" + (
        props.direction < 0 ? " slide-left" : " slide-right") },


      props.lastShape[1])));
  }

  ReactDOM.render( /*#__PURE__*/React.createElement(App, { shapes: SHAPES }), document.getElementById("app"));
}();
    </script>
</body>
</html>

10. Automatic React Carousel

Made by Thomas Herman. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link href="https://fonts.googleapis.com/css?family=Noto+Sans:400,700" rel="stylesheet"> 
<style>
body {
  font-family: "Noto Sans", sans-serif;
  width: 60%;
  margin: 0 auto;
}

.Carousel {
  height: 22rem;
  overflow: hidden;
}

.Carousel-TitleDesc {
  height: 20rem;
  color: rgba(255, 255, 255, 0.9);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  position: relative;
  z-index: 1;
  top: -21.3rem;
  margin-bottom: -20rem;
}
.Carousel-TitleDesc h2, .Carousel-TitleDesc p {
  display: inline-block;
  background-color: rgba(0, 0, 0, 0.7);
  padding: 0.4rem 0.8rem;
  border-radius: 0 0.3rem 0 0;
}
.Carousel-TitleDesc h2 {
  margin-bottom: -1rem;
}
.Carousel-TitleDesc p {
  padding-bottom: 1rem;
}

.Carousel-selector {
  cursor: pointer;
  display: inline-block;
  margin: 0.5em;
  width: 1em;
  height: 1em;
  background-color: rgba(0, 0, 0, 0.6);
  transition: background-color 0.3s;
}

.Carousel-Selector-Selected {
  background-color: rgba(0, 0, 0, 0.3);
}

.Carousel-Slide {
  flex: 0;
  transition: all 1s;
}
.Carousel-Slide img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.Carousel-Slide-Selected {
  flex: 1;
}

.Carousel-Items {
  height: 20rem;
  display: flex;
}
</style>
</head>
<body>
  <div id="app"></div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.min.js'></script>
      <script>
var Carousel = React.createClass({ displayName: "Carousel",
  getInitialState: function () {
    return {
      currentSlide: 0,
      slides: this.props.children.length,
      title: this.props.children[0].props.title,
      description: this.props.children[0].props.children };

  },
  selectSlide: function (id) {
    var slide = this.props.children[id].props;
    this.setState({
      currentSlide: id,
      title: slide.title,
      description: slide.children });

  },
  timer: function () {
    var nextSlide = this.state.currentSlide < this.state.slides - 1 ? ++this.state.currentSlide : 0;
    this.selectSlide(nextSlide);
  },
  componentDidMount: function () {
    // Sets the display to update to the next slide ever x milliseconds
    var interval = setInterval(this.timer, 2000);
    this.setState({ interval: interval });
  },
  render: function () {
    var count = -1;
    var children = this.props.children.map(item => {
      return React.cloneElement(item, {
        selected: this.state.currentSlide == ++count ? true : false,
        slideId: count });

    });

    return /*#__PURE__*/(
      React.createElement("div", { className: "Carousel" }, /*#__PURE__*/
      React.createElement("div", { className: "Carousel-Items" }, children), /*#__PURE__*/
      React.createElement("div", { className: "Carousel-Selectors" },
      children.map(item => {
        return /*#__PURE__*/React.createElement(Carousel.Selector, { slideId: item.props.slideId, select: this.selectSlide, selected: item.props.selected });
      })), /*#__PURE__*/

      React.createElement("div", { className: "Carousel-TitleDesc" }, /*#__PURE__*/
      React.createElement("h2", null, this.state.title), /*#__PURE__*/
      React.createElement("p", null, this.state.description))));



  } });


Carousel.Slide = React.createClass({ displayName: "Slide",
  render: function () {
    return /*#__PURE__*/(
      React.createElement("div", { className: "Carousel-Slide " + (this.props.selected ? 'Carousel-Slide-Selected' : '') }, /*#__PURE__*/
      React.createElement("img", { src: this.props.img })));


  } });


Carousel.Selector = React.createClass({ displayName: "Selector",
  select: function () {
    this.props.select(this.props.slideId);
  },
  render: function () {
    return /*#__PURE__*/React.createElement("div", { className: "Carousel-selector " + (this.props.selected ? 'Carousel-Selector-Selected' : ''), onClick: this.select });
  } });



let app = /*#__PURE__*/
React.createElement(Carousel, null, /*#__PURE__*/
React.createElement(Carousel.Slide, {
  img: "https://c1.staticflickr.com/1/10/15288615_8a5421cd9f_b.jpg",
  title: "Baby Bird Loses the Worm" }, "Ullam officia, nobis nostrum, facere doloribus asperiores atque sit!"), /*#__PURE__*/


React.createElement(Carousel.Slide, {
  img: "https://c1.staticflickr.com/1/10/15288615_8a5421cd9f_b.jpg",
  title: "PotassiUP!" }, "Illum, possimus facere laborum saepe aut blanditiis fugiat velit nesciunt perferendis, consequuntur molestiae."), /*#__PURE__*/


React.createElement(Carousel.Slide, {
  img: "https://farm4.staticflickr.com/3914/15118079089_489aa62638_b.jpg",
  title: "Bridge Double-crossed?" }, "Eos commodi, ad dignissimos unde beatae accusamus error, nostrum porro velit recusandae distinctio vel. Vel expedita quae molestias beatae ab tenetur laborum!"));
ReactDOM.render(app, document.getElementById('app'));
//# sourceURL=pen.js
    </script>
</body>
</html>

11. 3d React Carousel

Made by Arunit Mazumdar. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
<style>
.slider-single.preactive .slider-single-content {
	transform: translateX(-25%) scale(0.8);
}

.slider-single.proactive .slider-single-content {
	transform: translateX(25%) scale(0.8);
}

.slider-single-content {
	border: 1px solid #000;
	border-radius: 10px;
	width: 600px;
	height: 400px;
}

.slider-single-content img {
	border-radius: 10px;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
}
</style>
</head>
<body>
  <div id="app">
  <!-- This element's contents will be replaced with your component. -->
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js'></script>
<script src='https://unpkg.com/[email protected]/dist/index.js'></script>
      <script>
class MyApp extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    let slides = [/*#__PURE__*/
    React.createElement("img", { src: "https://images.unsplash.com/photo-1625705917991-e8ff71edb1f7?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYyODE0MjUzMQ&ixlib=rb-1.2.1&q=85", alt: "1" }), /*#__PURE__*/
    React.createElement("img", { src: "https://images.unsplash.com/photo-1625732865493-3d1a1e0d2d32?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYyODE0MjUzMQ&ixlib=rb-1.2.1&q=85", alt: "2" }), /*#__PURE__*/
    React.createElement("img", { src: "https://images.unsplash.com/photo-1625741249739-74723ba815d5?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYyODE0MjUzMQ&ixlib=rb-1.2.1&q=85", alt: "3" }), /*#__PURE__*/
    React.createElement("img", { src: "https://images.unsplash.com/photo-1627079653280-329d8105bfa0?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYyODE0MjUzMQ&ixlib=rb-1.2.1&q=85", alt: "4" }), /*#__PURE__*/
    React.createElement("img", { src: "https://images.unsplash.com/photo-1627067465280-2eeecb0004b9?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYyODE0MjUzMQ&ixlib=rb-1.2.1&q=85", alt: "5" })];
    return /*#__PURE__*/(
      React.createElement("div", { className: "App" }, /*#__PURE__*/
      React.createElement("header", { className: "App-header" }, /*#__PURE__*/
      React.createElement("h1", { className: "App-title" })), "This is our carousal Component:", /*#__PURE__*/



      React.createElement("br", null), /*#__PURE__*/
      React.createElement("br", null), /*#__PURE__*/
      React.createElement("br", null), /*#__PURE__*/
      React.createElement(Carousal.Carousel, { slides: slides })));


  }}

ReactDOM.render( /*#__PURE__*/React.createElement(MyApp, null), document.querySelector("#app"));
    </script>
</body>
</html>