Slider packages

Hi everyone Any package like https://keen-slider.io/ or others to create sliders and carousels? Thanks 🙏

Keen-Slider: Easily create sliders, carousels and much more.

Keen-Slider is a free library agnostic touch slider with native touch/swipe behavior and great performance. ✔️ No Dependencies ✔️ Typescript Support ✔️ Fully Responsive

27 Replies

davedbase•3mo ago

https://github.com/davedbase/solid-slider

GitHub

GitHub - davedbase/solid-slider: A carousel/slider implementation f...

A carousel/slider implementation for SolidJS. . Contribute to davedbase/solid-slider development by creating an account on GitHub.

davedbase•3mo ago

It wraps KeenSlider 🙂

davedbase•3mo ago

However I am considering switching to Embla (https://www.embla-carousel.com/)

www.embla-carousel.com

A lightweight carousel library with fluid motion and great swipe pr...

A lightweight carousel library with fluid motion and great swipe precision

Daniel Sousa @TutoDS•3mo ago

Thank you @davedbase Other question, and sorry, I'm trying to migrate a website I did in Nextjs with Sanity to Solid Start with Sanity, but in the Nextjs version I use aos to do animations on scroll to elements appear Any solution to do that in Solid/ Solid start?

Madaxen86•3mo ago

https://www.solid-ui.com/docs/components/ Has both and more. It’s build with tailwind and is like shadcn for solid. Has both carousel and slider and plenty more components which get copied to your code base so you totally own it.

solid-ui

Beautifully designed components built with Kobalte and Tailwind CSS.

Daniel Sousa @TutoDS•3mo ago

Thanks @madani Any tip for the AOS (animations on scroll)? Hi everyone @davedbase and @Madaxen86 any idea why I'm getting this error:

Cannot read properties of null (reading 'getComputedStyle')

Daniel Sousa @TutoDS•3mo ago

davedbase•3mo ago

I have no idea how it’s implemented so I’m not going to be much help here. Is that from SolidUI? During SSR?

Daniel Sousa @TutoDS•3mo ago

I copy the code from Solid UI yes The error appears when I navigate between pages

function TestimonialsCarousel(props: Props) {
  return (
    <Carousel
      class="mx-auto w-full md:max-w-screen-md lg:max-w-screen-md xl:max-w-screen-lg"
      opts={{
        loop: true,
      }}
      plugins={[Autoplay({ delay: 7500 })]}
    >
      <CarouselContent>
        <For each={props.items}>
          {(testimonial) => (
            <CarouselItem>
              <TestimonialCard {...testimonial} />
            </CarouselItem>
          )}
        </For>
      </CarouselContent>
      <CarouselNav />
    </Carousel>
  );
}

function TestimonialsCarousel(props: Props) {
  return (
    <Carousel
      class="mx-auto w-full md:max-w-screen-md lg:max-w-screen-md xl:max-w-screen-lg"
      opts={{
        loop: true,
      }}
      plugins={[Autoplay({ delay: 7500 })]}
    >
      <CarouselContent>
        <For each={props.items}>
          {(testimonial) => (
            <CarouselItem>
              <TestimonialCard {...testimonial} />
            </CarouselItem>
          )}
        </For>
      </CarouselContent>
      <CarouselNav />
    </Carousel>
  );
}

This is the component that I'm using on the home page (where the error is appearing)

function TestimonialsSection() {
  const highlightedTestimonials = createAsync(() => getHighlightedTestimonials(1, 6));

  // TODO: add skeleton
  return (
    <Suspense>
      <Show when={highlightedTestimonials()} keyed={true}>
        {(testimonials) => (
          <section class="flex items-center justify-center py-16">
            <div class="container">
              <TestimonialsCarousel items={testimonials} />
            </div>
          </section>
        )}
      </Show>
    </Suspense>
  );
}

function TestimonialsSection() {
  const highlightedTestimonials = createAsync(() => getHighlightedTestimonials(1, 6));

  // TODO: add skeleton
  return (
    <Suspense>
      <Show when={highlightedTestimonials()} keyed={true}>
        {(testimonials) => (
          <section class="flex items-center justify-center py-16">
            <div class="container">
              <TestimonialsCarousel items={testimonials} />
            </div>
          </section>
        )}
      </Show>
    </Suspense>
  );
}

This is the usage I only implement the dots to the carousel The error is always when I change betwen pages, like: - I'm in Home - Goes to about page - Switch again to Home page - The error appears 😦 I put ssr: false on app.config and dind't find the error again :/

davedbase•3mo ago

Yeah it sounds like the slider is trying to access the window object during SSR to calculate the dimensions. It needs to be guarded to prevent that. @Stefan E-K any thoughts? @Daniel Sousa @TutoDS it would be worth submitting a ticket on solid-ui.

Daniel Sousa @TutoDS•3mo ago

Thank you Already open a discussion on the emma repository

davedbase•3mo ago

I don’t think it has anything to do with Embla though.

Daniel Sousa @TutoDS•3mo ago

The only solution I found is disabling ssr 😦

davedbase•3mo ago

For now that makes sense. There should be a way to avoid using that function. Rendering a basic structure to the slider and then initializing it on the client. However Stefan would have to implement that

Madaxen86•3mo ago

You could also load the component as clientOnly until it is fixed so you can keep SSR enabled. https://docs.solidjs.com/solid-start/reference/client/client-only#clientonly

Daniel Sousa @TutoDS•3mo ago

Ok I will try that, sorry for noob questions @Madaxen86 using clientOnly can have any impact? Already try it, on the subcomponent that uses the carousel and dind't work

const ClientOnlyCarousel = clientOnly(() =>
  import('~/components/ui/carousels/testimonials').then((comp) => ({
    default: comp.TestimonialsCarousel,
  })),
);

const ClientOnlyCarousel = clientOnly(() =>
  import('~/components/ui/carousels/testimonials').then((comp) => ({
    default: comp.TestimonialsCarousel,
  })),
);

Let me restart the project to see if changes anything

Daniel Sousa @TutoDS•3mo ago

The error keeps appearing after use clientOnly

Stefan E-K•3mo ago

it looks like this might be more of an embla error than an SolidUI error. Is the creator a member of this discord? can you upload a minimal repro ? so we can have a closer look at the code? 🙂

Daniel Sousa @TutoDS•3mo ago

https://codesandbox.io/p/devbox/embla-carousel-kycpkw I copy my code to this codesandbox @Stefan E-K do you know any other carousel package that I can use in Solid to try if works?

davedbase•3mo ago

I doubt they would be. Embla must be SSR safe, how are the other framework impl getting around this?

Stefan E-K•3mo ago

it's weird since the SolidUI docs have SSR set to true and everything works fine but I'll have a look at the repro, hopefully we can find the issue 🙂

export default defineConfig({
  ssr: true,
  server: {
    preset: "vercel"
  },
  extensions: ["mdx", "md"],
  vite: {
    plugins: [
      mdx.withImports({})({
        jsx: true,
        jsxImportSource: "solid-js",
        providerImportSource: "solid-mdx",
        remarkPlugins: [remarkGfm],
        rehypePlugins: [
          rehypeSlug,
          rehypeComponent,
          [
            rehypePrettyCode,
            {
              getHighlighter: async () => {
                return await getHighlighter({ theme: "nord" })
              }
            }
          ]
        ]
      })
    ]
  }
})

export default defineConfig({
  ssr: true,
  server: {
    preset: "vercel"
  },
  extensions: ["mdx", "md"],
  vite: {
    plugins: [
      mdx.withImports({})({
        jsx: true,
        jsxImportSource: "solid-js",
        providerImportSource: "solid-mdx",
        remarkPlugins: [remarkGfm],
        rehypePlugins: [
          rehypeSlug,
          rehypeComponent,
          [
            rehypePrettyCode,
            {
              getHighlighter: async () => {
                return await getHighlighter({ theme: "nord" })
              }
            }
          ]
        ]
      })
    ]
  }
})

Daniel Sousa @TutoDS•3mo ago

I'm facing a strange behavior change between routes too, could the prerender?

server: {
    prerender: {
      crawlLinks: true,
    },
  },

server: {
    prerender: {
      crawlLinks: true,
    },
  },

Hi everyone After try a few things I can't found anything that works 😦 Sometimes the error appears again, using the clientOnly less times than the normal input 😦

Madaxen86•3mo ago

Here's an implementation of embla carousel without any client only etc. - no errors or hydration issues: https://stackblitz.com/edit/github-yivysl?file=src%2Fcomponents%2FCarousel.tsx

StackBlitz

Solid-start Basic Example - StackBlitz

Run official live example code for Solid-start Basic, created by Solidjs on StackBlitz

Daniel Sousa @TutoDS•3mo ago

Thanks I will take a look Madaxen, could be because fo the context? I follow the code on Solid UI Maybe I will try to refactor it, and make it simpler, I don't know Thanks for your time 🙏

davedbase•3mo ago

I’m going to be taking a closer look at this implementation and upgrading solid-slider. If you do simplify and improve I’d love to have a look + give credit if I utilize it in my solution. Also this is good learning for SolidUI

Madaxen86•3mo ago

Solid-UI carousel is aslo working: https://stackblitz.com/edit/github-yivysl?file=src%2Froutes%2Findex.tsx

StackBlitz

Solid-start Basic Example - StackBlitz

Run official live example code for Solid-start Basic, created by Solidjs on StackBlitz

Daniel Sousa @TutoDS•3mo ago

Sorry guys to back with this In my case I have implemented the dots to navigate, but when I navigate dragging to the next slide, the dots don't update Any specific method to get the "currentIndex" when moving slides with dragging?

Gaming

Programming

Slider packages