adds swiper carousel component

composer.json

@@ -18,6 +18,7 @@
         "drupal/nomarkup": "^1.0",
         "drupal/paragraphs": "*",
         "drupal/paragraphs_edit": "*",
+        "drupal/swiper_formatter": "^2.0@beta",
         "drupal/ui_patterns_field_formatters": "*",
         "drupal/ui_patterns_field_group": "*",
         "drupal/viewsreference": "^2.0@beta",

config/core.entity_form_display.paragraph.sa_existing_content_card.default.yml

@@ -2,7 +2,7 @@ langcode: en
 status: true
 dependencies:
   config:
-    - field.field.sa_paragraph.existing_content_card.sa_existing_content
+    - field.field.paragraph.sa_existing_content_card.sa_existing_content
     - paragraphs.paragraphs_type.sa_existing_content_card
 id: paragraph.sa_existing_content_card.default
 targetEntityType: paragraph

config/core.entity_form_display.paragraph.sa_multi_item_carousel.default.yml

@@ -0,0 +1,24 @@
+langcode: en
+status: true
+dependencies:
+  config:
+    - field.field.paragraph.sa_multi_item_carousel.sa_existing_content
+    - paragraphs.paragraphs_type.sa_multi_item_carousel
+id: paragraph.sa_multi_item_carousel.default
+targetEntityType: paragraph
+bundle: sa_multi_item_carousel
+mode: default
+content:
+  sa_existing_content:
+    type: entity_reference_autocomplete
+    weight: 0
+    region: content
+    settings:
+      match_operator: CONTAINS
+      match_limit: 10
+      size: 60
+      placeholder: ''
+    third_party_settings: {  }
+hidden:
+  created: true
+  status: true

config/core.entity_view_display.paragraph.sa_multi_item_carousel.default.yml

@@ -0,0 +1,32 @@
+langcode: en
+status: true
+dependencies:
+  config:
+    - field.field.paragraph.sa_multi_item_carousel.sa_existing_content
+    - paragraphs.paragraphs_type.sa_multi_item_carousel
+    - swiper_formatter.swiper_formatter.default
+  module:
+    - nomarkup
+    - swiper_formatter
+id: paragraph.sa_multi_item_carousel.default
+targetEntityType: paragraph
+bundle: sa_multi_item_carousel
+mode: default
+content:
+  sa_existing_content:
+    type: swiper_formatter_entity
+    label: hidden
+    settings:
+      view_mode: teaser
+      template: default
+      caption: ''
+      custom_link: null
+      link: false
+    third_party_settings:
+      nomarkup:
+        enabled: true
+        separator: ''
+        referenced_entity: ''
+    weight: 0
+    region: content
+hidden: {  }

config/field.field.paragraph.multi_item_carousel.sa_existing_content.yml

@@ -0,0 +1,30 @@
+langcode: en
+status: true
+dependencies:
+  config:
+    - field.storage.paragraph.sa_existing_content
+    - node.type.sa_page
+    - node.type.sa_post
+    - paragraphs.paragraphs_type.sa_multi_item_carousel
+id: paragraph.sa_multi_item_carousel.sa_existing_content
+field_name: sa_existing_content
+entity_type: paragraph
+bundle: sa_multi_item_carousel
+label: 'Existing Content'
+description: ''
+required: false
+translatable: false
+default_value: {  }
+default_value_callback: ''
+settings:
+  handler: 'default:node'
+  handler_settings:
+    target_bundles:
+      sa_page: sa_page
+      sa_post: sa_post
+    sort:
+      field: _none
+      direction: ASC
+    auto_create: false
+    auto_create_bundle: sa_page
+field_type: entity_reference

config/field.field.paragraph.sa_multi_item_carousel.sa_existing_content.yml

@@ -0,0 +1,30 @@
+langcode: en
+status: true
+dependencies:
+  config:
+    - field.storage.paragraph.sa_existing_content
+    - node.type.sa_page
+    - node.type.sa_post
+    - paragraphs.paragraphs_type.sa_multi_item_carousel
+id: paragraph.multi_item_carousel.sa_existing_content
+field_name: sa_existing_content
+entity_type: paragraph
+bundle: sa_multi_item_carousel
+label: 'Existing Content'
+description: ''
+required: false
+translatable: false
+default_value: {  }
+default_value_callback: ''
+settings:
+  handler: 'default:node'
+  handler_settings:
+    target_bundles:
+      sa_page: sa_page
+      sa_post: sa_post
+    sort:
+      field: _none
+      direction: ASC
+    auto_create: false
+    auto_create_bundle: sa_page
+field_type: entity_reference

config/paragraphs.paragraphs_type.sa_multi_item_carousel.yml

@@ -0,0 +1,9 @@
+langcode: en
+status: true
+dependencies: {  }
+id: sa_multi_item_carousel
+label: 'Multi Item Carousel'
+icon_uuid: null
+icon_default: null
+description: ''
+behavior_plugins: {  }

config/swiper_formatter.settings.yml

@@ -0,0 +1,60 @@
+id: null
+label: null
+description: null
+enabled: true
+source: remote
+autoHeight: true
+width: null
+height: null
+observer: false
+direction: horizontal
+effect: slide
+loop: false
+rewind: false
+centeredSlides: false
+speed: 300
+slidesPerView: 1.0
+loopedSlides: 1
+noSwipingSelector: '.no-swipe, button, input'
+grabCursor: false
+cssMode: false
+autoplay:
+  enabled: false
+  delay: 4000
+  disableOnInteraction: true
+  pauseOnMouseEnter: false
+  reverseDirection: false
+  stopOnLastSlide: false
+  waitForTransition: true
+navigation:
+  enabled: false
+  hideOnClick: false
+pagination:
+  enabled: false
+  type: bullets
+  dynamicBullets: false
+  clickable: false
+lazy:
+  enabled: false
+  checkInView: false
+  loadOnTransitionStart: false
+  loadPrevNext: false
+  loadPrevNextAmount: 1
+  scrollingElement: window
+mousewheel: false
+scrollbar:
+  enabled: false
+  draggable: false
+  dragSize: auto
+  hide: true
+  snapOnRelease: false
+slidesPerGroup: 1
+spaceBetween: 0
+updateOnWindowResize: true
+resizeObserver: true
+breakpoints:
+  breakpoint: null
+  swiper_template: null
+  weight: 0
+breakpoint: false
+breakpointsBase: window

config/swiper_formatter.swiper_formatter.default.yml

@@ -0,0 +1,68 @@
+langcode: en
+status: true
+dependencies: {  }
+id: default
+label: Default
+description: 'This default template is mostly for demonstration purpose, feel free to edit it or create (as many) new ones.'
+breakpoint: false
+swiper_options:
+  autoplay:
+    enabled: false
+    delay: 4000
+    disableOnInteraction: true
+    pauseOnMouseEnter: false
+    reverseDirection: false
+    stopOnLastSlide: false
+    waitForTransition: true
+  navigation:
+    enabled: true
+    hideOnClick: false
+  pagination:
+    enabled: true
+    type: bullets
+    dynamicBullets: false
+    clickable: true
+  scrollbar:
+    enabled: false
+    draggable: false
+    dragSize: auto
+    hide: true
+    snapOnRelease: false
+  breakpoints:
+    -
+      breakpoint: '768'
+      swiper_template: mobile
+      weight: '0'
+    -
+      breakpoint: '960'
+      swiper_template: desktop
+      weight: '1'
+  lazy:
+    enabled: false
+    checkInView: false
+    loadOnTransitionStart: false
+    loadPrevNext: false
+    loadPrevNextAmount: 1
+    scrollingElement: window
+  source: remote
+  breakpointsBase: window
+  autoHeight: true
+  width: null
+  height: null
+  observer: 0
+  updateOnWindowResize: true
+  resizeObserver: true
+  direction: horizontal
+  effect: slide
+  loop: true
+  rewind: 0
+  centeredSlides: 0
+  speed: 300
+  slidesPerView: 1.5
+  spaceBetween: 10
+  slidesPerGroup: 1
+  loopedSlides: 1
+  noSwipingSelector: '.no-swipe, button, input'
+  mousewheel: 0
+  grabCursor: 0
+  cssMode: 0

config/swiper_formatter.swiper_formatter.desktop.yml

@@ -0,0 +1,62 @@
+langcode: en
+status: true
+dependencies: {  }
+id: desktop
+label: Desktop
+description: ''
+breakpoint: true
+swiper_options:
+  autoplay:
+    enabled: false
+    delay: 4000
+    disableOnInteraction: false
+    pauseOnMouseEnter: false
+    reverseDirection: false
+    stopOnLastSlide: false
+    waitForTransition: false
+  navigation:
+    enabled: true
+    hideOnClick: false
+  pagination:
+    enabled: true
+    type: bullets
+    dynamicBullets: false
+    clickable: true
+  scrollbar:
+    enabled: false
+    draggable: false
+    dragSize: auto
+    hide: false
+    snapOnRelease: false
+  breakpoints:
+    -
+      weight: 0
+  lazy:
+    enabled: false
+    checkInView: false
+    loadOnTransitionStart: false
+    loadPrevNext: false
+    loadPrevNextAmount: 1
+    scrollingElement: window
+  source: remote
+  breakpointsBase: window
+  autoHeight: 0
+  width: null
+  height: null
+  observer: 0
+  updateOnWindowResize: true
+  resizeObserver: true
+  direction: horizontal
+  effect: slide
+  loop: 0
+  rewind: 0
+  centeredSlides: 0
+  speed: 300
+  slidesPerView: 3.5
+  spaceBetween: 15
+  slidesPerGroup: 1
+  loopedSlides: 1
+  noSwipingSelector: '.no-swipe, button, input'
+  mousewheel: 0
+  grabCursor: 0
+  cssMode: 0