Question

当我点击上一个或下一个按钮时，我想滑动我的bx-content（div）。当隐藏其他内容时，我有3个内容可见。我有超过10个bx内容（div），如果点击上一个或下一个按钮然后我想逐个滑动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; }

Answer 1

你必须在jquery中获取你的按钮并在click事件之后添加一个监听器，然后选择你的容器并使用transform：translateX css属性更改play。

类似的东西：

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)'}
   }
);

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

和btw将您的代码放在脚本标记

中

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

1 个答案: