How to move carousel arrows further apart?

user_16017912 0
Viewed 220

I am a beginner and want to ask how do I move the arrows further apart from the text? Like the left arrow more to the left and the right arrow more to the right? When on full desktop view I want the arrow to be further away from the middle and stay in that position when on response mode. It seems like whatever I do it doesn't work, padding, margin etc.

let sliderImages = document.querySelectorAll(".slide"),
  arrowLeft = document.querySelector("#arrow-left"),
  arrowRight = document.querySelector("#arrow-right"),
  current = 0;

//Clear all images
function reset() {
  for (let i = 0; i < sliderImages.length; i++) {
    sliderImages[i].style.display = "none";
  }
}
// initialize slider
function startSlide() {
  reset();
  sliderImages[0].style.display = "block";
}

//show previous
function slideLeft() {
  reset();
  sliderImages[current - 1].style.display = "block";
  current--;
}

//show next
function slideRight() {
  reset();
  sliderImages[current + 1].style.display = "block";
  current++;
}

//left arrow click
arrowLeft.addEventListener("click", function () {
  if (current === 0) {
    current = sliderImages.length;
  }
  slideLeft();
});

//right arrow click
arrowRight.addEventListener("click", function () {
  if (current === sliderImages.length - 1) {
    current = -1;
  }
  slideRight();
});

startSlide();
#slider,
.wrap,
.slide-content {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

.wrap {
  position: relative;
}

.slide-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.arrow {
  cursor: pointer;
  position: absolute;
  top: 46%;
  width: 0;
  height: 0;
  border-style: solid;
  z-index: 1;
}
#arrow-left {
  border-width: 30px 40px 30px 0;
  border-color: transparent #cccccc transparent transparent;
  left: 0;
}

#arrow-right {
  border-width: 30px 0px 30px 40px;
  border-color: transparent transparent transparent #cccccc;
  right: 0;
}

/* Caption text */
.text {
  position: relative;
  color: #212529;
  font-size: 18px;
  top: 28px;
  width: 100%;
  text-align: center;
  font-family: "Roboto Condensed", sans-serif;
  font-weight: 400;
}
<main class="main">

  <div class="wrap">
    <div id="arrow-left" class="arrow"></div>
    <div id="arrow-right" class="arrow"></div>
    <div id="slider">
      <div class="slide slide1">
        <div class="slide-content">

          <div id="container">
            <img class="background-image" src="image1" alt="">
          </div>
          <div class="text">image1</div>
        </div>
      </div>

      <div class="slide slide1">
        <div class="slide-content">
          <div id="container">
            <img class="background-image" src="image2" alt="">
          </div>
          <div class="text">image2</div>
        </div>
      </div>

    </div>

  </div>

</main>

css html javascript
3 Answers

Change the max-width: 1000px; to max-width: 100%;

Currently the width of your slider is at 1000 pixels. If you change it or remove it, then the slider will take up the space and do 100% instead of 1000 pixels

That means, change this:

#slider,
.wrap,
.slide-content {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

to this:

#slider,
.wrap,
.slide-content {
  max-width: 100%;
  position: relative;
  margin: auto;
}
user_143602270

Remove max-width from wrap, .slide-content and #slider

let sliderImages = document.querySelectorAll(".slide"),
  arrowLeft = document.querySelector("#arrow-left"),
  arrowRight = document.querySelector("#arrow-right"),
  current = 0;

//Clear all images
function reset() {
  for (let i = 0; i < sliderImages.length; i++) {
    sliderImages[i].style.display = "none";
  }
}
// initialize slider
function startSlide() {
  reset();
  sliderImages[0].style.display = "block";
}

//show previous
function slideLeft() {
  reset();
  sliderImages[current - 1].style.display = "block";
  current--;
}

//show next
function slideRight() {
  reset();
  sliderImages[current + 1].style.display = "block";
  current++;
}

//left arrow click
arrowLeft.addEventListener("click", function () {
  if (current === 0) {
    current = sliderImages.length;
  }
  slideLeft();
});

//right arrow click
arrowRight.addEventListener("click", function () {
  if (current === sliderImages.length - 1) {
    current = -1;
  }
  slideRight();
});

startSlide();
#slider,
.wrap,
.slide-content {
  position: relative;
  margin: auto;
}

.wrap {
  position: relative;
}

.slide-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.arrow {
  cursor: pointer;
  position: absolute;
  top: 46%;
  width: 0;
  height: 0;
  border-style: solid;
  z-index: 1;
}
#arrow-left {
  border-width: 30px 40px 30px 0;
  border-color: transparent #cccccc transparent transparent;
  left: 0;
}

#arrow-right {
  border-width: 30px 0px 30px 40px;
  border-color: transparent transparent transparent #cccccc;
  right: 0;
}

/* Caption text */
.text {
  position: relative;
  color: #212529;
  font-size: 18px;
  top: 28px;
  width: 100%;
  text-align: center;
  font-family: "Roboto Condensed", sans-serif;
  font-weight: 400;
}
<main class="main">

  <div class="wrap">
    <div id="arrow-left" class="arrow"></div>
    <div id="arrow-right" class="arrow"></div>
    <div id="slider">
      <div class="slide slide1">
        <div class="slide-content">

          <div id="container">
            <img class="background-image" src="image1" alt="">
          </div>
          <div class="text">image1</div>
        </div>
      </div>

      <div class="slide slide1">
        <div class="slide-content">
          <div id="container">
            <img class="background-image" src="image2" alt="">
          </div>
          <div class="text">image2</div>
        </div>
      </div>

    </div>

  </div>

</main>

user_141701110

Remove max-width: 1000px from #slider, .wrap, .slide-content.

#slider,
.wrap,
.slide-content {
  position: relative;
  margin: auto;
}

Then the arrows will always be at the side of the page, no matter how wide it is - And therefore as far away from the text/image as possible.

user_106863770
Related