0

Estoy utilizando un efecto de tarjetas slider con HTML, CSS y JavaScript. El inconveniente que presenta mi código es que las flechas que me permiten 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 izquierda y derecha se mantengan en los márgenes de las tarjetas?

Otro problema que presenta mi código es que 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>

1 respuesta 1

1

Si quieres que las flechas queden encima de las imágenes debes colocar las fechas dentro del <div class="swiper mySwiper">sino siempre quedarán afuera

Y además debes cambiar el tamaño de tus tarjetas según lo necesites como por ejemplo en

.main .swiper {
width

también entre otros

.main .swiper-slide {

Tu article quedaría así

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

        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>

        <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>
1
  • Muy amable. Al menos se solucionó el problema de las flechas. Ahora estoy probando como hacer para que no se desenfoquen las tarjetas y aparezcan bien definidas cambiando los valores ahí dónde me comentaste
    – Lucas
    Commented el 17 mar. 2023 a las 3:20

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.