Question

当我单击任何具有以下内容的项目时如何将下一个项目推向右侧

滑块项目类？

我使用 transform：trnslateX （）但它不会推送并放入下一个

项目！并且不能使用边距和填充 ...

如果您有其他方法，请帮助我谢谢

<div class=" col-12 slider-holder d-flex flex-nowrap flex-row justify-content-between">


  <div class="item-holder col mx-auto overflow d-flex flex-row flex-nowrap justify-content-between ">
    <!--Slider Item-->
    <div class="slider-item">
      <figure>
        <img src="css/img/keshmesh.png" alt="asda">
      </figure>
    </div>
    <!--Slider Item-->


    <!--Slider Item-->
    <div class="slider-item">
      <figure>
        <img src="css/img/keshmesh.png" alt="asda">
      </figure>
    </div>
    <!--Slider Item-->



    <!--Slider Item-->
    <div class="slider-item">
      <figure>
        <img src="css/img/keshmesh.png" alt="asda">
      </figure>
    </div>
    <!--Slider Item-->



    <!--Slider Item-->
    <div class="slider-item">
      <figure>
        <img src="css/img/keshmesh.png" alt="asda">
      </figure>
    </div>
    <!--Slider Item-->




    <!--Slider Item-->
    <div class="slider-item">
      <figure>
        <img src="css/img/keshmesh.png" alt="asda">
      </figure>
    </div>
    <!--Slider Item-->
  </div>


</div>

Answer 1

通常使用以下事件监听器通过javascript来监听点击：

myElement.addEventListener('click', myFunction, false);

相反，如果您想通过CSS收听点击，则可以通过添加

来实现

tabindex="0"

到元素的标记（以创建元素focusable），然后使用

描述元素的表示形式

:focus

伪类。

工作示例：

.slider-item {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 136px;
  height: 136px;
  padding: 12px;
  color: rgb(255, 255, 255);
  text-align: center;
  font-weight: bold;
  font-size: 16px;
  line-height: 24px;
  background-color: rgb(255, 0, 0);
  cursor: pointer;
  transform: translateX(0);
  transition: transform 1s ease-in-out;
}

.slider-item:focus {

  transform: translateX(200px);
}

<div tabindex="0" class="slider-item">
Click me and<br />I will slide to the right
</div>

推动下一项前进

1 个答案: