Transition slide to the left

Question

I am creating a slideshow where the first item grows bigger as you click between slides. This works fine. However I am not able to add a nice smooth transition to the left when you click through the slideshow. What am I doing wrong? I tried using jquery animate and also css transitions. Nothing happens.

https://codepen.io/camwes89/pen/mdJQLra

var slider = $(".grow-carousel"),
  item_width = slider.parent().outerWidth();

// Adjust the slider when/if the window gets resized
$(window).on("resize", adjust);
adjust();

if (slider.children("li").length > 1) {
  // Add previous/next buttons
  slider
    .parent()
    .append(
      'PreviousNext'
    );

  // Handle clicks on the next button
  slider.parent().on("click", "a#btn-prev", function(e) {
    e.preventDefault();
    $(".grow-carousel li").removeClass("active");
    slider.children("li:last").prependTo(slider);
    slider.css("left", -item_width);
    slider.animate({
        left: 0
      },
      300,
      "swing"
    );

    slider.find("li").first().addClass("active");
  });

  // Handle clicks on the previous button
  slider.parent().on("click", "a#btn-next", function(e) {
    e.preventDefault();
    $(".grow-carousel li").removeClass("active");
    slider.animate({
        left: -item_width
      },
      300,
      "swing",
      function() {
        slider.children("li:first").appendTo(slider);
        slider.css("left", 0);
        slider.find("li").first().addClass("active");
      }
    );
  });
}

// Helpers
function adjust() {
  item_width = slider.parent().outerWidth();
  slider
    .children("li")
    .width(item_width)
    .parent()
    .width(item_width * slider.children("li").length);
}

.container {
  width: 600px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 400x;
}

ul {
  padding: 0;
  margin: 0;
  list-style: none;
  transition: all 3s ease;
  overflow: hidden;
  position: relative;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  height: 100%;
  transition: all 0.3s ease-in;
  li {
    position: relative;
    font-size: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    text-align: center;
    margin: 10px;
    padding: 20px;
    background: #333;
    height: 260px;
    width: 160px !important;
    transition: all 0.3s ease-in;
    transition-delay: 250ms;
    overflow: hidden;
    display: inline;
    float: left;
    img {
      height: 100%;
      width: auto;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    &.active {
      height: 300px;
    }
  }
}

#btn-next {
  position: relative;
  top: -29px;
  margin-left: 101px;
  background: #ccc;
  padding: 2px 3px;
}

#btn-prev {
  position: relative;
  top: -29px;
  margin-left: 10px;
  background: #ccc;
  padding: 2px 3px;
}

user_2642101 · Answer

From what I understand, you have a 'not really working' animation when clicking on Previous or Next button. The rendering effect is a jump in the animation... right?

You main problem is a conflict beetween CSS animation & JQUERY animation

It seems you want to rule all by JS (with jQuery) because you need to move the last or first image of your slideshow before or after the animation. The used property for animation is left, which is animated or simply set.

So far, so good.... BUT, you have side effects because this left property is also animated with CSS (3 second duration). Each time you are touching left property with JS, it lasts 3 second, so all your JS concept / animation is ruined.

You just need to

Comment the CSS animation for your ul element
Increase you animation duration from 100ms to 2s for instance

Keep in mind you should not mix CSS animation and JQUERY animation on same properties unless you really know what you are doing

Something that works for me with these 2 updates https://jsfiddle.net/piiantom/a79b2gn4/11/

PS: Beware of your comments which are reversed compared to the applied dedicated code on Prev / Next buttons

Transition slide to the left

1 Answers