slide show - javascript - José Alberto xyz

Redes sociales

HTML JS Y CSS

<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="UTF-8">
	<title>Slide Show</title>
<style>
	
	*{
		margin:0;
		padding:0;
	}
	.container{
		width: 100%;
		height:100vh;
background-color: #000;
		
	}
	
	
	
	
	.banner{
		position: absolute;
		top:35%;
		left:50%;
		transform: translateX(-50%);
		text-align: center;
		overflow: hidden;
		display:;
	}

.banner::after{
		content:'';
		width:250%;
		height: 100%;
		background: linear-gradient(to right, transparent, #000,#000);
		position: absolute;
		top:0;
		right:0;
		animation:bannerAnim 3s linear forwards;
	}
	
		@keyframes bannerAnim{
		0% {right:0;}
				100% {right:-250%;}
	}
	
	.banner h1{
		color:#91130f;
		font-family:'ubuntu';
		font-size:120px;
		margin-bottom:100px;
		border-top:5px solid #91130f;
		border-bottom:5px solid #91130f;	
	}
	
	.banner button {
		width: 230px;
		padding:10px;
		background: linear-gradient(to right,#440402, #c0120c);
		font-family: 'Dosis',sans-serif;
		letter-spacing: 2px ;
		color:#fff;
		border:none;
		border-radius:100px;
		transform:perspective(500px) rotateY(-15deg);
		text-shadow:6px 3px 2px rgba(0,0,0,.4);
		cursor: pointer;
		animation:buttonAnim 1s 2s backwards;		background-size:cover ;
		transition: all .5;
		overflow: hidden;
	}
	
	
	.banner button:hover{
		transform:perspective(500px) rotateY(15deg);
			text-shadow:-6px 3px 2px rgba(0,0,0,.4);
			background: linear-gradient(to left,#440402, #c0120c);
	}
	
	@keyframes buttonAnim {
		0% {opacity: 0;}
			100% {opacity: 1;}
	}
	
	.banner button::before{
		content:"";
		width:100%;
		height:100%;
		background: linear-gradient(to right,transparent, #fff,transparent);
		position:absolute;
		top:0;
		left:-100px;
		transform: skewX(-30deg);
		transition:left .5s;
	}
	
	
	.banner button:hover::before{
		left:100%;
		
	}
	
	.slideshow-wrapper{
	overflow: hidden;
	opacity:0;
	visibility: hidden;
	transition: opacity 1s;
	}
	
	.slideshow{
		display: flex;
		width:400%;
		height:100%;
		position: relative;
		
	}
	
	@keyframes slideshow{
		0%{left:0}
				10%{left:0}
						15%{left:-100%}
			25%{left:-100%}
					30%{left:-200%}
			40%{left:-200%}
				45%{left:-300%}
			55%{left:-300%}
		60%{left:-200%}

70%{left:-200%}
						75%{left:-100%}
					
						85%{left:-100%}			
				90%{left:0}					
				
	}
	
	.slide{
		width: 100%;
		height:100vh;
	}
	
	.slide:nth-child(1){
    background: linear-gradient(100deg, rgba(38,38,38,1), rgba(38,38,38, .2)), url(https://josealberto.xyz/wp-content/uploads/2024/02/8.png) center no-repeat;
		background-size:cover ;
	}

.slide:nth-child(2){
		background:linear-gradient(100deg,rgba(38,38,38,1), rgba(38,38,38, .2)),url(https://josealberto.xyz/wp-content/uploads/2024/02/7.png) center no-repeat;
				background-size:cover ;
	}
	
		.slide:nth-child(3){
		background:linear-gradient(100deg,rgba(38,38,38,1), rgba(38,38,38, .2)),url(https://josealberto.xyz/wp-content/uploads/2024/02/8.png) center no-repeat;
				background-size:cover ;
	}

.content{
		width: 500px;
		position: relative;
		top:35%;
		left:5%;
	}
	.content h3{
		font-family: 'Oswald' sans-serif;
		font-size:80px;
		color:#fff;
	}
	
	.content p{
		font-family: 'Dosis';
		font-size:20px;
		color:#ccc;
	}
	
	
	.content button{
	width: 130px;
	padding:10px 10px0 0;
	margin-top:30px;
	background-color: transparent;
	border:none;
	outline: none;
	font-size:20px;
	letter-spacing:1px;
	border-bottom:1px solid #fff;
	color:#fff;
	}
	
	.content i {
		margin-left:9px;
	}
	
	@media(max-width:1000px){
		.banner h1{
			font-size:60px;
		}
	}
	@media(max-width: 650){
				.banner h1{
			font-size:50px;
		}
		
		.banner button{
			width: :170px;
			padding:7px;
			
		}
	.content{
		width:300px;
	}
	.content h3{
		font-size: 30px;
		
	}
	.content p {
			font-size: 16px;
	}
		
	}
	
	
	
	
	
	
	
</style>
</head>

<body>
			<div class="container">
				<div class="banner">
					<h1>JAVASCRIPT</h1>
					<button>Star Slide</button>
				</div>
	
			
			<div class="slideshow-wrapper">
					<div class="slideshow">
						
						<div class="slide">
							<div class="content">
									<h3>Mercurio</h3>
									<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita, maiores, nam ea nisi veritatis ut repellendus beatae inventore in perferendis tempora animi dolor asperiores provident eum fugiat maxime non mollitia.</p>
							<button type="button">read more <i class="fas fa-arrow-right"></i> </button>
							
							</div>
						</div>
						
						
								<div class="slide">
							<div class="content">
									<h3>Marte</h3>
									<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita, maiores, nam ea nisi veritatis ut repellendus beatae inventore in perferendis tempora animi dolor asperiores provident eum fugiat maxime non mollitia.</p>
							<button type="button">read more <i class="fas fa-arrow-right"></i> </button>
							
							</div>
						</div>
						
						
								<div class="slide">
							<div class="content">
									<h3>Saturno</h3>
									<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita, maiores, nam ea nisi veritatis ut repellendus beatae inventore in perferendis tempora animi dolor asperiores provident eum fugiat maxime non mollitia.</p>
							<button type="button">read more <i class="fas fa-arrow-right"></i> </button>
							
							</div>
						</div>
						
					</div>
				
			</div>
			
					</div>
			
			<script>
				
		document.querySelector('.banner button').addEventListener('click', () => {
					document.querySelector('.banner').style.display	 = 'none';
					document.querySelector('.slideshow-wrapper').style.cssText = 'opacity:1;visibility:visible';
	document.querySelector('.slideshow').style.animation = 'slideshow 24s infinite';
		});		
				
				
			</script>	
			
			
</body>
</html>

HTML JS Y CSS

RESULTADO