javascript - Swiper ¿cómo hacer que la imagen cubra todo el ancho?

CorePress2024-01-24 9

var swiper = new Swiper('.swiper-container', {
      pagination: {
        el: '.swiper-pagination',
      },
  });

html,
    body {
      position: relative;
      height: 100%;
    }

    body {
      background: #eee;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color: #000;
      margin: 0;
      padding: 0;
    }

    .swiper-container {
      width: 100%;
      height: 500px;
    }

    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;

      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    }

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Swiper demo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

  <!-- Link Swiper's CSS -->
  <link rel="stylesheet" href="https://stackoverflow.com/questions/package/swiper-bundle.min.css">
  <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css" />
  <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
  
  <script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
  <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
  <!-- Demo styles -->
  
</head>

<body>
  <!-- Swiper -->
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide swiper-slide-prev" data-swiper-slide-index="1">
        <div class="swiper-zoom-container">
          <img alt="" class="swiper-lazy swiper-lazy-loaded undefined" 
            src="https://images-na.ssl-images-amazon.com/images/I/81iqZ2HHD-L.jpg">
        </div>
      </div>
      <div class="swiper-slide">Slide 1</div>
      <div class="swiper-slide">Slide 2</div>
      <div class="swiper-slide">Slide 3</div>
      <div class="swiper-slide">Slide 4</div>
      <div class="swiper-slide">Slide 5</div>
      <div class="swiper-slide">Slide 6</div>
      <div class="swiper-slide">Slide 7</div>
      <div class="swiper-slide">Slide 8</div>
      <div class="swiper-slide">Slide 9</div>
      <div class="swiper-slide">Slide 10</div>
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>
  </div>

</body>

</html>

Estoy usando la biblioteca Swiper para crear un control deslizante de imágenes móviles en mi aplicación. Esta es una demostración sencilla de https://swiperjs.com/demos. La imagen de la primera diapositiva no ocupa todo el ancho disponible. ¿Cómo hacerlo? Cambiar el ancho a 100vw no ayuda. Siento que hay una sola línea de código que puede hacerlo. ¿Cómo puedo hacerlo? Por favor ayuda. Gracias de antemano.

------------------------------------

Establezca el ancho de la imagen al 100% para que ocupe todo el ancho de la imagen principal. Para conservar la relación de aspecto de la imagen, puede establecer la altura en automático y establecer la propiedad de ajuste del objeto para cambiar el tamaño de la imagen para que se ajuste.así:

.swiper-container .swiper-zoom-container>img {
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center;
}

Además, puedes especificar la alineación de tu imagen usando la posición del objeto.

var swiper = new Swiper('.swiper-container', {
  pagination: {
    el: '.swiper-pagination',
  },
});

html,
body {
  position: relative;
  height: 100%;
}

body {
  background: #eee;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #000;
  margin: 0;
  padding: 0;
}

.swiper-container {
  width: 100%;
  height: 500px;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

.swiper-container .swiper-zoom-container>img {
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Swiper demo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

  <!-- Link Swiper's CSS -->
  <link rel="stylesheet" href="https://stackoverflow.com/questions/package/swiper-bundle.min.css">
  <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css" />
  <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />

  <script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
  <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
  <!-- Demo styles -->

</head>

<body>
  <!-- Swiper -->
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide swiper-slide-prev" data-swiper-slide-index="1">
        <div class="swiper-zoom-container">
          <img alt="" class="swiper-lazy swiper-lazy-loaded undefined" src="https://images-na.ssl-images-amazon.com/images/I/81iqZ2HHD-L.jpg">
        </div>
      </div>
      <div class="swiper-slide">Slide 1</div>
      <div class="swiper-slide">Slide 2</div>
      <div class="swiper-slide">Slide 3</div>
      <div class="swiper-slide">Slide 4</div>
      <div class="swiper-slide">Slide 5</div>
      <div class="swiper-slide">Slide 6</div>
      <div class="swiper-slide">Slide 7</div>
      <div class="swiper-slide">Slide 8</div>
      <div class="swiper-slide">Slide 9</div>
      <div class="swiper-slide">Slide 10</div>
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>
  </div>

</body>

</html>

------------------------------------

Agregue esto a su CSS y entonces debería funcionar. Agregué !importante porque swiper puede tener propiedades predeterminadas que pueden bloquear tu código CSS

.swiper-lazy-loaded {
     object-fit: cover !important;
     width: 100% !important;
     max-width: none !important;
}

var swiper = new Swiper('.swiper-container', {
      pagination: {
        el: '.swiper-pagination',
      },
  });

html,
    body {
      position: relative;
      height: 100%;
    }

    body {
      background: #eee;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color: #000;
      margin: 0;
      padding: 0;
    }

    .swiper-container {
      width: 100%;
      height: 500px;
    }

    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;

      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    }
    .swiper-lazy-loaded {
     object-fit: cover !important;
     width: 100% !important;
     max-width: none !important;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Swiper demo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

  <!-- Link Swiper's CSS -->
  <link rel="stylesheet" href="https://stackoverflow.com/questions/package/swiper-bundle.min.css">
  <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css" />
  <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
  
  <script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
  <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
  <!-- Demo styles -->
  
</head>

<body>
  <!-- Swiper -->
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide swiper-slide-prev" data-swiper-slide-index="1">
        <div class="swiper-zoom-container">
          <img alt="" class="swiper-lazy swiper-lazy-loaded undefined" 
            src="https://images-na.ssl-images-amazon.com/images/I/81iqZ2HHD-L.jpg">
        </div>
      </div>
      <div class="swiper-slide">Slide 1</div>
      <div class="swiper-slide">Slide 2</div>
      <div class="swiper-slide">Slide 3</div>
      <div class="swiper-slide">Slide 4</div>
      <div class="swiper-slide">Slide 5</div>
      <div class="swiper-slide">Slide 6</div>
      <div class="swiper-slide">Slide 7</div>
      <div class="swiper-slide">Slide 8</div>
      <div class="swiper-slide">Slide 9</div>
      <div class="swiper-slide">Slide 10</div>
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>
  </div>

</body>

</html>

randomThread

ubuntu: Nginx descarga archivos php, en lugar de ejecutarlos Flutter: la página con SingleTickerProviderStateMixin provoca una compilación innecesaria ¿Cómo obtener un valor distintivo en Postgresql?Procesamiento de flujo dinamo de AWS utilizando Go lambda php: ¿cuenta las filas de una tabla y cambia el ancho de una sola columna...?Python - Cómo regresar relativo a la solicitud de Django mysql: ¿Cómo formatearía correctamente esta solicitud SQL?Python: ¿Cómo verifico las variables de entorno para mi usuario específico en Windows 10?javascript - Eliminar archivo usando Coldfusion a través de jQuery ajax node.js: cómo proporcionar una referencia a un elemento secundario Django: cliente con varias direcciones, solo puede tener una dirección principal javascript: crea matrices de valores que se cruzan

javascript - Swiper ¿cómo hacer que la imagen cubra todo el ancho?

Su guía para un futuro mejor - libreflare

Categoría