Carousel FAQ

How do I enable Slick on a Six/Ten Press Featured Content widget?

The slick add-on actually makes a new widget called “Six/Ten Press Carousel”, with most of the original widget settings, but a few new ones.

The new settings are:

• Enable Autoplay
• Navigation options: show arrows, dots, both, or neither on the carousel
• Variable width: forces all slide images to be the same height, but the widths may be different. Using this option likely does not work well with small images, long titles, or content in your slides. If any of those apply, do not use this option.

The existing widget settings which can modify the carousel:

• Number of posts: determines number of posts which will show in the carousel
• Image alignment: the carousel offers a “centerMode” option, which “enables centered view with partial prev/next slides”. Set the image alignment to “none” to enable this.

Some notes about what settings work best together, or do not work well together:

• setting the carousel to center the primary slide will override the columns/slides to show setting
• enabling the variable width option will also override the columns/slides to show setting. This option seems to do better with a large image. Note that this also prevents Slick from adding an inline width value to your slides.
• using the columns to show multiple slides at one time will set the number of slides to scroll at once to the same value. So if you set the carousel to three slides, on larger screens the carousel will scroll three slides at a time.
• make sure you have more slides in your carousel than what will display.

How can I style the slides?

This add-on includes the default Slick styling, which is very minimal, and nothing else. If you enable Slick, the slides are wrapped in a div with a class of sixtenpress-slides, so just style anything inside that div element.

Any filters?

Yes, to modify widget settings which are not available in the widget form, you can use a function like this:

add_filter( 'sixtenpressfeaturedcontentslick_params', 'prefix_sixtenslick_params', 10, 3 );
 /**
  * Modify parameters for the slick carousel.
  * @param $params array data to be sent to the carousel
  * @param $instance array the current widget instance
  * @param $args array the current widget context
  *
  * @return mixed
  */
function prefix_sixtenslick_params( $params, $instance, $args ) {
 $params['centerMode'] = true; // center the slides
 $params['fade'] = true; // changes transition to fade instead of slide
 $params['infinite'] = true; // enable infinite scroll
 $params['slidesToScroll'] = 2; // how many slides to scroll on click

 return $params;
}

Make sure that your $params[$key] matches a Slick option.

Tell me more about the new image size (sixtenpress-slick).

This add-on optionally adds a new image size to your WordPress site. The default image size is 500px high and 0 for the width, meaning it can be anything (for the variable width option). If you set a number other than 0 for the width, the Slick image will be cropped to the exact dimensions specified. To enable and adjust the new image size, go to Settings > 6/10 Press Featured Content (just 6/10 Press if you use that plugin).

Return to Six/Ten Press Featured Content Carousel