react-lite-carousel/dist/styles.js

react-carousel-lite is a lightweight and minimalistic carousel component for React, designed to be simple, fast and easy to integrate into your projects.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.slideStyle = exports.slideItemStyle = exports.prevBtnStyle = exports.nextBtnStyle = exports.containerStyle = void 0;
/* Container */

var containerStyle = exports.containerStyle = function containerStyle(containerWidth) {
  return {
    width: "".concat(containerWidth ? containerWidth : 100, "%"),
    // Container width
    overflow: 'hidden',
    position: 'relative',
    textAlign: 'center',
    height: '100%' // Container height
  };
};

/* Slides */

var slideStyle = exports.slideStyle = function slideStyle(currentIndex) {
  return {
    display: 'flex',
    transition: 'transform 0.5s ease-in-out',
    transform: "translateX(-".concat(currentIndex * 100, "%)"),
    width: '100%',
    height: '100%'
  };
};

/* Slide item */

var slideItemStyle = exports.slideItemStyle = {
  flexShrink: 0,
  width: '100%',
  height: '100%',
  display: 'flex',
  justifyContent: 'center',
  alignItems: 'center'
};

/* Navigation Buttons */

var nextBtnStyle = exports.nextBtnStyle = function nextBtnStyle(btnBackgroundColor, btnArrowColor, btnRounded) {
  return {
    position: 'absolute',
    top: '50%',
    right: '10px',
    transform: 'translateY(-50%)',
    zIndex: 1,
    backgroundColor: "".concat(btnBackgroundColor),
    color: "".concat(btnArrowColor),
    border: 'none',
    padding: '10px',
    cursor: 'pointer',
    borderRadius: btnRounded ? '9999px' : '0'
  };
};
var prevBtnStyle = exports.prevBtnStyle = function prevBtnStyle(btnBackgroundColor, btnArrowColor, btnRounded) {
  return {
    position: 'absolute',
    top: '50%',
    left: '10px',
    transform: 'translateY(-50%)',
    zIndex: 1,
    backgroundColor: "".concat(btnBackgroundColor),
    color: "".concat(btnArrowColor),
    border: 'none',
    padding: '10px',
    cursor: 'pointer',
    borderRadius: btnRounded ? '9999px' : '0'
  };
};