Automatic Carousel Filtering

Blox Carousels are great, but sometimes you want the carousel to automatically filter when the "previous" or "next button" is clicked.

The easiest way to do this is to add a standard blox filter button on each blox slide which we will hide: through the following snippet we add to our ActionSet

"style": { 
    "display":"none"
}

Giving a result looking like this

{
      "type": "ActionSet",
      "class": "linkfilter",
      "style": {
          "display": "none"
      },
      "actions": [
          {
              "type": "Filters",
              "title": "Filter (by Dimension)",
              "data": {
                  "filters": [
                      {
                          "filterJaql": {
                              "explicit": true,
                              "multiSelection": true,
                              "members": [
                                  "{panel:Description}"
                              ]
                          },
                          "dim": {
                              "title": "Description",
                              "table": "Categories",
                              "column": "Description",
                              "datatype": "string"
                          }
                      }
                  ]
              }
          }
      ]
  }

This button is hidden but available for clicks,this allows us to drop an easy javascript listener on the carousel buttons.
Note that we have added a "class" to our ActionSet, this is important, as we want to reference that specific button when we click and not interfere with any other action button we might have on the template.

Make sure to replace the widgetID

$('widget[widgetid=\"5eea97329908d1202cb5a0a0\"] .carousel-button').on('click', function() {
    $(this).parent().find('.blox-slides:not(.blox-carousel-hide) .linkfilter button').click()
})

Or in one line for blox:

    "script": "$('widget[widgetid=\"5eea97329908d1202cb5a0a0\"] .carousel-button').on('click',function(){ $(this).parent().find('.blox-slides:not(.blox-carousel-hide) .linkfilter button').click()})",

Updated 03-02-2023

Developers: Plugins and scripts