时间戳

首页 > 解决方案 > 通过拖动水平滚动卡片列表

javascript - 通过拖动水平滚动卡片列表

问题描述

我正在使用引导 css html 和 js 制作一个网站，但我不知道如何制作它，以便产品卡片横向移动而无需使用滚动条，只需单击并拖动

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
        <h1 class="mt-5">Bootstrap 4 Horizontal Scrolling</h1>
        <p class="subtitle">Horizontal scrolling without CSS. Just copy scrolling wrapper classes</p>
        <div class="scrolling-wrapper row flex-row flex-nowrap mt-4 pb-4 pt-2">
            <div class="col-sm-5 col-md-4 col-large-3">
                <div class="card card-block card-1">
                    <div class="card">
                        <img class="card-img-top" src="https://picsum.photos/200/150" alt="Card image">
                        <div class="card-body">
                            <h4 class="card-title">John Doe</h4>
                            <p class="card-text">Some example text.</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-5 col-md-4 col-large-3">
                <div class="card card-block card-1">
                    <div class="card">
                        <img class="card-img-top" src="https://picsum.photos/200/150" alt="Card image">
                        <div class="card-body">
                            <h4 class="card-title">John Doe</h4>
                            <p class="card-text">Some example text.</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-5 col-md-4 col-large-3">
                <div class="card card-block card-1">
                    <div class="card">
                        <img class="card-img-top" src="https://picsum.photos/200/150" alt="Card image">
                        <div class="card-body">
                            <h4 class="card-title">John Doe</h4>
                            <p class="card-text">Some example text.</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-5 col-md-4 col-large-3">
                <div class="card card-block card-1">
                    <div class="card">
                        <img class="card-img-top" src="https://picsum.photos/200/150" alt="Card image">
                        <div class="card-body">
                            <h4 class="card-title">John Doe</h4>
                            <p class="card-text">Some example text.</p>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

我不介意它是 js bootstrap 还是任何我刚接触编码的东西

标签： javascripthtmlcssbootstrap-4

解决方案

它由 bootstrap 4 和一些看起来更有吸引力的自定义样式和包含鼠标事件的 JavaScript 组成

单击并拖动带有卡片的轮播

const slider = document.querySelector('.items');
  let isDown = false;
  let startX;
  let scrollLeft;

  slider.addEventListener('mousedown', (e) => {
    isDown = true;
    slider.classList.add('active');
    startX = e.pageX - slider.offsetLeft;
    scrollLeft = slider.scrollLeft;
  });

  slider.addEventListener('mouseleave', () => {
    isDown = false;
    slider.classList.remove('active');
  });

  slider.addEventListener('mouseup', () => {
    isDown = false;
    slider.classList.remove('active');
  });

  slider.addEventListener('mousemove', (e) => {
    if (!isDown) return;  // stop the fn from running
    e.preventDefault();
    const x = e.pageX - slider.offsetLeft;
    const walk = (x - startX) * 3;
    slider.scrollLeft = scrollLeft - walk;
  });
.items{
  overflow: hidden;
  user-select: none;
  cursor: pointer;
  transition: all 0.2s;
  transform: scale(0.98);
  will-change: transform;
  position: relative;
}

.items.active {
  cursor: grabbing;
  cursor: -webkit-grabbing;
  transform: scale(1);
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="container-fluid">
    <h1 class="mt-5">Bootstrap 4 Horizontal Scrolling</h1>
    <p class="subtitle">Horizontal scrolling without CSS. Just copy scrolling wrapper classes</p>
    <div class="items scrolling-wrapper row flex-row flex-nowrap mt-4 pb-4 pt-2">
        <div class="item col-sm-5 col-md-4 col-large-3">
            <div class="card card-block card-1">
                <div class="card">
                    <img class="card-img-top" src="https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_S%C3%A3o_Paulo_Zoo.jpg" alt="Card image">
                    <div class="card-body">
                        <h4 class="card-title">John Doe</h4>
                        <p class="card-text">Some example text.</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="item col-sm-5 col-md-4 col-large-3">
            <div class="card card-block card-1">
                <div class="card">
                    <img class="card-img-top" src="https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_S%C3%A3o_Paulo_Zoo.jpg" alt="Card image">
                    <div class="card-body">
                        <h4 class="card-title">John Doe</h4>
                        <p class="card-text">Some example text.</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="item col-sm-5 col-md-4 col-large-3">
            <div class="card card-block card-1">
                <div class="card">
                    <img class="card-img-top" src="https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_S%C3%A3o_Paulo_Zoo.jpg" alt="Card image">
                    <div class="card-body">
                        <h4 class="card-title">John Doe</h4>
                        <p class="card-text">Some example text.</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="item col-sm-5 col-md-4 col-large-3">
            <div class="card card-block card-1">
                <div class="card">
                    <img class="card-img-top" src="https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_S%C3%A3o_Paulo_Zoo.jpg" alt="Card image">
                    <div class="card-body">
                        <h4 class="card-title">John Doe</h4>
                        <p class="card-text">Some example text.</p>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

我希望我明白你的意思并正确回答。如果没有请在评论中提及

推荐阅读