时间戳

首页 > 解决方案 > 轮播右键单击按钮无法正常工作

javascript - 轮播右键单击按钮无法正常工作

问题描述

当我单击左键时，我有一个典型的轮播，如果 marginLeft 为 0，它不会滑动，但我不知道当我单击右键时为滑块设置什么限制值。

我尝试计算图像宽度和它们之间的边距空间以设置右侧按钮的限制值，因此滑块不会滑过它，但如果您在另一台设备上看到它，那将不起作用，因为它的宽度更高。

代码笔： https ://codepen.io/anon/pen/bXBaYW ?editors=1010

// caoursel
const carousel = document.getElementById('carousel');
const leftArrow = carousel.querySelector('.carousel-left-arrow');
const rightArrow = carousel.querySelector('.carousel-right-arrow');
const slides = carousel.querySelector('.slides');
const slideImgs = carousel.querySelectorAll('.slide img');

let marginLeft = 0;

// works fine
function scrollLeft() {
  if (getComputedStyle(slides).marginLeft >= '0px') return;
  marginLeft += 310;
  slides.style.marginLeft = marginLeft + "px";
}

// need to set right slide a limited value.
function scrollRight() {
  if (getComputedStyle(slides).marginLeft <= '-1240px') return; //  dont scroll past this value
  marginLeft -= 310;
  slides.style.marginLeft = marginLeft + "px";
}

leftArrow.addEventListener('click', scrollLeft);
rightArrow.addEventListener('click', scrollRight);

当我到达最后一张图片时，我希望滑块停止滑动。

标签： javascriptcarousel

解决方案

What you need to do is to not hardcode the width of the .slides container in CSS and JS. Thus allowing you to dynamically compute the width of the .slides container, and the remaining space you can scroll/slide.

Below is an illustration of the variable and their values in relation to the whole component.

remainingSpaceToScroll will tell you how much space you have on the right, so you can not exceed the limit. The value of it can be found with simple math, by subtracting the sum of parentWidth and currentScroll from the value in scrollWidth.

enter image description here

Here is the code from your example updated so you can inspect. I've removed the space between the slides for the simplicity sake.

https://codepen.io/anon/pen/BXpaNv

const carousel = document.getElementById("carousel");
const leftArrow = carousel.querySelector(".carousel-left-arrow");
const rightArrow = carousel.querySelector(".carousel-right-arrow");
const slides = carousel.querySelector(".slides");
const slideImgs = carousel.querySelectorAll(".slide img");

let marginLeft = 0;
let carouselImageWidth = 300;

function scrollLeft() {
  let parentWidth = carousel.offsetWidth;
  let scrollWidth = parseInt(getComputedStyle(slides).width, 10);
  let currentScroll = Math.abs(
    parseInt(getComputedStyle(slides).marginLeft, 10)
  );
  let remainingSpaceToScroll = currentScroll;

  if (remainingSpaceToScroll <= 0) {
    return;
  } else if (remainingSpaceToScroll >= carouselImageWidth) {
    marginLeft = -(currentScroll - carouselImageWidth);
  } else {
    marginLeft = -(currentScroll - remainingSpaceToScroll);
  }

  slides.style.marginLeft = marginLeft + "px";
}

function scrollRight() {
  let parentWidth = carousel.offsetWidth;
  let scrollWidth = parseInt(getComputedStyle(slides).width, 10);
  let currentScroll = Math.abs(
    parseInt(getComputedStyle(slides).marginLeft, 10)
  );
  let remainingSpaceToScroll = scrollWidth - (parentWidth + currentScroll);

  if (remainingSpaceToScroll <= 0) {
    return;
  } else if (remainingSpaceToScroll >= carouselImageWidth) {
    marginLeft = -(currentScroll + carouselImageWidth);
  } else {
    marginLeft = -(currentScroll + remainingSpaceToScroll);
  }

  slides.style.marginLeft = marginLeft + "px";
}

leftArrow.addEventListener("click", scrollLeft);
rightArrow.addEventListener("click", scrollRight);

HTML below:

<p>click right arrow till end</p>

<div id="carousel">
        <span class="carousel-left-arrow arrow">&lt;</span>
        <ul class="slides">
            <li class="slide">
      <a href="#">
                <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
            </a>
      </li>
      <li class="slide">
      <a href="#">
                <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
            </a>
      </li>
      <li class="slide">
      <a href="#">
                <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
            </a>
      </li>
      <li class="slide">
      <a href="#">
                <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
            </a>
      </li>
      <li class="slide">
      <a href="#">
                <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
            </a>
      </li>
      <li class="slide">
      <a href="#">
                <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
            </a>
      </li>
      <li class="slide">
      <a href="#">
                <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
            </a>
      </li>
      <li class="slide">
      <a href="#">
                <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
            </a>
      </li>
      <li class="slide">
      <a href="#">
                <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
            </a>
      </li>
      <li class="slide">
      <a href="#">
                <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
            </a>
      </li>
      <li class="slide">
      <a href="#">
                <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
            </a>
      </li>
      <li class="slide">
      <a href="#">
                <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
            </a>
      </li>
      <li class="slide">
      <a href="#">
                <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
            </a>
      </li>
        </ul>
        <span class="carousel-right-arrow arrow">&gt;</span>
    </div>

CSS below:

#carousel {
  width: 90%;
  margin: 0 auto;
  margin-top: 20px;
  overflow: hidden;
  position: relative;
  height: 122px;
}

#carousel .arrow {
  position: absolute;
  top: 32%;
  background-color: rgba(255, 255, 255, 0.7);
  border: 1px solid #000;
  border-radius: 0%;
  cursor: pointer;
  width: 20px;
  z-index: 1;
}

#carousel .arrow img {
  margin-top: 10px;
  max-width: 100%;
}

#carousel .carousel-left-arrow {
  width: 25px;
  left: 0;
  margin-left: 5px;
}
#carousel .carousel-right-arrow {
  right: 0;
  width: 25px;
}

#carousel .slides {
  overflow: hidden;
  list-style: none;
  padding: 0;
  transition: 0.2s;
  margin-left: 0;
  margin-right: 0;
  border: 1px solid red;
  height: 120px;
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
  display: flex;
}
#carousel .slide {
  float: left;
  margin: 0;
  text-decoration: none;
  color: whitesmoke;
}

#carousel .slide > a {
  display: block;
}
#carousel .slides img {
  width: 300px;
  display: block;
}

推荐阅读