Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Changing Property based on width of page #549

Closed
ecurtis opened this Issue · 6 comments

2 participants

@ecurtis

I would like to change the flexslider direction property from horizontal to vertical based on the window size.

Question based on this example.
http://flexslider.woothemes.com/dynamic-carousel-min-max.html

@ecurtis

Here is what I am trying to get working. The direction is set properly but it does not update on resize.

(function() {
// store the slider in a local variable
    var $window = $(window),flexslider;

// tiny helper function to add breakpoints
function getSliderDirection() {
    return (window.innerWidth < 768) ? "vertical" : "horizontal";
}

$window.load(function() {
    $('#mainNav').flexslider({
        animation: "slide",
        animationLoop: false,
        slideshow: false,
        controlNav: false,
        directionNav: true,
        reverse:true,
        direction: getSliderDirection()
    });
});

// check slider direction on resize event
$(window).resize(function() {
    var sliderDirection = getSliderDirection();
    flexslider.vars.direction = sliderDirection;
    flexslider.vars.direction = sliderDirection;
});
}());
@mattyza
Owner

Hi Eric,

Replacing "flexslider.vars" with "$('#mainNav').vars" should provide the desired result, as "$('#mainNav')" should contain a FlexSlider object.

I hope this helps. :)

@ecurtis

Thanks mattyza. Once I clarified that the working version is in the development branch I got a little more success. This actually works for getting to the flexslider object, however it only dynamically changes the min and max items. It seems like it is just not coded to dynamically change the direction of the slider.

If there were a way to reset and kickstart the flexslider once a user crosses the 768px barrier that would be great in my case (no need to maintain the slide the user is on).

Alas I might have to just make two sliders and show/hide them based on the user screen size.

    (function() {

      // store the slider in a local variable
      var $window = $(window),
          flexslider;

      // tiny helper function to add breakpoints
      function getGridSize() {
        return (window.innerWidth < 600) ? 2 :
               (window.innerWidth < 900) ? 3 : 4;
      }

            // tiny helper function to add breakpoints
            function getSliderDirection() {
                return (window.innerWidth < 768) ? "vertical" : "horizontal";
            }

      $window.load(function() {
        $('.flexslider').flexslider({
          animation: "slide",
          animationSpeed: 400,
          animationLoop: false,
          itemWidth: 210,
          direction:getSliderDirection(),
          itemMargin: 5,
          minItems: getGridSize(), // use function to pull in initial value
          maxItems: getGridSize(), // use function to pull in initial value
          start: function(slider){
            $('body').removeClass('loading');
            flexslider = slider;
          }
        });
      });

      // check grid size on resize event
      $window.resize(function() {
        var gridSize = getGridSize();
        var flowDir = getSliderDirection();
                flexslider.vars.direction = flowDir;
        flexslider.vars.minItems = gridSize;
        flexslider.vars.maxItems = gridSize;
      });
    }());
@mattyza
Owner

Hi Eric,

Personally, I'd suggest leaving this logic to work only on window.load. I don't know anyone who resizes their browser window up and down, except for web designers. :)

In most general use cases, the end user would load the website at the size they intend to view it in their browser (on a mobile device or a pre-sized desktop screen window, for example).

If the resize event action is mandatory in the case of the project in question, you could try two sliders, although this may create extra delays at load time.

Short of that, you could run flexslider.init() to re-initialise the FlexSlider instance as needed, although I'd recommend running this only when the resizing stops, as the resize() event fires every second that the window is in "drag" mode, regardless of whether the window is actually being scaled or not.

Unfortunately, there is currently no resize stop event, which would mean you'd need to add a trigger for that. There should be a few articles on Stack Overflow about this (I don't have a go-to article on that topic, unfortunately).

I hope this helps, Eric. :)

@ecurtis

Thanks. Yes I agree that web developers are the main culprit in this. The reason I am looking to do this however is the design I have been given to code is responsive with the slider and controls changing from the mobile layout to the desktop layout.

Thank you for the direction to explore.

@mattyza
Owner

No problem, Eric. I hope this helps. :)

@mattyza mattyza closed this
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.