JSFiddle - React, Tailwind, and code Playground

by Saksham Malhotra

HTML

<div id="customCarousel">

</div>

CSS

.DOXCarouselContainer {
  position: relative;
  overflow: hidden;
}

.DOXCarouselContainer .carouselItems {
  height: 100%;
  display: flex;
}

.DOXCarouselContainer .carouselItems .carouselItem {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transition: margin-left 1s ease-in-out;
}

.DOXCarouselContainer .carouselItems .carouselItem .carouselHeading {
  height: 25%;
  background-color: rgba(50, 50, 50, 0.6);
  padding: 10px;
}

.DOXCarouselContainer .carouselItems .carouselItem .carouselHeading a {
  color: #FFF;
  font-size: 22px;
  text-decoration: none;
}

.DOXCarouselContainer .carouselLabels {
  position: absolute;
  bottom: 10px;
  right: 0;
  display: flex;
  width: 40%;
  height: 8px;
}

.DOXCarouselContainer .carouselLabels label {
  border: 1px solid #FFF;
  flex: 1;
  transition: background-color 0.5s;
  margin: 0px 5px;
  cursor: pointer;
  display: flex;
}

.DOXCarouselContainer .carouselLabels label:hover,
.DOXCarouselContainer .carouselLabels label:checked {
  background-color: #FFF;
}

.DOXCarouselContainer .radioButton {
  position: absolute;
  display: none;
}

JavaScript

$(function() {
  jQuery.fn.extend({
    DOXCarousel: function(data) {
      this.addClass('DOXCarouselContainer');
      this.css('height', data.height);
      this.css('width', data.width);
      this.append('');
      console.log(data);
      $('.DOXCarouselContainer .carouselItems').css('width', (data.data.length * 100) + '%');
      for (let i = 0; i < data.data.length; i++) {
        $('.DOXCarouselContainer .carouselItems').append('');
      }
      for (let i = 0; i < data.data.length; i++) {
        $('.DOXCarouselContainer .carouselItems').append('' + '' + '' + data.data[i].Title + '' + '' + '');
      }
      $('.DOXCarouselContainer .carouselItems').append('');
      var strCSS = '';
      for (let i = 0; i < data.data.length; i++) {
        $('.DOXCarouselContainer .carouselItems .carouselLabels').append('');
        strCSS += '#carouselRadio' + i + ':checked ~ .carouselItem.item0 { margin-left:-' + ((100 / data.data.length) * i) + '%; } #carouselRadio' + i + ':checked ~ .carouselLabels .carouselRadio' + i + ' { background-color:#FFF; }';
      }
      $('' + strCSS + '').appendTo('head');
      setInterval(function() {
        var nextRadioForSlide = $('.DOXCarouselContainer .radioButton:checked').next('.radioButton');
        if (nextRadioForSlide.length === 0) {
          nextRadioForSlide = $('.DOXCarouselContainer .radioButton:first');
        }
        $('.DOXCarouselContainer .radioButton:checked').prop('checked', false);
        nextRadioForSlide.prop('checked', true);
      }, data.interval * 1000);
    }
  });
});

$(function() {
  $('#customCarousel').DOXCarousel({
    height: '220px',
    width: '468px',
    interval: '8', //in seconds 
    data: [{
      Title: 'Sample Heading 1',
      URL: 'http://www.google.com',
      Image: '../SiteAssets/Carousel/Images/1.png'
    }, {
      Title: 'Sample Heading 2',
      URL: 'http://www.google.com',
      Image: '../SiteAssets/Carousel/Images/2.png'
    }, {
      Title: 'Sample Heading 3',
    ...