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".
buttons
Javascript code:
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"));
}
);
});
$(document).ready(function () {
var hbap = document.getElementsByClassName("hb-approach-container")[0];
var hbex = document.getElementsByClassName("hb-explore-container")[0];
var parenthbap = hbap.parentNode;
var parenthbex = hbex.parentNode;
var wrapper = document.createElement("div");
wrapper.classList.add("slider-section");
parenthbap.replaceChild(wrapper, hbap);
parenthbex.replaceChild(wrapper, hbex);
wrapper.appendChild(hbap);
wrapper.appendChild(hbex);
console.log("done");
});
<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 aa 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="6" aria-label="Show ef section">
<span>Optimization</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">Slide 0</div>
<div class="slide slide-1" style="display: none;">Slide 1</div>
<div class="slide slide-2" style="display: none;">Slide 2</div>
<div class="slide slide-3" style="display: none;">Slide 3</div>
<div class="slide slide-4" style="display: none;">Slide 4</div>
<div class="slide slide-5" style="display: none;">Slide 5</div>
<div class="slide slide-6" style="display: none;">Slide 6</div>
