1

Mi inconveniente es relacionado a un carrusel de imágenes específicamente a la visualización de las mismas ya que no logro ajustarlas al contenedor, se que con la propiedad object-fit:contain se lo puede hacer y ya lo he tratado pero sigo viendo solo un porcentaje de cada imagen.

Las imágenes tienen de altura: 1280 y ancho: 333. A parte estoy utilizando "MultiSlider" para esto del carrusel.

En el html tengo lo siguiente:

<div class="principal-slider">
            <div id="slider">
               <div class="MS-content">
                  <div class="item">
                     <img class="img-slider" src="../RSC/slider/1.jpeg" alt="" id="imgSLIDE1">
                  </div>
                  <div class="item">
                     <img class="img-slider" src="../RSC/slider/1.jpeg" alt="" id="imgSLIDE2">
                  </div>
                  <div class="item">
                     <img class="img-slider" src="../RSC/slider/1.jpeg" alt="" id="imgSLIDE3">
                  </div>
                  <div class="item">
                     <img class="img-slider" src="../RSC/slider/1.jpeg" alt="" id="imgSLIDE4">
                  </div>
                  <div class="item">
                     <img class="img-slider" src="../RSC/slider/1.jpeg" alt="" id="imgSLIDE5">
                  </div>
               </div>
               <div class="MS-controls">
                  <button class="MS-left" id="btnIzqSlide">
                     <i class="icon-left-dir"></i>
                  </button>
                  <button class="MS-right" id="btnDerSlide">
                     <i class="icon-right-dir"></i>
                  </button>
               </div>
            </div>
         </div>

En el css tengo las siguientes líneas adentro de un @media screen and (max-width:360px):

 /*---SLIDER---*/
   .principal-slider{
      width:100%;
      margin: auto;
   }
   #slider {
      position: relative;
      width: 100%;
      margin: 0 auto 45px 0;
      box-shadow: 0 0 0 0 #1E2126,
                  0 5px 25px;
   }
   #slider .MS-content {
      white-space: nowrap;
      overflow: hidden;
      width: 100%;
      
   }
   #slider .MS-content .item {
      display: inline-block;
      width: 100%;
      object-fit: contain;
      position: relative;
      vertical-align: top;
      overflow: hidden;
      height: auto;
      white-space: normal;
   }
   #slider .MS-controls button {
      position: absolute;
      top: 35px;
   }
   #slider .MS-controls .MS-left {
      left: 10px;
   }
   #slider .MS-controls .MS-right {
      right: 10px;
   }

Según el editor no hay problemas de lógica en el html ni en el css pero yo creo que alguna cosa me falla en el css.

Les dejo una foto de como se encuentra el resultado:

visualización en disp. móvil

Les dejo el link para MultiSlider: https://www.multislider.info/

Por lo pronto seguiré investigando.

2
  • Solo ingresa un valor de 100% a la img esto lo haces por el css #slider .MS-content .item img {width: 100%;} o en la etiqueta html de img width="100%"
    – Roy
    Commented el 9 jun. 2021 a las 14:13
  • eso lo puse y el height aunque lo puese en auto me siguió mostrando como si la imagen fuese del tamaño original Commented el 9 jun. 2021 a las 20:35

1 respuesta 1

1

Lamentablemente no encontré una solución en el plugin, sin embargo, realice otro slider a parte y luego implementarlo en el proyecto; la opción que utilice fue haciendo un carrusel con javascript puro y a continuación les presento el código.

HTML:

<section class="container-slider">
            <div class="slider" id="slider">
               <div class="slider__section">
                  <img src="../RSC/slider/inicial.jpg" alt="" class="slider__img" id="imgSLIDE1">
               </div>
               <div class="slider__section">
                  <img src="../RSC/slider/inicial.jpg" alt="" class="slider__img" id="imgSLIDE2">
               </div>
               <div class="slider__section">
                  <img src="../RSC/slider/inicial.jpg" alt="" class="slider__img" id="imgSLIDE3">
               </div>
               <div class="slider__section">
                  <img src="../RSC/slider/inicial.jpg" alt="" class="slider__img" id="imgSLIDE4">
               </div>
               <div class="slider__section">
                  <img src="../RSC/slider/inicial.jpg" alt="" class="slider__img" id="imgSLIDE5">
               </div>
            </div>
            <div class="slider__btn slider__btn--right" id="btn-r"><i class="icon-right-dir"></i></div>
            <div class="slider__btn slider__btn--left" id="btn-l"><i class="icon-left-dir"></i></div>
         </section>

CSS:

.container-slider{
      width: 100%;
      max-width: 1280px;
      margin: 0 auto 30px;
      overflow: hidden;
      position: relative;
      box-shadow: 0 0 0,
                  0 5px 15px;/*opcional*/
   }
   .slider{
      display: flex;
      width: 500%;/*100% * cada imagen*/
      height: auto;
      margin-left: -100%;
   }
   .slider__section{
      width: 100%;
   }
   .slider__img{
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
   }
   .slider__btn{
      position: absolute;
      width: 35px;
      height: 35px;
      background: rgba(255, 255, 255, 0.6);
      top: 50%;
      transform: translateY(-50%);
      font-size: 30px;
      font-weight: bold;
      font-family: fantasy;/*opcional*/
      text-align: center;
      border-radius: 50%;
      cursor: pointer;
   }
   .slider__btn:hover{
      background: #FFF;
   }
   .slider__btn--left{
      left: 10px;
   }
   .slider__btn--right{
      right: 10px;
   }

JS:

const slider = document.querySelector("#slider");
let sliderSection = document.querySelectorAll(".slider__section");
let sliderSectionLast = sliderSection[sliderSection.length -1];

const btnLeft = document.querySelector("#btn-l");
const btnRight = document.querySelector("#btn-r");

slider.insertAdjacentElement('afterbegin', sliderSectionLast);

function next() {
   let sliderSectionFirst = document.querySelectorAll(".slider__section")[0];
   slider.style.marginLeft = "-200%";
   slider.style.transition = "all 0.5s";
   setTimeout(function () {
      slider.style.transition = "none";
      slider.insertAdjacentElement('beforeend', sliderSectionFirst);
      slider.style.marginLeft = "-100%";
   }, 500);
}

function previus() {
   let sliderSection = document.querySelectorAll(".slider__section");
   let sliderSectionLast = sliderSection[sliderSection.length -1];
   slider.style.marginLeft = "0";
   slider.style.transition = "all 0.5s";
   setTimeout(function () {
      slider.style.transition = "none";
      slider.insertAdjacentElement('afterbegin',sliderSectionLast);
      slider.style.marginLeft = "-100%";
   }, 500);
}

btnRight.addEventListener('click',function () {
   next();
});

btnLeft.addEventListener('click',function () {
   previus();
});

setInterval(function() {
   next();
},5000);

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.