1

Como se puede ver en el fragmento de código tengo un div class="Contenido" dentro de este esta el div ID="banner-inicio" y dentro varios `div class="slider".

Lo que sucede es que el div ID="banner-inicio" tiene un alto de 75% con respecto al div class="contenido" que tiene un ato de 100% de la ventana pero lo que en realidad necesito es que div ID="banner-inicio" tenga como alto el 36.85% del ancho de DIV class="slider" quiero hacerlo con Javascript (NO JQuery).

Esto para que el div ID="banner-inicio" no ocupe mas espacio del necesario ya que en dispositivos móviles el 75% de alto de div ID="banner-inicio" es demasiado.

Por cierto las imágenes de mi slider sus dimensiones son 1900 x 700 px no puedo cargarlas a esta plataforma por eso solo pude letras

var slider = document.getElementsByClassName('slider');
var Indice = 0;

function MovSlider(orientacion) {
  var MaxSlider = slider.length;
  Indice = (orientacion == "derecha") ? Indice + 1 : Indice - 1;
  Indice = (Indice >= MaxSlider) ? 0 : Indice;
  Indice = (Indice < 0) ? MaxSlider - 1 : Indice;
  var margen = "-" + (Indice * slider[Indice].scrollWidth) + "px";
  slider[0].style.marginLeft = margen;
}
/* ESTILOS DE INICIO*/

* {
  padding: 0px;
  margin: 0px;
}

html,
body {
  height: 100%;
  border: solid 1px blue;
  box-sizing: border-box;
}

.Contenido {
  border: solid 1px red;
  height: 100%;
  position: relative;
}

#banner-inicio {
  width: 100%;
  height: 75%;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  border: solid 1px green;
}

#banner-inicio .slider {
  width: 100%;
  height: 100%;
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: top;
  display: inline-block;
  transition: all 1s;
  margin-right: -4px;
  background-color: aqua;
}

.derecha,
.izquierda {
  position: absolute;
  border: solid 1px white;
  background-color: blue;
  color: white;
  width: 50px;
  height: 50px;
  top: 50%;
  z-index: 1;
}

.derecha {
  right: 0px;
}

.izquierda {
  left: 0px;
}

.derecha:hover {
  cursor: pointer;
}

.izquierda:hover {
  cursor: pointer;
}
<div class="Contenido">
  <div id="banner-inicio">
    <div class="derecha" onclick="MovSlider('derecha')">&#62;</div>
    <div class="izquierda" onclick="MovSlider('izquierda')">&#60;</div>
    <div class="slider" style="background-image: url(Imagenes/BANNER-promo.jpg);">A</div>
    <div class="slider" style="background-image: url(Imagenes/BANNER-cyberday17.jpg);">B</div>
    <div class="slider" style="background-image: url(Imagenes/BANNER06.jpg);">C</div>
    <div class="slider" style="background-image: url(Imagenes/BANNER08.jpg);">D</div>
    <div class="slider" style="background-image: url(Imagenes/BANNER17.jpg);">E</div>
  </div>
</div>

1 respuesta 1

0

No necesitas javascript, puede hacerse directamente con CSS. Cambia en #banner-inicio el ancho por:

#banner-inicio {    
      height: 36.85vw; 
}

La unidad vm es exactamente el tanto porciento del ancho (w de width). Si la utilizas en el alto de algun elemento, vinculas el alto como una proporcion del ancho, justo lo que necesitas.

PD: Tambien hay una unidad vh que sirve para hacer lo mismo, con relacion a la altura del viewport (que ojo, es la window del browser, no la pantalla del dispositivo)

var slider = document.getElementsByClassName('slider');
var Indice = 0;

function MovSlider(orientacion) {
  var MaxSlider = slider.length;
  Indice = (orientacion == "derecha") ? Indice + 1 : Indice - 1;
  Indice = (Indice >= MaxSlider) ? 0 : Indice;
  Indice = (Indice < 0) ? MaxSlider - 1 : Indice;
  var margen = "-" + (Indice * slider[Indice].scrollWidth) + "px";
  slider[0].style.marginLeft = margen;
}
/* ESTILOS DE INICIO*/

* {
  padding: 0px;
  margin: 0px;
}

html,
body {
  height: 100%;
  border: solid 1px blue;
  box-sizing: border-box;
}

.Contenido {
  border: solid 1px red;
  height: 100%;
  position: relative;
}

#banner-inicio {
  width: 100%;
  height: 36.85vw;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  border: solid 1px green;
}

#banner-inicio .slider {
  width: 100%;
  height: 100%;
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: top;
  display: inline-block;
  transition: all 1s;
  margin-right: -4px;
  background-color: aqua;
}

.derecha,
.izquierda {
  position: absolute;
  border: solid 1px white;
  background-color: blue;
  color: white;
  width: 50px;
  height: 50px;
  top: 50%;
  z-index: 1;
}

.derecha {
  right: 0px;
}

.izquierda {
  left: 0px;
}

.derecha:hover {
  cursor: pointer;
}

.izquierda:hover {
  cursor: pointer;
}
<div class="Contenido">
  <div id="banner-inicio">
    <div class="derecha" onclick="MovSlider('derecha')">&#62;</div>
    <div class="izquierda" onclick="MovSlider('izquierda')">&#60;</div>
    <div class="slider" style="background-image: url(Imagenes/BANNER-promo.jpg);">A</div>
    <div class="slider" style="background-image: url(Imagenes/BANNER-cyberday17.jpg);">B</div>
    <div class="slider" style="background-image: url(Imagenes/BANNER06.jpg);">C</div>
    <div class="slider" style="background-image: url(Imagenes/BANNER08.jpg);">D</div>
    <div class="slider" style="background-image: url(Imagenes/BANNER17.jpg);">E</div>
  </div>
</div>

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.