Click on JavaScript – html ul li slidebar and click on the dynamic conversion option.
Continue the question I asked a few days ago, I have already achieved my goal.
And another question is: if I want to set. <ul> <li> With a slide bar,
And hide something <ul> <li> Object (because there are so many. <ul> <li>, Too much website may seem complicated)
So if I have 6. <ul> <li> Object, and I only want to show 3. <ul> <li> On the website,
Other 3 <ul> <li> Will hide and if I click. < Or >, It will change dynamically <ul> <li>
Make a simple example:
I want to have one slidebar I <ul> <li> Down, so I can click the slide bar left or right as I wish.
const links = $(".SwitchURL-small-link")
const modulo = links.length
let selectedIndex = links.index(".action")
$("#smallTitle button").on("click", function() {
const inc = this.id === "next" ? 1 : -1
selectedIndex = (((selectedIndex + inc) % modulo) + modulo) % modulo
links.each((index, link) => {
link.classList.toggle("action", index === selectedIndex)
})
}).SwitchURL-small-list {
list-style: none;
display: flex;
justify-content: space-evenly;
margin: 0;
padding: 0;
}
.SwitchURL-small-link.action {
border-bottom: 2px solid#AE96DA;
color: #AE96DA;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="SwitchURL-small-list" id="smallTitle">
<li class="SwitchURL-smaill-item"> <button id="prev" type="button"> < </button></li>
<li class="SwitchURL-small-item"> <a href="AA" class="SwitchURL-small-link action" id="SwitchURL0">AA</a></li>
<li class="SwitchURL-small-item"> <a href="BB" class="SwitchURL-small-link" id="SwitchURL1">BB</a></li>
<li class="SwitchURL-small-item"> <a href="CC" class="SwitchURL-small-link" id="SwitchURL2">CC</a></li>
<li class="SwitchURL-small-item"> <a href="DD" class="SwitchURL-small-link" id="SwitchURL3">DD</a></li>
<li class="SwitchURL-small-item"> <a href="EE" class="SwitchURL-small-link" id="SwitchURL4">EE</a></li>
<li class="SwitchURL-small-item"> <a href="FF" class="SwitchURL-small-link" id="SwitchURL5">FF</a></li>
<li class="SwitchURL-smaill-item"> <button id="next" type="button"> > </button></li>
</ul>