About a div in css and Button function

Question

I try to create a div that the width can be 100% like

No matter How I change the HTML/windows size, It can show the same space.

Also, I create a function for the button. But My expectation is that clicking the right button, the 5 PM data would replace 4 PM and so on. How can I fix the div CSS and the button?

Here is my code in HTML:

var Index = 0;
var slides = document.getElementsByClassName("Slides");

function Add() {
  if (Index >= slides.length) {
    Index = 1;
    for (var j = 0; j < 4; j++) {
      slides[(Index + j - 1) % slides.length].style.display = "inline-block"
    }
    for (var j = 0; j < slides.length - 4; j++) {
      slides[(Index + j + 3) % slides.length].style.display = "none"
    }
  } else {
    Index += 1;
    for (var j = 0; j < 4; j++) {
      slides[(Index + j - 1) % slides.length].style.display = "inline-block"
    }
    for (var j = 0; j < slides.length - 4; j++) {
      slides[(Index + j + 3) % slides.length].style.display = "none"
    }
  }
  console.log("Index is " + Index);
}
Add();

.container {
  position: absolute;
  bottom: 0;
  margin: auto;
  height: 200px;
  width: 99%;
}

.prev,
.next {
  cursor: pointer;
  padding: 12px 18px 12px 18px;
  margin: 5px;
  color: black;
  font-weight: bold;
  font-size: 13px;
  transition: 0.6s ease;
  border-radius: 50%;
  user-select: none;
}

.next {
  right: 0;
}

.prev:hover,
.next:hover {
  background-color: rgba(58, 58, 58, 0.8);
  color: white;
}

.butcontainer {
  display: inline-block;
  position: absolute;
  margin: 15px;
  height: 80px;
  width: 120px;
  padding-top: 5%;
}

.Slides {
  background-color: violet;
  display: inline-block;
  margin: 15px;
  height: 100px;
  width: 80px;
}

.SlideText {
  font-size: 22px;
}

<div class="container">
  <div class="Slides">
    <span>NowTime</span>
    <div>Icon</div>
    <span class="SlideText">1</span>
  </div>
  <div class="Slides">
    <span>Time</span>
    <div>Icon</div>
    <span class="SlideText">2</span>
  </div>
  <div class="Slides">
    <span>Time</span>
    <div>Icon</div>
    <span class="SlideText">3</span>
  </div>
  <div class="Slides">
    <span>Time</span>
    <div>Icon</div>
    <span class="SlideText">4</span>
  </div>
  <div class="Slides">
    <span>Time</span>
    <div>Icon</div>
    <span class="SlideText">5</span>
  </div>
  <div class="butcontainer">
    <a class="next" onclick="Add()">&#10095;</a>
  </div>
</div>

Demo:http://jsfiddle.net/xwsvdeLq/2/

for the width just use container-fluid instead of container, and change width of slides. — Simone Rossaini
– Simone Rossaini, Commented Sep 11, 2020 at 10:52

Shubham Srivastava · Accepted Answer · 2020-09-11 11:08:44Z

1

If you just want the left most node to disappear use this

var Index = 0;
var slides = document.getElementsByClassName("Slides");

function Add() {
    let sLen = slides.length
  Index = (Index) % sLen
  slides[Index].style.display = "none"
  console.log("Index is " + Index);
  Index++
}

But you can use the second one if you want them to cycle ie the node removed from left comes back from right

function Add() {
    let zeroData = slides[0].innerHTML;
    for(i=1;i<slides.length;i++){
  console.log((i-1),i);
    slides[i-1].innerHTML = slides[i].innerHTML;
  }
  slides[slides.length-1].innerHTML = zeroData;
}

Demo: https://jsfiddle.net/24Lxekb5/6/

edited Sep 11, 2020 at 11:08

answered Sep 11, 2020 at 11:02

Shubham Srivastava

1,8951 gold badge11 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

About a div in css and Button function

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related