Slick + window offsets

JavaScript
1

http: // tai pei . fin a l sit e .com

The blue news/calendar section. I’m using slick and offsetting it to only have a left margin if the window is bigger than 1180px. That’s great so far. I have everything but 1200px + view. I’m having trouble figuring out what math to use for the slick slider offset.

$(window).on("load resize",function() {
    var newsWidth;
    var eventWidth;
    console.log($(window).width() + " winowwidth");
    if($(window).width() >= 1200)  {
      eventWidth = ($(window).width() - 1180) - $(".featured-calendar .events-holder .slick-track > .fsElement").width() / 2 + 17;
      newsWidth = ($(window).width() - 1180) - $(".featured-news .fsNews article").width() / 2 + 17;
    }
    else {
      eventWidth = $(".featured-calendar .events-holder .slick-track > .fsElement").width() / 2 + 55;
      newsWidth = $(".featured-news .fsNews article").width() / 2 + 55;
    }
    console.log(eventWidth + "eventwidth");
    console.log(newsWidth + "newswidth");
    function changeTrack(obj, value) {
      obj.css("left", "-"+value+"px");
    }
    if($(window).width() >= 700) {
      var checkNewsTrack = setInterval(function() {
        if($(".featured-news .fsNews .slick-track").length) {
          clearInterval(checkNewsTrack);
          changeTrack($(".featured-news .fsNews .slick-track"),newsWidth);
        }
      },200);
      var checkCalendarTrack = setInterval(function() {
        if($(".featured-calendar .events-holder .slick-track>.fsElement").length) {
          clearInterval(checkCalendarTrack);
          changeTrack($(".featured-calendar .events-holder .slick-track"),eventWidth);
        }
      },200);
    }
  });

If you start around 1200px and increase the viewport, you’ll start to see the slides start to get wacky. So I need the left on .slick-track{} updated, but I don’t know how to go about doing this. Can anyone offer insight?

2

I noticed the translateZ on .slick-track seems to be connected to the width of the element (from offset to the right edge of the viewport) so I need to basically offset that translate with my left:; offset, to give people a hint on the kind of math I need.

var static = 20;
    if($(window).width() >= 1200)  {
      newsWidth = (1200 - $(window).width()) / 3 + static;
    }

It’s getting close, but I’m still missing something.

3

/ 4…

</thread>

4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.