Build React Carousel -Part2

This part I will show adding css to get the structure.

As we can see slides inside carousel-inner-container will come inline and will change the left and right position. the outer container carousel will maintain the width of the visible area and overflow content will not be visible.

full css is here

	.carousel {
	overflow: hidden;
	position: relative;
	width: 100%;
	.carousel-arrow {
	display: block;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	transition: all 0.2s linear;
	width: 32px;
	height: 31px;
	z-index: 10;
	opacity: 0.5;
	cursor: pointer;
	&.arrow-left {
	left: -40px;
	}
	&.arrow-right {
	right: -40px;
	}
	&:hover {
	opacity: 0.8;
	}
	}
	.arrowBg {
	position: absolute;
	width: 65px;
	height: 100%;
	background: #000000;
	opacity: 0.6;
	color: #ffffff;
	z-index: 1;
	transition: all 0.2s linear;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	cursor: pointer;
	i {
	pointer-events: none;
	}
	&.arrowBg-right {
	right: -65px;
	}
	&.arrowBg-left {
	left: -65px;
	}
	}
	&:hover {
	.arrow-left {
	left: 10px;
	}
	.arrow-right {
	right: 10px;
	}
	.arrowBg-left {
	left: 0;
	}
	.arrowBg-right {
	right: 0;
	}
	}
	.carousel-inner-container {
	position: relative;
	transition: transform 0.45s ease-out;
	display: table;
	.carousel-item {
	display: table-cell;
	vertical-align: top;
	padding-left: 2px;
	padding-right: 3px;
	overflow: hidden;
	height: 400px;
	img {
	width: auto;
	height: 100%;
	display: block;
	margin: 0 auto;
	}
	}
	}
	&.gridSlider {
	position: relative;
	height: 400px;
	.carousel-inner-container {
	position: absolute;
	height: 100%;
	}
	}
	&.fullScreen-slider {
	.arrow {
	display: none;
	}
	.carousel-item {
	height: 400px;
	overflow: hidden;
	padding: 0;
	max-width: 100vw;
	min-width: 100vw;
	// flex: 0 0 100%;
	img {
	height: auto;
	width: 100%;
	}
	}
	}
	}

view raw carousel.scss hosted with ❤ by GitHub