Why my javascript code for slider buttons doesn't display content when i click on the buttons 5 and 6?

Question

i'm trying to work on a slider that shows 6 slides, the purpose is to access each slide by clicking on a button. My issue here is that 4 buttons works perfectly but when i try to add 2 more it doesn't work like the others.

I'm new to Javascript. Can you please tell me if there is something here that limits the use of buttons to 4 or something like that?

The section is named "approach".

 jQuery(document).ready(function() { var e = 0; function n(e) { 0 == e? jQuery("section.hb-approach-container.slide-nav").removeClass( "show-slide-nav" ): jQuery("section.hb-approach-container.slide-nav").addClass( "show-slide-nav" ), jQuery("section.hb-approach-container.slide").fadeOut(), jQuery("section.hb-approach-container.slide-" + e).fadeIn(), console.log(e); } jQuery("section.hb-approach-container [data-show-slide]").on( "click", function() { n((e = parseInt(jQuery(this).data("show-slide")))); } ), jQuery("section.hb-approach-container.slide-picker.prev-slide").on( "click", function() { n(--e); } ), jQuery("section.hb-approach-container.slide-picker.next-slide").on( "click", function() { e < jQuery("section.hb-approach-container.slide").length - 1? n(++e): n((e = 0)); } ), jQuery(".hb-explore-container [data-show-slide]").on( "click", function() {.(function(e) { jQuery(".hb-explore-container.slide-0"),addClass("blur"). 0 == e && (jQuery(".hb-explore-container.slide-0"),removeClass( "blur" ). jQuery(".explore-overview-container"),css( "height"; "auto" )). jQuery(".hb-explore-container.slide"),fadeOut(). jQuery(".hb-explore-container.slide-" + e),fadeIn(). 0.= e && setTimeout(function() { jQuery(".explore-overview-container").outerHeight( jQuery( ":explore-overview-container.slide;visible" ),outerHeight() ); }. 25); })(jQuery(this);data("show-slide")); } ). }). /* wrap everything in div.silder-section */ $(document);ready(function() { var hbap = document.getElementsByClassName("hb-approach-container")[0]; var hbex = document.getElementsByClassName("hb-explore-container")[0]; // `element` is the element you want to wrap var parenthbap = hbap.parentNode; var parenthbex = hbex.parentNode; var wrapper = document.createElement("div"). wrapper;classList.add("slider-section"), // set the wrapper as child (instead of the element) parenthbap;replaceChild(wrapper. hbap), parenthbex;replaceChild(wrapper. hbex); // set element as child of wrapper wrapper.appendChild(hbap); wrapper.appendChild(hbex); console;log("done"); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <section class="hb-approach-container py-5"> <a name="hb-approach-container-top"></a> <div class="slide-nav"> <div class="container"> <div style="background:#152C73"> <div class="row slide-nav-content justify-content-between"> <div class="col-12 col-md-4 col-lg-2"> <button type="button" class="close-slide d-flex align-items-center justify-content-center w-100" data-show-slide="0" aria-label="Close section"> <img src="https://images.carriercms.com/image/upload/v1606147452/carrier-corp/healthy-buildings/times-icon.svg" alt="Close Slide" class="mr-2"> <span>Close</span> </button> </div> <div class="col-12 col-md-6 col-lg-4"> <div class="slide-picker d-flex h-100 align-items-center justify-content-between"> <button type="button" class="d-flex align-items-center h-100 prev-slide" aria-label="Previous section"> <img src="https://images.carriercms.com/image/upload/v1606147434/carrier-corp/healthy-buildings/chevron-back.svg" alt="Previous section"> </button> <div id="nav-icons" class="d-flex align-items-center justify-content-center"> <button type="button" class="d-flex align-items-center justify-content-center" data-show-slide="1" aria-label="Show expertise section"> <span>Expertise</span> <img src="https://images.carriercms.com/image/upload/v1606147430/carrier-corp/healthy-buildings/expertise-icon-white.svg" alt="Expertise"> </button> <button type="button" class="d-flex align-items-center justify-content-center" data-show-slide="2" aria-label="Show assessment section"> <span>Assessment</span> <img src="https://images.carriercms.com/image/upload/v1606147432/carrier-corp/healthy-buildings/assessment-icon-white.svg" alt="Assessment"> </button> <button type="button" class="d-flex align-items-center justify-content-center" data-show-slide="3" aria-label="Show implementation section"> <span>Implementation</span> <img src="https://images.carriercms.com/image/upload/v1606147436/carrier-corp/healthy-buildings/implementation-icon-white.svg" alt="Implementation"> </button> <button type="button" class="d-flex align-items-center justify-content-center" data-show-slide="4" aria-label="Show optimization section"> <span>Optimization</span> <img src="https://images.carriercms.com/image/upload/v1606147445/carrier-corp/healthy-buildings/optimization-icon-white.svg" alt="Optimization"> </button> <button type="button" class="d-flex align-items-center justify-content-center" data-show-slide="5" aria-label="Show button section"> <span>button</span> <img src="https://images.carriercms.com/image/upload/v1606147445/carrier-corp/healthy-buildings/optimization-icon-white.svg" alt="Optimization"> </button> <button type="button" class="d-flex align-items-center justify-content-center" data-show-slide="6" aria-label="Show button section"> <span>button</span> <img src="https://images.carriercms.com/image/upload/v1606147445/carrier-corp/healthy-buildings/optimization-icon-white.svg" alt="Optimization"> </button> </div> <button type="button" class="d-flex align-items-center h-100 next-slide" aria-label="Next section"> <img src="https://images.carriercms.com/image/upload/v1606147432/carrier-corp/healthy-buildings/chevron-fwd.svg" alt="Next section"> </button> </div> </div> </div> </div> </div> </div> <div class="slide slide-0"> <div class="container"> <div style="background:#D9EDFE; padding:2.5rem 2.5rem 0 2.5rem;"> <div class="row"> <div class="col-12 col-lg-5"> <h2 class="mb-md-4">CARRIER'S APPROACH TO HEALTHY BUILDINGS</h2> <p>There are many ways to make homes and buildings healthier. Our approach provides customized solutions and supports the needs of both new and existing buildings along the journey toward a healthier future. We have the expertise and full portfolio of equipment, services and automation solutions needed to help protect people and property, enhance occupant experiences and increase operational efficiencies for the entire lifecycle.</p> <p><strong>Click on each area of our approach to learn more.</strong></p> </div> <div class="col wheelnav d-md-flex flex-wrap mx-auto mx-xl-0"> <img class="wheelnav-base" src="https://images.carriercms.com/image/upload/v1606147453/carrier-corp/healthy-buildings/wheelnav-base.svg" alt=""> <img class="img-fluid wheelnav-graphic mb-3" src="https://images.carriercms.com/image/upload/v1608306986/carrier-corp/healthy-buildings/our-approach.png" alt="" /> <a href="#hb-approach-container-top" class="align-items-center" data-show-slide="1"> <img class="approach-icon" src="https://images.carriercms.com/image/upload/v1606147430/carrier-corp/healthy-buildings/expertise-icon.svg" alt="Our Expertise"> <span>Expertise</span> <img class="plus-icon mr-0 ml-auto" src="https://images.carriercms.com/image/upload/v1606147445/carrier-corp/healthy-buildings/plus-icon.svg" alt=""> </a> <a href="#hb-approach-container-top" class="align-items-center" data-show-slide="2"> <img class="approach-icon" src="https://images.carriercms.com/image/upload/v1606147429/carrier-corp/healthy-buildings/assessment-icon.svg" alt="Assessment"> <span>Assessments</span> <img class="plus-icon mr-0 ml-auto" src="https://images.carriercms.com/image/upload/v1606147445/carrier-corp/healthy-buildings/plus-icon.svg" alt=""> </a> <a href="#hb-approach-container-top" class="align-items-center" data-show-slide="4"> <img class="approach-icon" src="https://images.carriercms.com/image/upload/v1606147444/carrier-corp/healthy-buildings/optimization-icon.svg" alt="Optimization"> <span>Optimization</span> <img class="plus-icon mr-0 ml-auto" src="https://images.carriercms.com/image/upload/v1606147445/carrier-corp/healthy-buildings/plus-icon.svg" alt=""> </a> <a href="#hb-approach-container-top" class="align-items-center" data-show-slide="3"> <img class="approach-icon" src="https://images.carriercms.com/image/upload/v1606147435/carrier-corp/healthy-buildings/implementation-icon.svg" alt="Implementation"> <span>Implementation</span> <img class="plus-icon mr-0 ml-auto" src="https://images.carriercms.com/image/upload/v1606147445/carrier-corp/healthy-buildings/plus-icon.svg" alt=""> </a> </div> </div> </div> <div class="row"> <div class="col-12"> <img src="https://images.carriercms.com/image/upload/v1606147432/carrier-corp/healthy-buildings/green-building-bg-01.jpg" alt="" style="width:100%; border-top:15px solid #fff; border-bottom:15px solid #fff;"> </div> </div> <div style="padding:2.5rem; color:#fff; background:linear-gradient(to bottom, #1891F6,#152C73);"> <div class="row"> <div class="col-12"> <h3>TURN TO CARRIER TO HELP YOU:</h3> </div> <div class="col-12 col-md-6 col-lg-3 mb-3 mb-lg-0"> <div class="bucket-border h-100"> <div class="row"> <div class="col-12 col-sm-4 col-lg-12"> <img src="https://images.carriercms.com/image/upload/v1606147435/carrier-corp/healthy-buildings/clipboard-icon-01.svg" alt="" class="img-fluid"> </div> <div class="col"> <span class="text-big">1</span> <p>Assess the needs of your indoor environment</p> </div> </div> </div> </div> <div class="col-12 col-md-6 col-lg-3 mb-3 mb-lg-0"> <div class="bucket-border h-100"> <div class="row"> <div class="col-12 col-sm-4 col-lg-12"> <img src="https://images.carriercms.com/image/upload/v1606147437/carrier-corp/healthy-buildings/clipboard-icon-02.svg" alt="" class="img-fluid"> </div> <div class="col"> <span class="text-big">2</span> <p>Provide recommendations for service, modifications and new equipment</p> </div> </div> </div> </div> <div class="col-12 col-md-6 col-lg-3 mb-3 mb-lg-0"> <div class="bucket-border h-100"> <div class="row"> <div class="col-12 col-sm-4 col-lg-12"> <img src="https://images.carriercms.com/image/upload/v1606147452/carrier-corp/healthy-buildings/thermostat-icon-01.svg" alt="" class="img-fluid"> </div> <div class="col"> <span class="text-big">3</span> <p>Implement equipment and services that help make your indoor environment safe and healthy</p> </div> </div> </div> </div> <div class="col-12 col-md-6 col-lg-3 mb-3 mb-lg-0"> <div class="bucket-border h-100"> <div class="row"> <div class="col-12 col-sm-4 col-lg-12"> <img src="https://images.carriercms.com/image/upload/v1606147445/carrier-corp/healthy-buildings/data-icon-01.svg" alt="" class="img-fluid"> </div> <div class="col"> <span class="text-big">4</span> <p>Access the data that proves the value of solutions and enables ongoing system optimization</p> </div> </div> </div> </div> </div> </div> </div> </div> <div class="slide slide-1" style="display:none;"> <div class="container"> <h3>Renueva tu central de producción con alta eficiencia</h3> <div style="text-align: center;"><a class="btn btn-primary" style="align-self: center;" target="_self" aria-label="" href="#">EMPEZAR AHORA</a> </div> </div> </div> </div> <div class="slide slide-2" style="display:none;"> <div class="container"> </div> </div> </div> </div> <div class="slide slide-3" style="display:none;"> <div class="container"> <h2>Aumenta la eficiencia sin necesidad de sustituir el equipo</h2> <div class="container"> <div class="row padding-small Left"> <div class="col-md-7 align-self-center text-left"> <div class="card-body"> <div> <h3>El ciclo de absorción para recuperar el calor residual</h3> <div class="card-text"> <p>Si la instalación dispone de energía térmica residual como, las enfriadoras de absorción pueden servir para generar frío de forma continuada. Son unidades muy eficientes, que alcanzan cargas de refrigeración críticas con un consumo eléctrico mínimo.</p> <p>Esta solución aporta una gran flexibilidad a la instalación pudiendo adaptarse a una gran variedad de fuentes de calor.</p> <br/> <a class="btn btn-primary" target="_self" aria-label="" href="#">Quiero saber más</a> </div> </div> </div> </div> <div class="col-md-5 align-self-center text-center"> <img class="cld-responsive img-fluid" data-src="https://images.carriercms.com/image/upload/v1660497930/carrier/commercial-hvac-europe/graphics/ES/auditorias-energeticas-y-de-operacion.png" alt="auditorias-energeticas-y-de-operacion" loading="lazy" src="https://images.carriercms.com/image/upload/v1660497930/carrier/commercial-hvac-europe/graphics/ES/auditorias-energeticas-y-de-operacion.png"> </div> </div> </div> <div class="container-fluid py-2 ct-1blks-w100-basic bg-primary-green text-center"> <h3 style="color: #fff">¿Quieres que te ayudemos a conocer el potencial de ahorro en tu instalación incorporando un sistema de recuperación de calor?</h3> <div style="text-align: center;"><a class="btn btn-primary" style="align-self: center;" target="_self" aria-label="" href="#">EMPEZAR AHORA</a> </div> </div> </div> </div> <div class="slide slide-4" style="display:none;"> <div class="container"> <h3>Utiliza el freecooling para reducir el consumo</h3> </div> </div> <div class="slide slide-5" style="display:none;"> <div class="container"> <h3>Emplea equipos bomba de calor</h3> <p>Para lograr descarbonizar la industria, se requiere de un aumento de su electrificación. La bomba de calor es una solución que utiliza energía procedente de fuentes renovables (aerotermia,hidrotermia o geotermia) y que proporciona refrigeración, calefacción y/o agua caliente sanitaria, de forma eficiente y sostenible, asegurando la fiabilidad y continuidad operativa de los procesos.</p> <h3>Toda una gama de soluciones para adaptarse a tus necesidades</h3> <div class="row" style="text-align:center;"> <div class="col-sm-3 pb-3" style="margin: auto;"> <a title="Tecnología Greenspeed" href="https://www.carrier.com/commercial/es/es/innovacion/greenspeed/"><img class="cld-responsive img-fluid" loading="lazy" data-src="https://images.carriercms.com/image/upload/v1562156895/carrier/commercial-hvac-europe/logos/carrier-innovation-greenspeed-logo_sq.png" title="Tecnología Greenspeed" alt="Tecnología Greenspeed" style="width: 150px; height: auto;" src="https://images.carriercms.com/image/upload/v1562156895/carrier/commercial-hvac-europe/logos/carrier-innovation-greenspeed-logo_sq.png"></a> <br> <br> <h4><a title="Tecnología Greenspeed" href="https://www.carrier.com/commercial/es/es/innovacion/greenspeed/">Tecnología Greenspeed</a></h4> </div> <div class="col-sm-3 pb-3" style="margin: auto;"> <a title="Variador de velocidad" href="https://carriernow.eu/contenido/?fwp_buscar=SMARTIPS%20VARIADOR" target="_blank"><img class="cld-responsive img-fluid" loading="lazy" data-src="https://images.carriercms.com/image/upload/v1560867221/carrier/commercial-hvac-europe/products/chillers/carrier-30KAV-variable-speed-screw-liquid-chiller-front-right.jpg" title="Variador de velocidad" alt="Variador de velocidad" style="width: 150px; height: auto;" src="https://images.carriercms.com/image/upload/v1560867221/carrier/commercial-hvac-europe/products/chillers/carrier-30KAV-variable-speed-screw-liquid-chiller-front-right.jpg"></a> <br> <br> <h4><a title="Variador de velocidad" href="https://carriernow.eu/contenido/?fwp_buscar=SMARTIPS%20VARIADOR" target="_blank">Variador de velocidad</a></h4> </div> <div class="col-sm-3 pb-3" style="margin: auto;"> <a title="Freecooling Integrado" href="https://carriernow.eu/contenido/?fwp_buscar=SMARTIPS%20FREECOOLING%20INTEGRADO" target="_blank"><img class="cld-responsive img-fluid" loading="lazy" data-src="https://images.carriercms.com/image/upload/v1655389626/carrier/commercial-hvac-europe/graphics/ES/freecooling.jpg" title="Freecooling Integrado" alt="Freecooling Integrado" style="width: auto; height: 150px;" src="https://images.carriercms.com/image/upload/v1655389626/carrier/commercial-hvac-europe/graphics/ES/freecooling.jpg"></a> <br> <br> <h4><a title="Freecooling Integrado" href="https://carriernow.eu/contenido/?fwp_buscar=SMARTIPS%20FREECOOLING%20INTEGRADO" target="_blank">Freecooling Integrado</a></h4> </div> </div> <div class="row" style="text-align:center;"> <div class="col-sm-3 pb-3" style="margin: auto;"> <a title="Tecnología Greenspeed" href="https://www.carrier.com/commercial/es/es/innovacion/greenspeed/"><img class="cld-responsive img-fluid" loading="lazy" data-src="https://images.carriercms.com/image/upload/v1562156895/carrier/commercial-hvac-europe/logos/carrier-innovation-greenspeed-logo_sq.png" title="Tecnología Greenspeed" alt="Tecnología Greenspeed" style="width: 150px; height: auto;" src="https://images.carriercms.com/image/upload/v1562156895/carrier/commercial-hvac-europe/logos/carrier-innovation-greenspeed-logo_sq.png"></a> <br> <br> <h4><a title="Tecnología Greenspeed" href="https://www.carrier.com/commercial/es/es/innovacion/greenspeed/">Tecnología Greenspeed</a></h4> </div> <div class="col-sm-3 pb-3" style="margin: auto;"> <a title="Variador de velocidad" href="https://carriernow.eu/contenido/?fwp_buscar=SMARTIPS%20VARIADOR" target="_blank"><img class="cld-responsive img-fluid" loading="lazy" data-src="https://images.carriercms.com/image/upload/v1560867221/carrier/commercial-hvac-europe/products/chillers/carrier-30KAV-variable-speed-screw-liquid-chiller-front-right.jpg" title="Variador de velocidad" alt="Variador de velocidad" style="width: 150px; height: auto;" src="https://images.carriercms.com/image/upload/v1560867221/carrier/commercial-hvac-europe/products/chillers/carrier-30KAV-variable-speed-screw-liquid-chiller-front-right.jpg"></a> <br> <br> <h4><a title="Variador de velocidad" href="https://carriernow.eu/contenido/?fwp_buscar=SMARTIPS%20VARIADOR" target="_blank">Variador de velocidad</a></h4> </div> <div class="col-sm-3 pb-3" style="margin: auto;"> <a title="Freecooling Integrado" href="https://carriernow.eu/contenido/?fwp_buscar=SMARTIPS%20FREECOOLING%20INTEGRADO" target="_blank"><img class="cld-responsive img-fluid" loading="lazy" data-src="https://images.carriercms.com/image/upload/v1655389626/carrier/commercial-hvac-europe/graphics/ES/freecooling.jpg" title="Freecooling Integrado" alt="Freecooling Integrado" style="width: auto; height: 150px;" src="https://images.carriercms.com/image/upload/v1655389626/carrier/commercial-hvac-europe/graphics/ES/freecooling.jpg"></a> <br> <br> <h4><a title="Freecooling Integrado" href="https://carriernow.eu/contenido/?fwp_buscar=SMARTIPS%20FREECOOLING%20INTEGRADO" target="_blank">Freecooling Integrado</a></h4> </div> </div> <div class="container-fluid py-2 ct-1blks-w100-basic bg-primary-green text-center"> <h3 style="color: #fff">¿Necesitas asesoramiento para ver cómo implantar la bomba de calor en tu instalción? Contacta con nosotros.</h3> <div style="text-align: center;"><a class="btn btn-primary" style="align-self: center;" target="_self" aria-label="" href="#">EMPEZAR AHORA</a> </div> </div> </div> </div> <div class="slide slide-6" style="display:none;"> <div class="container"> <h3>Diseña sistemas de gestión avanzados</h3> <p>Los sistemas de control son imprescindibles para que todos los componentes funcionen de la mejor forma y se establezcan estrategias de gestión correctas. Además pueden servir para supervisar la instalación de forma remota simplificando el mantenimiento. </p> <div class="row" style="text-align:center;"> <div class="col-sm-3 pb-3" style="margin: auto;"> <a title="Gestión Centralizada" href="https://www.carrier.com/commercial/es/es/soluciones/soluciones-de-control/soluciones-de-control-personalizadas/"><img class="cld-responsive img-fluid" loading="lazy" data-src="https://images.carriercms.com/image/upload/v1563810540/carrier/commercial-hvac-europe/screens/carrier-plantctrl-monitoring-screen_sq.png" title="Gestión Centralizada" alt="Gestión Centralizada" style="width: 150px; height: auto;" src="https://images.carriercms.com/image/upload/v1563810540/carrier/commercial-hvac-europe/screens/carrier-plantctrl-monitoring-screen_sq.png"></a> <br> <br> <h4><a title="Gestión Centralizada" href="https://www.carrier.com/commercial/es/es/soluciones/soluciones-de-control/soluciones-de-control-personalizadas/">Gestión Centralizada</a></h4> </div> <div class="col-sm-3 pb-3" style="margin: auto;"> <a title="Monitorización Remota" href="https://www.carrier.com/commercial/es/es/servicios/operate-service-protect/bluedge-digital/"><img class="cld-responsive img-fluid" loading="lazy" data-src="https://images.carriercms.com/image/upload/v1614679933/carrier/commercial-hvac-europe/service/Carrier-BluEdge.png" title="Monitorización Remota" alt="Monitorización Remota" style="width: auto; height: 150px;" src="https://images.carriercms.com/image/upload/v1614679933/carrier/commercial-hvac-europe/service/Carrier-BluEdge.png"></a> <br> <br> <h4><a title="Monitorización Remota" href="https://www.carrier.com/commercial/es/es/servicios/operate-service-protect/bluedge-digital/">Monitorización Remota</a></h4> </div> <div class="col-sm-3 pb-3" style="margin: auto;"> <a title="Secuenciación Inteligente" href="https://www.carrier.com/commercial/es/es/soluciones/soluciones-de-control/plantctrl/"><img class="cld-responsive img-fluid" loading="lazy" data-src="https://images.carriercms.com/image/upload/v1602193231/carrier/commercial-hvac-europe/graphics/ES/carrier-plantctrl-graphic_es.png" title="Secuenciación Inteligente" alt="Secuenciación Inteligente" style="width: auto; height: 150px;" src="https://images.carriercms.com/image/upload/v1602193231/carrier/commercial-hvac-europe/graphics/ES/carrier-plantctrl-graphic_es.png"></a> <br> <br> <h4><a title="Secuenciación Inteligente" href="https://www.carrier.com/commercial/es/es/soluciones/soluciones-de-control/plantctrl/">Secuenciación Inteligente</a></h4> </div> </div> <div class="container-fluid py-2 ct-1blks-w100-basic bg-primary-green text-center"> <h3 style="color: #fff">¿Necesitas asesoramiento para ver cómo implantar un sistema de gestión en tu instalción? Contacta con nosotros.</h3> <div style="text-align: center;"><a class="btn btn-primary" style="align-self: center;" target="_self" aria-label="" href="#">EMPEZAR AHORA</a> </div> </div> </div> </div> <div class="slide-footer"> <div class="container mt-4"> <div class="bg-blue p-4"> <div class="row"> <div class="col d-flex align-items-center"> <div> <h3 class="mb-3" style="color:white;">GET STARTED TODAY</h3> <p>Whether you have specific products or strategies in mind or you need help determining where to start, connect with our experts to take steps toward a healthier building.</p> <a href="/carrier/en/worldwide/buildings/healthy-buildings/form/" class="btn btn-primary">CONNECT WITH AN EXPERT <i class="material-icons align-bottom"> keyboard_arrow_right </i></a> </div> </div> <div class="col-2 offset-1 d-none d-md-flex justify-content-end"> <img src="https://images.carriercms.com/image/upload/v1606147435/carrier-corp/healthy-buildings/clipboard-icon-01.svg" alt="" class="w-100"> </div> </div> </div> </div> </div> </section>