Estoy utilizando un efecto de tarjetas slider con HTML, CSS y JavaScript. El inconveniente qué presenta mi código es qué las flechas qué me permite ver la tarjeta siguiente o la anterior se desplazan por el body y no quedan a los costados de las tarjetas como tendría que pasar.
¿Cómo puedo hacer para que las flechas de izquieda y derecha se mantengan en los margenes de las tarjetas?
Otro problema que presenta mi código es qué al testear su desempeño responsive las tarjetas y sus fotos pierden detalles dando una vista de difuminado.
¿Se puede hacer que sean responsivas sin que pierdan su claridad?
var swiper = new Swiper('.mySwiper', {
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
},
effect: "slider",
slidesPerView: 3,
spaceBetween: 25,
grabCursor: true,
centeredSlides: true,
slidesPerView: "auto",
// init: false,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
});
@import url('https://fonts.googleapis.com/css2? family=Roboto:wght@700&display=swap');
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
font-family: 'Roboto', sans-serif;
font-size: 1.2rem;
font-weight: 550;
min-height: 100%;
background-color: #141414;
}
/* ------------- SCROLLBAR ------------- */
body::-webkit-scrollbar {
height: 1.5px;
width: 6.5px;
background-color: #000000;
}
body::-webkit-scrollbar-thumb {
background: #e0e0e0;
border-radius: 2.5px;
}
body::-webkit-scrollbar-thumb:hover {
background: #acacac;
border-radius: 2.5px;
}
.grid-container {
display: grid;
gap: 5px;
grid-template: "header" 70px "main" auto "navbar" 50px "footer" 100px;
}
@media (min-width: 600px) {
.grid-container {
grid-template: "navbar header" 65px "main main" auto "footer footer" 100px / 200px auto;
}
}
@media (min-width: 900px) {
.grid-container {
grid-template: "navbar header header" 55px "main main main" auto "footer footer footer" 100px / 200px auto 200px;
}
}
/* ----------------- CONTENIDO PÁGINA ----------------- */
.main {
grid-area: main;
background-color: #0f1214;
}
.main .swiper {
top: 4%;
margin-bottom: 9%;
width: 990px;
padding-top: 1px;
padding-bottom: 50px;
background: rgba(255, 0, 0, 0);
border-radius: 10px;
backdrop-filter: blur(14px);
}
.main .swiper-slide {
background-position: center;
background-size: cover;
width: 250px;
height: 390px;
margin: 10px;
border-radius: 10px;
background-color: #EEE7CE;
display: flex;
align-items: center;
justify-content: center;
transition: .3s linear;
}
.main .swiper-slide:hover {
transform: scale(1.03);
}
.main .swiper-slide .container h1 {
background-color: rgb(12, 19, 29);
padding: 10px;
width: 150px;
height: 150px;
display: flex;
align-items: center;
justify-content: center;
color: rgb(255, 111, 123);
border-radius: 10px;
font-size: 70px;
}
.main .swiper-slide img {
display: block;
max-width: 100%;
max-height: -20%;
object-fit: cover;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
}
.main .swiper-slide .card-description {
padding: 1rem 1rem;
}
.main .swiper-slide .card-title {
color: #000000;
margin-top: -7%;
}
.main .swiper-slide .card-link {
background-color: #000000;
margin-left: 15%;
width: 70%;
margin-top: 10%;
margin-bottom: .1rem;
align-items: center;
text-align: center;
border-radius: .5rem;
}
.main .swiper-slide .card-link a {
text-decoration: none;
color: #FFC728;
}
.main .swiper-slide .card-link :hover {
text-decoration: none;
color: #ffffff;
}
.main .swiper .mySwiper.swiper-button-prev {
margin-top: auto;
color: #FFC728;
left: 11%;
}
.main .swiper .mySwiper .swiper-button-next {
margin-top: auto;
color: #FFC728;
left: 87%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- ===== Iconscout CSS ===== -->
<link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css">
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous">
</script>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
</head>
<body class="grid-container">
<!----------- CONTENIDO PRINCIPAL ----------->
<article class="main">
<h1 style="text-align: center;">Test</h1><br>
<h2 style="text-align: center;">CARD SLIDER</h2><br><br><br>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="container">
<img src="https://cdn-icons-png.flaticon.com/512/3616/3616770.png" alt="">
<div class="card-description">
<div class="card-title">
<h4>Descripción</h4>
</div>
<div class="card-link">
<a href="#">Ver más</a>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="container">
<img src="https://www.oxfordwebstudio.com/user/pages/06.da-li-znate/sta-je-html/sta-je-html.jpg" alt="">
<div class="card-description">
<div class="card-title">
<h4>Descripción</h4>
</div>
<div class="card-link">
<a href="#">Ver más</a>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="container">
<img src="https://cdn-icons-png.flaticon.com/512/3616/3616770.png" alt="">
<div class="card-description">
<div class="card-title">
<h4>Descripción</h4>
</div>
<div class="card-link">
<a href="#">Ver más</a>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="container">
<img src="https://www.oxfordwebstudio.com/user/pages/06.da-li-znate/sta-je-html/sta-je-html.jpg" alt="">
<div class="card-description">
<div class="card-title">
<h4>Descripción</h4>
</div>
<div class="card-link">
<a href="#">Ver más</a>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="container">
<img src="https://cdn-icons-png.flaticon.com/512/3616/3616770.png" alt="">
<div class="card-description">
<div class="card-title">
<h4>Descripción</h4>
</div>
<div class="card-link">
<a href="#">Ver más</a>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-pagination"></div>
</div>
</article>
<!-- Swiper JS -->
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script src="script.js"></script>
</body>
</html>