Hola, este es un post el en que podrán tener acceso al código sobre como cree un slider para presentar multiples generadores, el cual te permite elegir el que desees según los equipos que desees en un momento de emergencia.
Aquí abajo les dejo un video con el funcionamiento y algún toque final, con el cual podrás apreciar como funciona mientras tengo la interacción sobre el slider debajo de el generador.
El Codigo HTML
Aquí esta el código HTML, creen un fichero «index.html» y agreguen este código:
El código abajo presentado creara un espacio principal para presentar el producto deseado. Al lado de este se crearan una serie de burbujas que te permitirán conocer lo que podrán usar con dicho producto. Y mas abajo una barra que podrás mover para cambiar de producto, y así elegir el mas adecuado para ti.
<div class="gene-banner">
<div class="gene-title">
<h1><b>Generator Wattage Selector</b></h1>
<h2>Find the right wattage for your needs.</h2>
</div>
<div class="gene-type-cont">
<div class="gene-part-cont row fade">
<div class="gene-type col-sm-4">
<div class="generator-cont fade">
<img id="geneImgId" src="/images/20279759.jpg" alt="generator" width="100%">
<a id="geneurllink" href="#" style="text-decoration:none;"><label style="border-radius: 50%; background: #ce2032; border-color:#ce2032; height:44px; color: white; width: 152px; text-align: center; font-size: 16px; padding: 10px 20px;">Shop Now</label></a>
</div>
</div>
<div class="gene-equal col-sm-4">
<div class="generator-equal">
<p>=</p>
</div>
</div>
<div class="gene-support col-sm-4">
<div class="gene-essential">
<p><b>ESSENTIALS</b></p>
<div class="gene-essentials-icons">
<div class="esticon fade">
<div class="row">
<div class="col-xs-3"><div class="gene-icon"><img src="/images/20273924.jpg" alt="table fan icon" width="100%"></div><p>Table Fan</p></div>
<div class="col-xs-3"><div class="gene-icon"><img src="/images/TV-42-icon.png" alt="tv 42 inch icon" width="100%"></div><p>42" TVs</p></div>
<div class="col-xs-3"><div class="gene-icon"><img src="/images/led-light-bulb.png" alt="led light bulb icon" width="100%"></div><p>LED Bulb</p></div>
<div class="col-xs-3"><div class="gene-icon"><img src="/images/laptop-icon.png" alt="laptop icon" width="100%"></div><p>Laptops</p></div>
<div class="col-xs-3"><div class="gene-icon"><img src="/images/pc-icon.png" alt="pc icon" width="100%"></div><p>Desktop PC</p></div>
<div class="col-xs-3"><div class="gene-icon"><img src="/images/printer-icon.png" alt="printer icon" width="100%"></div><p>Printers</p></div>
<div class="col-xs-3"><div class="gene-icon"><img src="/images/mini-fridge-icon.png" alt="mini fridge icon" width="100%"></div><p>Mini Fridge</p></div>
<div class="col-xs-3"><div class="gene-icon"><img src="/images/microwave-icon.png" alt="microwave icon" width="100%"></div><p>Microwave</p></div>
<div class="col-xs-3"><div class="gene-icon"><img src="/images/charger-icon.png" alt="charger icon" width="100%"></div><p>USB Charger</p></div>
<div class="col-xs-3"><div class="gene-icon"><img src="/images/xbox-icon.png" alt="xbox icon" width="100%"></div><p>Game Console</p></div>
<div class="col-xs-3"><div class="gene-icon"><img src="/images/soundbar-icon.png" alt="soundbar icon" width="100%"></div><p>Audio</p></div>
</div>
</div>
<div class="esticon fade">
<div class="row">
<div class="col-xs-3"><div class="gene-icon"><img src="/images/coffee-icon.png" alt="Coofee icon" width="100%"></div><p>Coffee Maker</p></div>
<div class="col-xs-3"><div class="gene-icon"><img src="/images/freezer-icon.png" alt="freezer icon" width="100%"></div><p>Freezer</p></div>
<div class="col-xs-3"><div class="gene-icon"><img src="/images/blender-icon.png" alt="blender icon" width="100%"></div><p>Blender</p></div>
<div class="col-xs-3"><div class="gene-icon"><img src="/images/dishwasher-icon.png" alt="dishwasher icon" width="100%"></div><p>Dishwasher</p></div>
<div class="col-xs-3"><div class="gene-icon"><img src="/images/AC10-icon.png" alt="window ac icon" width="100%"></div><p>Window AC</p></div>
<div class="col-xs-3"><div class="gene-icon"><img src="/images/portableAC-icon.png" alt="portable AC icon" width="100%"></div><p>Portable AC</p></div>
<div class="col-xs-3"><div class="gene-icon"><img src="/images/cooktop-icon.png" alt="cooktop" width="100%"></div><p>Cooktop</p></div>
<div class="col-xs-3"><div class="gene-icon"><img src="/images/rvAc-icon.png" alt="RV AC icon" width="100%"></div><p>RV AC</p></div>
</div>
</div>
<div class="esticon fade">
<div class="row">
<div class="col-xs-3"><div class="gene-icon"><img src="/images/heater-icon.png" alt="heater icon" width="100%"></div><p>Heater</p></div>
<div class="col-xs-3"><div class="gene-icon"><img src="/images/freezer-icon.png" alt="freezer icon" width="100%"></div><p>Freezer</p></div>
<div class="col-xs-3"><div class="gene-icon"><img src="/images/pump-icon.png" alt="Bump Pump icon" width="100%"></div><p>Bump Pump</p></div>
<div class="col-xs-3"><div class="gene-icon"><img src="/images/dishwasher-icon.png" alt="dishwasher icon" width="100%"></div><p>Dishwasher</p></div>
<div class="col-xs-3"><div class="gene-icon"><img src="/images/AC10-icon.png" alt="window ac icon" width="100%"></div><p>Window AC</p></div>
<div class="col-xs-3"><div class="gene-icon"><img src="/images/portableAC-icon.png" alt="portable AC icon" width="100%"></div><p>Portable AC</p></div>
<div class="col-xs-3"><div class="gene-icon"><img src="/images/cooktop-icon.png" alt="cooktop" width="100%"></div><p>Cooktop</p></div>
<div class="col-xs-3"><div class="gene-icon"><img src="/images/rvAc-icon.png" alt="RV AC icon" width="100%"></div><p>RV AC</p></div>
</div>
</div>
<div class="esticon fade">
<div class="row">
<div class="col-xs-3"><div class="gene-icon"><img src="/images/heater-icon.png" alt="heater icon" width="100%"></div><p>Heater</p></div>
<div class="col-xs-3"><div class="gene-icon"><img src="/images/washer-icon.png" alt="washer icon" width="100%"></div><p>Washers</p></div>
<div class="col-xs-3"><div class="gene-icon"><img src="/images/water-heater-icon.png" alt="Water Heater icon" width="100%"></div><p>Water Heater</p></div>
<div class="col-xs-3"><div class="gene-icon"><img src="/images/water-pump-icon.png" alt="water pump icon" width="100%"></div><p>Water Pump</p></div>
<div class="col-xs-3"><div class="gene-icon"><img src="/images/AC10-icon.png" alt="window ac icon" width="100%"></div><p>Window AC</p></div>
<div class="col-xs-3"><div class="gene-icon"><img src="/images/portableAC-icon.png" alt="portable AC icon" width="100%"></div><p>Portable AC</p></div>
<div class="col-xs-3"><div class="gene-icon"><img src="/images/cooktop-icon.png" alt="cooktop" width="100%"></div><p>Cooktop</p></div>
<div class="col-xs-3"><div class="gene-icon"><img src="/images/rvAc-icon.png" alt="RV AC icon" width="100%"></div><p>RV AC</p></div>
</div>
</div>
<div class="esticon fade">
<div class="row">
<div class="col-xs-3"><div class="gene-icon"><img src="/images/heater-icon.png" alt="heater icon" width="100%"></div><p>Heater</p></div>
<div class="col-xs-3"><div class="gene-icon"><img src="/images/washer-icon.png" alt="washer icon" width="100%"></div><p>Washer</p></div>
<div class="col-xs-3"><div class="gene-icon"><img src="/images/water-heater-icon.png" alt="Water heater icon" width="100%"></div><p>Water Heater</p></div>
<div class="col-xs-3"><div class="gene-icon"><img src="/images/water-pump-icon.png" alt="Water Pump icon" width="100%"></div><p>Water Pump</p></div>
<div class="col-xs-3"><div class="gene-icon"><img src="/images/AC10-icon.png" alt="window ac icon" width="100%"></div><p>Window AC</p></div>
<div class="col-xs-3"><div class="gene-icon"><img src="/images/portableAC-icon.png" alt="portable AC icon" width="100%"></div><p>Portable AC</p></div>
<div class="col-xs-3"><div class="gene-icon"><img src="/images/cooktop-icon.png" alt="cooktop" width="100%"></div><p>Cooktop</p></div>
<div class="col-xs-3"><div class="gene-icon"><img src="/images/rvAc-icon.png" alt="RV AC icon" width="100%"></div><p>RV AC</p></div>
</div>
</div>
<div class="esticon fade">
<div class="row">
<div class="col-xs-3"><div class="gene-icon"><img src="/images/heater-icon.png" alt="heater icon" width="100%"></div><p>Heater</p></div>
<div class="col-xs-3"><div class="gene-icon"><img src="/images/washer-icon.png" alt="washer icon" width="100%"></div><p>Washer</p></div>
<div class="col-xs-3"><div class="gene-icon"><img src="/images/water-heater-icon.png" alt="Water Heater icon" width="100%"></div><p>Water Heater</p></div>
<div class="col-xs-3"><div class="gene-icon"><img src="/images/water-pump-icon.png" alt="water Pump icon" width="100%"></div><p>Water Pump</p></div>
<div class="col-xs-3"><div class="gene-icon"><img src="/images/AC10-icon.png" alt="window ac icon" width="100%"></div><p>Window AC</p></div>
<div class="col-xs-3"><div class="gene-icon"><img src="/images/portableAC-icon.png" alt="portable AC icon" width="100%"></div><p>Portable AC</p></div>
<div class="col-xs-3"><div class="gene-icon"><img src="/images/split-icon.png" alt="central icon" width="100%"></div><p>Central AC</p></div>
<div class="col-xs-3"><div class="gene-icon"><img src="/images/rvAc-icon.png" alt="RV AC icon" width="100%"></div><p>RV AC</p></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="gene-slider">
<div class="slider-cont">
<input type="range" name="Starting Watts" id="startingWatts" min="25" max="7034" value="25" class="wslider">
<p>STARTING WATTS: <span id="swatts"></span></p>
</div>
</div>
</div>El Estilo para el codigo HTML
Luego pasamos para el estilo a utilizar. como siempre creamos un fichero de estilo y ponemos el código: Este presenta el estilo, así como oculta las burbujas que no pertenecen al producto presentado. Ademas, le da estilo a la barra corrediza.
.gene-banner{width: 100%; margin: 30px 0; padding: 20px;}
.gene-banner .gene-title{text-align: center; margin-bottom: 20px;}
.gene-banner .gene-title h1{font-size: 30px;}
.gene-banner .gene-title h2{font-size: 20px;}
.gene-banner .gene-type-cont{width: 80%; margin: 0 auto; text-align:center;}
.gene-banner .gene-equal{font-size: 60px; font-weight: 700;}
.gene-banner .gene-part-cont{margin-bottom: 30px; display: block;}
@media screen and (min-width:768px){
.gene-banner .gene-title h1{font-size: 5vw;}
.gene-banner .gene-part-cont{display: flex;}
.gene-banner .gene-equal{width: fit-content;}
.gene-banner .gene-type, .gene-banner .gene-equal, .gene-banner .gene-support{margin: auto; }
.gene-banner .slider-cont{width: 70%; margin: auto;}
}
.gene-banner #geneurllink:hover label{cursor: pointer;}
.gene-banner .gene-icon{border: 1px solid gray; border-radius: 50%; overflow: hidden; margin: 5px; padding: 8px;}
.gene-banner .gene-support .esticon div[class*=col-]{padding: 0;}
.gene-banner .wslider{-webkit-appearance: none; width: 100%; height: 15px; border-radius: 5px; background: #d3d3d3; outline: none; opacity: 0.7; -webkit-transition: .2s; transition: opacity .2s;}
.gene-banner .wslider:hover {opacity: 1;}
.gene-banner .wslider::-webkit-slider-thumb {-webkit-appearance: none; appearance: none; width: 25px; height: 25px; border-radius: 50%; background: #204181; cursor: pointer;}
.gene-banner .wslider::-moz-range-thumb { width: 25px; height: 25px; border-radius: 50%; background: #4CAF50; cursor: pointer;}
.gene-banner .slider-cont p{text-align: center; font-weight: 700; font-size: 20px;}
.fade {
-webkit-animation: fade 1.5s forwards;
animation: fade 1.5s forwards;
}
@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
.info-cont-generator{margin: 30px 0;}
.info-cont-generator .gene-table{width: 100%;text-align: center;}
.info-cont-generator .gene-table div{display: flex; width: 100%;}
.info-cont-generator .gene-table div:nth-of-type(even){background-color: #cdcdcd;}
.info-cont-generator .gene-table div span{width: 33.333%; font-size: 18px;}
.info-cont-generator .gene-table div h3{color: #cd2031; font-weight: 900; font-size: 4vw;}
@media screen and (min-width:768px){
.info-cont-generator .gene-table div h3{font-size: 20px !important;}
}El Funcionamiento del banner en javascript
Y por ultimo el funcionamiento del banner en JavaScript. La función del código es simple; mientras mueves el slider, las imágenes de los generadores van a cambiar, así como lo equipos que puedes utilizar, así como la cantidad de wattage que soporta el generador. Por supuesto, primero crea el fichero script.js y agrega esto abajo.
(function(){
var slider = document.getElementById('startingWatts'),
sWatts = document.getElementById('swatts'),
essentialIcons = document.querySelectorAll('.esticon'),
geneImgId = document.querySelector('#geneImgId'),
geneurllink = document.querySelector('#geneurllink'),
imgGeneBank = ['20279759.jpg','82413.jpg', '20246329.jpg', '20242232.jpg', '20233198.jpg', '20279134.jpg', '20279593.jpg'],
geneurl = ['url00', 'url01', 'url02', 'url03', 'url04', 'url05', 'url06'];
function loopinessen(nmb){
for(var i=0; i<essentialIcons.length;i++){
essentialIcons[i].style.display = "none";
}
essentialIcons[nmb].style.display = "block";
}
loopinessen(0);
sWatts.innerHTML = slider.value;
slider.oninput = function(){
const x = this.value;
switch (true) {
case (x <= 1200):
geneImgId.src = imgGeneBank[0];
geneurllink.href = geneurl[0];
loopinessen(0);
break;
case (x > 1200 && x <= 2300):
geneImgId.src = imgGeneBank[1];
geneurllink.href = geneurl[1];
loopinessen(1);
break;
case (x > 2300 && x <= 3250):
geneImgId.src = imgGeneBank[2];
geneurllink.href = geneurl[2];
loopinessen(2);
break;
case (x > 3250 && x <= 3500):
geneImgId.src = imgGeneBank[3];
geneurllink.href = geneurl[3];
break;
case (x > 3500 && x <= 5250):
geneImgId.src = imgGeneBank[4];
geneurllink.href = geneurl[4];
loopinessen(3);
break;
case (x > 5250 && x <= 6580):
geneImgId.src = imgGeneBank[5];
geneurllink.href = geneurl[5];
loopinessen(4);
break;
case (x > 6580):
geneImgId.src = imgGeneBank[6];
geneurllink.href = geneurl[6];
loopinessen(5);
break;
default:
break;
}
sWatts.innerHTML = this.value;
};
})();El Resultado final
el resultado final sera, con tus propias imágenes, algo similar a esta de abajo:
y el funcionamiento del banner lo prodran ver el el video a continuacion:
Y ahora una tacita de café para finalizar.