Slider Card with HTML and CSS



DevForum chia sẻ anh em mẫu code Slider kiểu Card chỉ với HTML và CSS

1. HTML

							
DevForum
DevForum - Diễn đàn chia sẻ miễn phí code mẫu về Giao diện Admin, Template Frontend Free, HTML , CSS , JavaScript , Selenium và Automation Testing.
DevForum
DevForum - Diễn đàn chia sẻ miễn phí code mẫu về Giao diện Admin, Template Frontend Free, HTML , CSS , JavaScript , Selenium và Automation Testing.
DevForum
DevForum - Diễn đàn chia sẻ miễn phí code mẫu về Giao diện Admin, Template Frontend Free, HTML , CSS , JavaScript , Selenium và Automation Testing.

2. CSS

							* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}

		html,
		body {
			height: 100vh;
			font-family: "Open Sans", sans-serif;
		}

		body {
			display: flex;
			justify-content: center;
			align-items: center;
			background: #cecece;
		}

		.card {
			position: absolute;
			height: 350px;
			width: 100%;
			max-width: 850px;
			margin: auto;
			background: #ffffff;
			border-radius: 25px;
			box-shadow: 0 10px 50px rgba(0, 0, 0, 0.3);
		}

		.card .inner_part {
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 0 0 0 30px;
			height: 350px;
			position: absolute;
		}

		#slideImg:checked ~ .inner_part {
			padding: 0;
			transition: 0.1s ease-in;
		}

		.inner_part .img {
			height: 260px;
			width: 260px;
			overflow: hidden;
			flex-shrink: 0;
			border-radius: 20px;
			box-shadow: 0 10px 50px rgba(0, 0, 0, 0.2);
		}

		#slideImg:checked ~ .inner_part .img {
			height: 350px;
			width: 850px;
			z-index: 99;
			transition: 0.3s 0.2s ease-in;
		}

		.img img {
			height: 100%;
			width: 100%;
			cursor: pointer;
			opacity: 0;
			transition: 0.6s;
		}

		#slide_1:checked ~ .inner_part .img_1,
		#slide_2:checked ~ .inner_part .img_2,
		#slide_3:checked ~ .inner_part .img_3 {
			opacity: 1;
			transition-delay: 0.2s;
		}

		.content {
			padding: 0 20px 0 35px;
			width: 530px;
			margin-left: 50px;
			opacity: 0;
			transition: 0.6s;
		}

		#slideImg:checked ~ .inner_part .content {
			display: none;
		}

		#slide_1:checked ~ .inner_part .content_1,
		#slide_2:checked ~ .inner_part .content_2,
		#slide_3:checked ~ .inner_part .content_3 {
			opacity: 1;
			margin-left: 0;
			z-index: 100;
			transition-delay: 0.3s;
		}

		.content .title {
			font-size: 30px;
			font-weight: 700;
			color: #0d0925;
			margin: 0 0 20px 0;
		}

		.content .text {
			font-size: 19px;
			color: #4e4a67;
			margin: 0 auto 30px auto;
			line-height: 1.5em;
			text-align: justify;
		}

		.content button {
			padding: 15px 20px;
			border: none;
			font-size: 16px;
			color: #fff0e6;
			font-weight: 600;
			letter-spacing: 1px;
			border-radius: 50px;
			cursor: pointer;
			outline: none;
			background: #000000;
			box-shadow: 0 10px 50px rgba(0, 0, 0, 0.2);
			float: right;
		}

		.content button:hover {
			background: #cecece;
			color: #000000;
		}

		.slider {
			position: absolute;
			bottom: 25px;
			left: 55%;
			transform: translateX(-50%);
			z-index: 1;
		}

		#slideImg:checked ~ .slider {
			display: none;
		}

		.slider .slide {
			position: relative;
			height: 10px;
			width: 50px;
			background: #d9d9d9;
			border-radius: 5px;
			display: inline-flex;
			margin: 0 3px;
			cursor: pointer;
		}

		.slider .slide:before {
			position: absolute;
			content: "";
			top: 0;
			left: 0;
			height: 100%;
			width: -100%;
			background: #000000;
			border-radius: 10px;
			transform: scaleX(0);
			transition: transform 0.6s;
			transform-origin: left;
		}

		#slide_1:checked ~ .slider .slide_1:before,
		#slide_2:checked ~ .slider .slide_2:before,
		#slide_3:checked ~ .slider .slide_3:before {
			transform: scaleX(1);
			width: 100%;
		}

		input {
			display: none;
		}						

3. JAVASCRIPT

													

 


Mong bài viết giúp ích được các bạn phần nào trong thiết kế Web. Hãy nhấn nút để mọi người cùng học hỏi kiến thức mới nhé. Cảm ơn các bạn đã quan tâm Forum.