Question

我已经为我的网站创建了一个滑块。现在，滑块可以使用fadeIn方法。我想更改淡入淡出效果以左右滑动。那怎么可能？

我的代码：

$(document).ready(function() {
  var items = $('.slider ul li').length;
  for (let i = 0; i < items; i++) {
    $('.pagination').append('<li><span class="fas fa-circle"></span></li>');
  }
  $('.slider ul li').hide();
  $('.slider ul li:first').show();
  $('.pagination li').click(pagination);
  function pagination() {
    var position = $(this).index() + 1;
    $('.slider ul li').hide();
    $('.slider ul li:nth-child(' + position + ')').fadeIn(); --> THIS LINE
  }
});

html：

<div class="slider">
        <div class="left"> </div>
        <ul>
          <li>
            1
          </li>
          <li>
            2
          </li>
          <li>
            3
          </li>
          <li>
            4
          </li>
        </ul>
        <div class="right"></div>
        <ol class="pagination">
        </ol>
      </div>
      </div>

css：

.slider {
  flex-wrap: wrap;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.slider ul {
  flex-grow: 10;
  justify-content: center;
  align-items: center;
}

.slider ul li {
  font-size: 100px;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 200px;
  position: relative;
}

.slider ul li:nth-child(odd) {
  background-color: rgb(46, 46, 46);
}

我尝试使用slideToggle，slideUp，slideDown，但这对我不起作用。

感谢您的帮助！

Answer 1

它不起作用，因为您的li元素有一个min-height。删除它，就可以了。

更改fadeIn以使用jQuery滑动

1 个答案: