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"> &lt; </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"> &gt; </button></li>
</ul>

Leave a Reply

Your email address will not be published.