Hi

With minItems and maxItems, one can set multiple columns per slide. Currently it is possible to do this per optionset.
I would like to make this setting responsive, so it would be possible to have a slide with a different amount of columns per breakpoint.

Logic for the settings form has been based on D7 Owl Carousel settings I remember from the past.
Logic for the flexslider implementation comes from https://github.com/woocommerce/FlexSlider/issues/1452.

Added 4 breakpoints, which can have their own min-width in pixels:

  • Default
  • Mobile
  • Tablet
  • Desktop

Attached a screenshot of the new config form.

I'll create a patch.

CommentFileSizeAuthor
#18 flexslider-responsive_minitems_and_maxitems-2844208-18.patch10.81 KBKobe Wright
#14 responsive_minItems_and_maxItems_multiple_columns_per_slide-2844208-14.patch17.48 KBmatthiasm11
#10 responsive_minItems_and_maxItems_multiple_columns_per_slide-2844208-10.patch31.2 KBmatthiasm11
#7 responsive_minItems_and_maxItems_multiple_columns_per_slide-2844208-7.patch32.84 KBmatthiasm11
#6 responsive_minItems_and_maxItems_multiple_columns_per_slide-2844208-6.patch19.26 KBmatthiasm11
#3 responsive_minItems_and_maxItems_multiple_columns_per_slide-2844208-3.patch18.79 KBmatthiasm11
New_config_form.jpg137.37 KBmatthiasm11

Issue fork flexslider-2844208

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

matthiasm11 created an issue. See original summary.

matthiasm11’s picture

matthiasm11 CreditAttribution: matthiasm11 at Randstad Digital commented
matthiasm11’s picture

matthiasm11 CreditAttribution: matthiasm11 at Randstad Digital commented
FileSize
responsive_minItems_and_maxItems_multiple_columns_per_slide-2844208-3.patch18.79 KB
matthiasm11’s picture

matthiasm11 CreditAttribution: matthiasm11 at Randstad Digital commented
Status: Active » Needs review
matthiasm11’s picture

matthiasm11 CreditAttribution: matthiasm11 at Randstad Digital commented
Issue summary: View changes
matthiasm11’s picture

matthiasm11 CreditAttribution: matthiasm11 at Randstad Digital commented
FileSize
responsive_minItems_and_maxItems_multiple_columns_per_slide-2844208-6.patch19.26 KB

When smoothHeight has been checked in the settings, recalculate the height for responsive purposes. Updated patch.

matthiasm11’s picture

matthiasm11 CreditAttribution: matthiasm11 at Randstad Digital commented
FileSize
responsive_minItems_and_maxItems_multiple_columns_per_slide-2844208-7.patch32.84 KB

Rerolled against latest dev.

matthiasm11’s picture

matthiasm11 CreditAttribution: matthiasm11 at Randstad Digital commented
amaria’s picture

amaria CreditAttribution: amaria commented

I'll review this. There are a couple of requests and patches for this on the 7.x version as well. Will have to think about the best solution. Thanks for your work. This is a substantial patch so if you can include some tests that would be great.

matthiasm11’s picture

matthiasm11 CreditAttribution: matthiasm11 at Randstad Digital commented
FileSize
responsive_minItems_and_maxItems_multiple_columns_per_slide-2844208-10.patch31.2 KB

Rerolled against latest dev, which applies to 8.x-2.0-beta1 too.

Status: Needs review » Needs work

The last submitted patch, 10: responsive_minItems_and_maxItems_multiple_columns_per_slide-2844208-10.patch, failed testing.

ShaneOnABike’s picture

ShaneOnABike CreditAttribution: ShaneOnABike commented

Wow! This is by far the most perfect thing to make this module more flexible and responsive. I think this has been lacking and I was able to integrate all of the changes into the D7 version and it just worked! Thank you!!

blueblot’s picture

blueblot CreditAttribution: blueblot commented

Nice addon to this module, works fine in d8.
Great job.

matthiasm11’s picture

matthiasm11 CreditAttribution: matthiasm11 at MM-Experience commented
Status: Needs work » Needs review
FileSize
responsive_minItems_and_maxItems_multiple_columns_per_slide-2844208-14.patch17.48 KB

Rerolled against latest dev, which applies to 8.x-2.0 too.

ecvandenberg’s picture

ecvandenberg CreditAttribution: ecvandenberg at Inforwijzer commented

Thanks for this nice and important improvement! Works like a charm on Drupal 9.4.5 and Flexslider 8.x-2.0.

Would it be an idea to use the theme breakpoints? Like the responsive image styles do.

And why not commit this important improvement to a stable version?

Kobe Wright’s picture

Kobe Wright CreditAttribution: Kobe Wright as a volunteer and at Randstad Digital commented
Version: 8.x-2.x-dev » 3.x-dev
Assigned: Unassigned » Kobe Wright
Status: Needs review » Active

Kobe Wright opened merge request !9

Kobe Wright’s picture

Kobe Wright CreditAttribution: Kobe Wright as a volunteer and at Randstad Digital commented
Assigned: Kobe Wright » Unassigned
Status: Active » Needs review
FileSize
flexslider-responsive_minitems_and_maxitems-2844208-18.patch10.81 KB
  • Updated the version to 3.x since this was never merged into 2.x and 3.x is probably the way forward
  • Took a stab at a solution that allows you to set minItems and maxItems based on the breakpoints provided by the default theme
  • Opened a MR
  • Also attaching patch for composer
ecvandenberg’s picture

ecvandenberg CreditAttribution: ecvandenberg at Inforwijzer commented

Thanks Kobe! The patch applies cleanly to the 3.0.0-alpha1 version. Still on a Drupal 9 site.

And the breakpoints work very well. Nice!

Now let's see if all works fine after upgrade to Drupal 10...