如何在jquery中一一单击按钮（上一个/下一个）或箭头滑动我的内容？答案

【问题标题】：how to slide my content one by one clicking button(prev/next) or arrow in jquery?如何在jquery中一一单击按钮（上一个/下一个）或箭头滑动我的内容？
【发布时间】：2018-03-30 20:48:12
【问题描述】：

当我单击上一个或下一个按钮时，我想滑动我的 bx-content(div)。当其他内容被隐藏时，我有 3 个内容可见。我有超过 10 个 bx-content(div)，如果单击 prev 或 next 按钮，那么我想一个接一个地滑动 bx-content(div)，如果所有内容都完成并单击下一个按钮，然后再次从头开始显示像循环。有人可以帮我吗？我的html代码在这里

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="style.css">

</head>
<body>
    <section class="bx-feature">
    <h3>Feature</h3>
    <button class="next">Next</button>
    <button class="previous">Prev</button>
    <hr style="clear: both;">
    <div class="bx-slider">
        <div class="bx-content">
            <img src="https://media-cdn.tripadvisor.com/media/photo-s/0c/f0/1e/2d/mt-everest-base-camp.jpg" alt="">
            <h3>Mount Everest</h3>
        </div>
        <div class="bx-content">
            <img src="https://www.wallpaperup.com/uploads/wallpapers/2013/03/23/58533/a2e7390e04f5ed3b6bba3576f75436bb.jpg" alt="">
            <h3>Mount Everest sunset</h3>
        </div>
        <div class="bx-content">
            <img src="https://media-cdn.tripadvisor.com/media/photo-s/0c/f0/1e/2d/mt-everest-base-camp.jpg" alt="">
            <h3>Mount Everest</h3>
        </div>
        <div class="bx-content">
            <img src="https://media-cdn.tripadvisor.com/media/photo-s/0c/f0/1e/2d/mt-everest-base-camp.jpg" alt="">
            <h3>Mount Everest</h3>
        </div>
        <div class="bx-content">
            <img src="https://media-cdn.tripadvisor.com/media/photo-s/0c/f0/1e/2d/mt-everest-base-camp.jpg" alt="">
            <h3>Mount Everest</h3>
        </div>
    </div>
</section>

我的css代码在这里

.bx-feature{ background-color: #e9e9e9; height: 360px; width: 90%; overflow: 
  hidden; margin: auto; margin-top: 100px;}
    .bx-feature h3{ float: left; }
    button{ float: right; border-radius: 5px; padding: 7px; margin: 10px 5px 
    0 5px; }
    .bx-slider{ margin: 10px 20px; }
    .bx-content{ height: 250px; width: 320px; overflow: hidden; float: left; 
   margin: 20px;}
    .bx-content img{ width: 100%; height: 200px; }

【问题讨论】：

你正在使用 bx-slider 插件..？
我现在没有使用任何插件。我只是想通过 jquery 实现它
你用 jQuery 试过什么......？
不，因为我对 jquery 了解不多。
试试这个How to build simple jQuery image slider with sliding or opacity effect?

标签： javascript jquery html css

【解决方案1】：

您必须在 jquery 中获取您的按钮并在单击事件上添加一个侦听器，然后只需选择您的容器并使用转换更改播放：translateX css 属性。

类似的东西：

var width = $(".bx-slider").width();
var numberChild = $(".bx-slider").children().length;
var move = width / numberChild;
var position = 0;
$(".next").click(
   () => {
      position -= move;
      $(".bx-slider").css({'transform' : 'translateX(' + position + 'px)'}
   }
);

只需将减号更改为上一个按钮的总和

顺便说一句，把你的代码放在脚本标签中

【讨论】：

感谢您的回答，但它没有显示剩余内容，并且如果完成所有内容并接下来被点击，那么我想获得像循环这样的开始内容。我可以这样做吗？
我觉得还是先学js和jquery比较好。因为 ofc 我可以编写您想要的行为，但您以后无法更改。
感谢您的建议。现在我要使用插件了。