handle resize (#910)

* refactor: setup initial carousel testsw

* fix: carousel in CSR

* add expectation

* test: added test cases

* test: some additional test cases

* not draggable

* CSS scroll snapping on mobile

* threshold tests

* try simpler code refactor

* small docs

* grab index from inline

* improved examples

* use scorllLeft instead

* hacky impl

* fix: slide snapping

* better naming

* much simpler carousel

* fix: get proper array order

* account for slide margin

* updated correct index

* update with css scroll snapping

* simplify container

* get buttons working again

* setup for drag to do its own behavior

* get mouse working again

* correct indexes again

* it worksgit add .

* down to touch interacitons

* initial touch working

* finally workinggit add .

* add pagination

* carousel pagination

* first attempt at multiple slides per view

* update next button based on slidesPerView

* feat: keyboard navigation with pagination

* focus management from previous and next when out of slides

* bullets render based on slides in view

* add non-draggable example

* touch ups

* correct styles

* mouse dragging works on variable slide widths

* works on variable widths for index changes

* pagination works again

* correct scroll snapping again

* improve carousel a11y

* without scrollbar

* better styles and remove num slides in inline

* transitions sort of working

* center and end alignments

* more tests notes

* feat: looped support

* improved a11ty

* home and enter keys for pagination

* add home & end test cases w/ pagination

* add aria live polite

* add announcements to the content inside of the carousel and collapsible

* add inert based on slidesPerView

* tabpanel in pagination carousels

* add accessible name

* cleaner code

* initial working autoplay

* bound signals

* simplify bound signal

* improved autoplay and tabs aria

* add in aria-selected

* accessible name for autoplay player button

* respecting reduced motion

* autoplay looping working

* improved experience when consuming and also support for updating flex-basis automatically when slides per view change

* setup for the initial index

* more test cases

* multiple slides working on the server

* proper gap

* add correct initial index

* get initial indexes sort of working

* correct snapping again on mobile with initial index

* almost

* next and prev buttons should work

* improved styling

* upgrade to 1.7.2

* no caret

* add in caret only in root

* initial working

* initial working in all snap modes

* carousel docs

* add in changeset

* remove annoying acorn stuff

* handle resize

* remove md

Author: thejackshelton

packages/kit-headless/src/components/carousel/scroller.tsx

@@ -6,6 +6,7 @@ import {
   useSignal,
   $,
   useTask$,
+  useOnWindow,
 } from '@builder.io/qwik';
 import { carouselContextId } from './context';
 import { useStyles$ } from '@builder.io/qwik';
@@ -158,6 +159,18 @@ export const CarouselScroller = component$((props: CarouselContainerProps) => {
     }
   });
 
+  // resize the snap point when the window resizes
+  const handleResize = $(async () => {
+    if (!context.scrollerRef.value) return;
+    const newPosition = await getSlidePosition$(context.currentIndexSig.value);
+    context.scrollerRef.value.scrollTo({
+      left: newPosition,
+      behavior: 'auto',
+    });
+  });
+
+  useOnWindow('resize', handleResize);
+
   return (
     <div
       ref={context.scrollerRef}