Control deslizante de presentación de fotografía creativa | Control deslizante Swiper

Abrir en el editor Publica tu código

Recomendado

26 April 2025

Tarjetas de enlaces de redes sociales HTML

HTML

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Andev Web</title>
  <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css'><link rel="stylesheet" href="./style.css">

</head>
<body>
<section class="creative-photography--slider theme1">
		<div class="swiper-container photography-swiper--slider">
			<div class="swiper-wrapper">
				
				<div class="swiper-slide">
					<div class="photography-slider--item">
						
						<div class="photography-slider--layer">
							<img src="https://imgpanda.com/upload/ib/QTBKjzDqxD.png" alt="img">
						</div>
						<div class="photography-slider--content">
							<div class="photography-slider--image">
								<img src="https://imgpanda.com/upload/ib/QgDfPHowhf.jpg" alt="img">								
								<div class="photography-slider--inner">
									<div class="photography-heading">
										<div class="photography-item--inner">
											<h1 class="photography-item--title">Desert <br> <span>Lonliness</span></h1>
											<h1 class="photography-item--title-outline">Folio</h1>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				
				<div class="swiper-slide">
					<div class="photography-slider--item">
						
						<div class="photography-slider--layer">
							<img src="https://imgpanda.com/upload/ib/QTBKjzDqxD.png" alt="img">
						</div>
						<div class="photography-slider--content">
							<div class="photography-slider--image">
								<img src="https://imgpanda.com/upload/ib/sq4ALbEhIS.jpg" alt="img">								
								<div class="photography-slider--inner">
									<div class="photography-heading">
										<div class="photography-item--inner">
											<h1 class="photography-item--title">Desert <br> <span>Lonliness</span></h1>
											<h1 class="photography-item--title-outline">Folio</h1>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				
				<div class="swiper-slide">
					<div class="photography-slider--item">
						
						<div class="photography-slider--layer">
							<img src="https://imgpanda.com/upload/ib/QTBKjzDqxD.png" alt="img">
						</div>
						<div class="photography-slider--content">
							<div class="photography-slider--image">
								<img src="https://imgpanda.com/upload/ib/I4qmZchHEP.jpg" alt="img">								
								<div class="photography-slider--inner">
									<div class="photography-heading">
										<div class="photography-item--inner">
											<h1 class="photography-item--title">Desert <br> <span>Lonliness</span></h1>
											<h1 class="photography-item--title-outline">Folio</h1>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				
				<div class="swiper-slide">
					<div class="photography-slider--item">
						
						<div class="photography-slider--layer">
							<img src="https://imgpanda.com/upload/ib/QTBKjzDqxD.png" alt="img">
						</div>
						<div class="photography-slider--content">
							<div class="photography-slider--image">
								<img src="https://imgpanda.com/upload/ib/3MT0ktDOF4.jpg" alt="img">								
								<div class="photography-slider--inner">
									<div class="photography-heading">
										<div class="photography-item--inner">
											<h1 class="photography-item--title">Desert <br> <span>Lonliness</span></h1>
											<h1 class="photography-item--title-outline">Folio</h1>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				
				<div class="swiper-slide">
					<div class="photography-slider--item">
						
						<div class="photography-slider--layer">
							<img src="https://imgpanda.com/upload/ib/QTBKjzDqxD.png" alt="img">
						</div>
						<div class="photography-slider--content">
							<div class="photography-slider--image">
								<img src="https://imgpanda.com/upload/ib/ciuzppjWeC.jpg" alt="img">								
								<div class="photography-slider--inner">
									<div class="photography-heading">
										<div class="photography-item--inner">
											<h1 class="photography-item--title">Desert <br> <span>Lonliness</span></h1>
											<h1 class="photography-item--title-outline">Folio</h1>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				
				<div class="swiper-slide">
					<div class="photography-slider--item">
						
						<div class="photography-slider--layer">
							<img src="https://imgpanda.com/upload/ib/QTBKjzDqxD.png" alt="img">
						</div>
						<div class="photography-slider--content">
							<div class="photography-slider--image">
								<img src="https://imgpanda.com/upload/ib/P4k8H9khvt.jpg" alt="img">								
								<div class="photography-slider--inner">
									<div class="photography-heading">
										<div class="photography-item--inner">
											<h1 class="photography-item--title">Desert <br> <span>Lonliness</span></h1>
											<h1 class="photography-item--title-outline">Folio</h1>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="creative-swiper--dots">
                <div class="swiper-pagination"></div>
                </div>
			</div>
		</div>
		<div class="creative-photography--sidebar">
                    <div class="social-box">
                        <ul>
                            <li><a href="#">FB</a></li>
                            <li><a href="#">IG</a></li>
                            <li><a href="#">YT</a></li>
                            <li><a href="#">DR</a></li>
                        </ul>
                    </div>
                </div>
	</section>
  <script src='https://code.jquery.com/jquery-3.6.0.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js'></script><script  src="./script.js"></script>

</body>
</html>

CSS

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');
body{
	font-size: 17px;
	line-height: 30px;
	font-weight: 400;
	-moz-osx-font-smoothing: grayscale;
	word-break: break-word;
	-webkit-font-smoothing: antialiased;
  font-family: "DM Sans", sans-serif;
  margin: 0;
  overflow-x: hidden;
  color: #fff;
  background-color: #1a1a1a;
}
body, div {
	margin: 0;
	padding: 0;
}
*, *::before, *::after {
	box-sizing: border-box;
}
img {
	-ms-interpolation-mode: bicubic;
	border: 0;
	vertical-align: middle;
	max-width: 100%;
	height: auto;
}
/* ============ Full Page Slider ================= */
.creative-photography--slider {
    background-color: #121212;
    padding: 0px 100px 100px 0px;
    position: relative;
}
.photography-slider--item {
    position: relative;
    overflow: hidden;
    height: calc(100vh - 100px);
}
.photography-slider--layer {
    position: absolute;
    top: 0px;
    z-index: 1;
    left: auto;
    right: 45%;
}
.photography-slider--layer img{
    width: 100%;
}
.photography-slider--content {
    position: relative;
    height: 100%;
    margin-top: 100px;
}
.photography-slider--content .photography-slider--image {
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    -webkit-transition: all 2s linear;
    -moz-transition: all 2s linear;
    transition: all 2s linear;
    position: relative;
    max-width: 72.917vw;
    margin-left: auto;
    opacity: 1;
}
.photography-slider--content .photography-slider--image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.photography-slider--inner {
    position: absolute;
    left: -16.5vw;
    top: 50%;
    transform: translateY(-50%) rotate(90deg);
    transform-origin: center;
    z-index: 2;
}
.photography-slider--inner .photography-heading {
    margin-bottom: 0px;
    position: relative;
}
.photography-slider--inner .photography-heading .photography-item--title{
    font-size: 11.296vh;
    line-height: 11.296vh;
    font-weight: 700;
    text-transform: uppercase;
    margin: 0px;
    letter-spacing: 0px;
    opacity: 1;
    transform: translateX(0px);
    -webkit-transition: all 2.5s ease;
    -moz-transition: all 2.5s ease;
    transition: all 2.5s ease;
    transform-origin: top;
    z-index: 1;
    position: relative;
    opacity: 0;
    transform-origin: top;
    transform: translateX(200px);
    -webkit-transition: all 2.5s ease;
    -moz-transition: all 2.5s ease;
    transition: all 2.5s ease;
}
.photography-slider--inner .photography-heading .photography-item--title-outline{
    font-size: 20.111vh;
    line-height: normal;
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: #2F2F2F;
    z-index: 0;
    position: absolute;
    bottom: -4.083vw;
    opacity: 1;
    transform: translateX(0px);
    font-weight: 700;
    text-transform: uppercase;
    margin: 0px;
    letter-spacing: 0px;
    transform-origin: top;
    -webkit-transition: all 2s ease;
    -moz-transition: all 2s ease;
    transition: all 2s ease;
    -webkit-text-stroke-width: 3px;
    -webkit-text-fill-color: transparent;
    opacity: 0;
    transform-origin: top;
    transform: translateX(200px);
    -webkit-transition: all 2s ease;
    -moz-transition: all 2s ease;
    transition: all 2s ease;
}
.swiper-slide-active .photography-heading .photography-item--title {
    opacity: 1;
    transform: translateX(0px);
}
.swiper-slide-active .photography-heading .photography-item--title-outline {
    opacity: 1;
    transform: translateX(0px);
}
.creative-photography--slider .creative-swiper--dots .swiper-pagination{
    counter-reset: numbers;
    display: flex;
    flex-direction: column;
    gap: 12px;
    bottom: 0;
    margin-top: 0px;
    left: 25px;
    width: 100%;
}
.creative-photography--slider .creative-swiper--dots .swiper-pagination span{
    position: static;
    background: #fff;
    width: 10px;
    height: 10px;
    background-color: #ffffff;
    border: 1px solid transparent;
    border-radius: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 14px;
    cursor: pointer;
    transition: all 0.5s ease-in-out;
    opacity: 1;
    font-size: 14px;
    font-weight: 600;
}
.creative-swiper--dots .swiper-pagination span.swiper-pagination-bullet-active{
   background-color: #b90808; 
}
.creative-swiper--dots .swiper-pagination .swiper-pagination-bullet::after {
    content: '';
    font-size: 24px;
    font-weight: 600;
    counter-increment: numbers;
    content: "0" counter(numbers);
    color: #b90808;
    position: absolute;
    bottom: calc(100% + 20px);
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s ease-in-out;
}
.creative-swiper--dots .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active::after {
    opacity: 1;
    visibility: visible;
}
.creative-photography--slider .creative-photography--sidebar{
    width: 100px;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.creative-photography--sidebar ul{
    position: relative;
    margin: 0px;
    padding: 0px;
    list-style-type: none;
    display: flex;
    align-items: center;
    gap: 36px;
    flex-wrap: wrap;
    flex-direction: column;
}
.creative-photography--sidebar ul li{
    position: relative;
    transform: rotate(90deg);
}
.creative-photography--sidebar ul li a{
    font-size: 13px;
    line-height: 15px;
    width: 50px;
    height: 27px;
    border-radius: 100%;
    background-color: transparent;
    border: 1px solid #ffffff;
    position: relative;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    color: #fff;
    transition: all .25s cubic-bezier(.645, .045, .355, 1);
}
.creative-photography--sidebar ul li a:hover{
    border-color: #b90808;
    background-color: #b90808;
    color: #ffffff;
    transform: translateY(-3px);
}

/* ======================= Responsive Ipad Pro ============================== */
@media screen and (max-width: 1366px) {
    .photography-slider--inner .photography-heading .photography-item--title-outline {
        font-size: 15.67vh;
        line-height: 15.65vh;
        bottom: -3.083vw;
    }
    .photography-slider--inner .photography-heading .photography-item--title span{
        font-size: 9.444vh;
        font-family: inherit;
        font-style: inherit;
        font-weight: inherit;
        background-color: #0f0f0f;
        display: inline-block;
    }
}
/* ======================= Responsive Ipad ============================== */
@media screen and (max-width: 991px) {
    .photography-slider--content .photography-slider--image {
        max-width: 100vw;
    }
    .photography-slider--inner{
        left: 30px;
        top: 60%;
        transform: translateY(-50%) rotate(0deg);
    }
    .photography-slider--inner .photography-heading .photography-item--title span{
        background-color: transparent;
    }
    .photography-slider--content{
        margin-top: 0px;
    }
    .creative-photography--slider .creative-swiper--dots .swiper-pagination{
        bottom: 60%;
        left: 10px;
    }
}
/* ======================= Responsive Ipad ============================== */
@media screen and (max-width: 460px) {
    .creative-photography--slider{
        padding: 0px;
    }
    .creative-photography--slider .photography-slider--inner{
        top: 50%;
        width: 100%;
        padding-left: 10px;
        padding-right: 10px;
        left: 0px;
    }
    .photography-slider--inner .photography-heading .photography-item--title{
        font-size: 8.296vh;
        line-height: 8.296vh;
    }
    .photography-slider--inner .photography-heading .photography-item--title span{
       font-size: 8.296vh; 
   }
   .photography-slider--inner .photography-heading .photography-item--title-outline {
    font-size: 8.296vh;
    line-height: 8.296vh;
    bottom: -0.083vw;
}
.creative-photography--slider .creative-photography--sidebar{
    top: 35px;
    justify-content: start;
}
.creative-photography--slider .creative-swiper--dots .swiper-pagination{
    bottom: 90px;
    left: 0;
    flex-direction: row;
    justify-content: center;
}
.creative-photography--slider .creative-swiper--dots .swiper-pagination span{
    margin: 0 5px;
}
}

Control deslizante de presentación de fotografía creativa | Control deslizante Swiper

Recomendado

Un código de shasshan7236

Un código de bachir123

Tarjetas de enlaces de redes sociales HTML

HTML

CSS

JS

Recomendado

Un código de shasshan7236

Un código de bachir123

Tarjetas de enlaces de redes sociales HTML

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS