Skip to main content
Correcciones ortográficas
Origen Enlace
padaleiana
  • 3.3k
  • 13
  • 19
  • 27

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

Otro problema que presenta mi código es quéque al testear su desempeño responsive las tarjetas y sus fotos pierden detalles dando una vista de difuminado.

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.

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.

Origen Enlace
Lucas
  • 191
  • 7

¿Cómo hacer que las flechas del card slider se mantengan en los bordes de las tarjetas estando alineados?

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>