CODEWITHSUNDEEP
javascriptjqueryhtmlcss
rio
rio

Reputation: 807

change fadeIn to slide using jquery

I've created a slider for my web. Right now the slider works with fadeIn method. I want to change the fade effect to slide to the left-right. how is that possible?

my code:

$(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);
}

I tried using the slideToggle, slideUp,slideDown but that did not work for me.

thanks for any help!

Upvotes: 0

Views: 63

Answers (1)

Peter McLaughlin
Peter McLaughlin

Reputation: 31

It doesn't work, because your li element has a min-height. Remove that, and you should be fine.

Upvotes: 1

Related Questions