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

Abrir en el editor Publica tu código

Recomendado

2 September 2024

<!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

Carta de amor

Un código del señor Pato

Menú desplegable con CSS

HTML

CSS

JS

Recomendado

Carta de amor

Un código del señor Pato

Menú desplegable con CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS