CODEWITHSUNDEEP
javascriptjquerycssslick.js
Corey Bush
Corey Bush

Reputation: 183

Slick slider image not centering correctly on load

I'm having an issue with my slick slider not showing the full first slide on load. Upon opening the content div by clicking the box title, the first slide is cut off and only about 1/3rd of it gets shown. It corrects itself after clicking the "next" button once or twice.

I'm guessing this has something to do with my jQuery function that shows/hides the content div... But I can't figure out what's going on.

Any help?

https://codepen.io/Finches/pen/jYwdKJ

// Show/hide content from clicking box title
$('.track-box-title').click(function() {

  //Get height of content
  var height = $(this).parent('.track-box').parent('.track-box-container').find('.track-content').height() + 250;

  //Convert height to string
  var heightStr = height.toString();

  //Toggle height and content box display
  if ($(this).parent('.track-box').parent('.track-box-container').height() == 200) {
      $(this).parent('.track-box').parent('.track-box-container').animate({height: heightStr});
      $(this).parent('.track-box').parent('.track-box-container').find('.track-content').show();
    }
    else if ($(this).parent('.track-box').parent('.track-box-container').height() == heightStr) {
      $(this).parent('.track-box').parent('.track-box-container').find('.track-content').hide();
      $(this).parent('.track-box').parent('.track-box-container').animate({height: "200px"});
    }

});

//Slick slider
$('.project-image-slider').slick({
  prevArrow: false
});

Upvotes: 0

Views: 2262

Answers (1)

zagzter
zagzter

Reputation: 327

Try giving your .slick-track a float.

.slick-track {
    position: relative;
    top: 0;
    left: 0;
    display: block;
    margin-left: auto;
    margin-right: auto;
    float: left;
}

Check the pen.

Upvotes: 2

Related Questions