2

I have a webpage that is leveraging a jQuery Carousel Slide Functionality. When a new Question slide is loaded the page shifts (left and right) for a few quick seconds and then settles. All content is dynamically generated. I am seeing this on IE 11 and the most recent version of Microsoft Edge. And it is ever so slight on Chrome and Firefox. I have fiddled with setting height and width to 100% and adjusting overflow. However the issue still persists.

Here is a link to a mocked up version of my site, as the visual will help best convey the issue I am seeing - https://pub.s7.exacttarget.com/c1i011a1jlr. This issue is occurring on Slides 2 and 3.

Thank you,

Allison

tao
  • 82,996
  • 16
  • 114
  • 150
user3788942
  • 83
  • 2
  • 3
  • 8
  • You should add your relevant code to your question or setup a fiddle/codepen with the basics of your carousel, that would help. – lscmaro Aug 03 '18 at 02:08

1 Answers1

1
$('#PGECarousel').on('slide.bs.carousel', function(e) {
  if (e.from < 2) {
    $('.carousel-item').addClass('noAnim');
  }
}).on('slid.bs.carousel', function(e) {
  $('.carousel-item').removeClass('noAnim');
})

will, most likely, fix your issue. You also need this in CSS:

.carousel-item.noAnim {
  transition-duration: 0s;
}

On the side, I'd also add these to your styles:

h2:focus {
  border: none;
  padding: 0;
}
.slide-container {
  min-height: 383px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
.carousel-item {
   transition-timing-function: cubic-bezier(.5,0,.2,1);
}
@media (max-width: 767px) {
  .slide-container {
      min-height: 0;
  }
}

Bluntly put, you shouldn't use Bootstrap carousel. Any popular one out there requires a lot less and delivers a lot more (Slick, Flexslider, Owl).

As for the extra CSS, I'd say the padding:0 on h2:focus is a must, the rest are more or less details.

Note: I haven't tested it on IE or Edge (I don't have them on this system), but the above disables CSS transition for the slides that caused the trembling.

tao
  • 82,996
  • 16
  • 114
  • 150
  • Andrei - Thank you!!! This did the trick! I am not a fan of Bootstrap and unfortunately inherited this. Thank you for the recommendations for better options for carousels. – user3788942 Aug 03 '18 at 04:09
  • If it did the trick, consider marking it as accepted answer, so new users see it works from opening the page, without having to read it, test it or read its comments. – tao Aug 03 '18 at 12:29