davedbase / solid-slider Goto Github PK

Idk if I'm doing this wrong but I'm getting a very vague error

My code

        <SliderProvider>
            <Slider options={{ loop: true }}>
                <Day {...passProps}/>
                <Month {...passProps}/>
                <Year {...passProps}/>
            </Slider>
            <SliderButton prev>Previous</SliderButton>
            <SliderButton next>Next</SliderButton>
        </SliderProvider>

My Error

web.template is not a function
TypeError: web.template is not a function
    at Object.<anonymous> (/Users/Admin/App/node_modules/solid-slider/dist/index/index.common.js:77:33)
    at Module._compile (node:internal/modules/cjs/loader:1105:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/&#8230;

Hi, I Implemented this slider into my site with Astro, and now there is scroll hijacking when I scroll down the site. It jitters and kind of goes back up after I scroll past the slider. Before adding the slider everything was fine. Any advice is appreciated!

I noticed that the details()isn't updated on mount, nor does it react when details are changed.

Repro:
https://stackblitz.com/edit/solidjs-templates-tbsg3q?file=src/App.tsx

I think using object to destruct createSlider is better for DX than using array since we don't need to remember the array position and can use some specified prop more easier.

const { current } = createSlider();

I just found a solution for a problem which I had with Solid Slider when using with Solid Start and SSR.

On SSR, the downloaded HTML page already contains all the images which should be in the slider. The issue is that these images are visible UNTIL the slider Javascript is downloaded and executed which can lead to an ugly flickering effect if the slider width and/or height are not properly set or must stay flexible.

The solution:

1. add the style display:none (or the class "hidden" if you use TailwindCSS) to all images but the first one on the server-rendering to hide them on static page rendering
2. listen to the created event hook of the slider and when it is created (so its Javascript is downloaded and run) then loop over all remaining images of the slider and remove the style.

During

const sliderOptions = {
    loop: true,
    created: slider => {
      console.log("slider created", slider)
      slider.slides.forEach(slide => {
        slide.classList.remove("hidden")
      })
    }
  }
  const [slider, { current, next, prev, moveTo, details }] = createSlider(sliderOptions)

and in the render return do something like this assuming you have an array of image objects:

return (
<div use:slider>
  <For each={images}>
    {(image: Image, index: Accessor<number>) => (
      <img
        src={image.URL}
        width="370"
        height="247"
        class={index() != 0 && "hidden"}
      />
    )}
   </For>
</div>)

Feel free to take my trick and put a potentially nicer version into the README or so because I guess as more Solid will be used on the server to render as more often the flickering will be reported.

Excellent package.

Do you plan to add an autoplay?

Hi
i try this code for mapping data in this slide but the problem is :
the slider not working after the mapping data

How can i map a div in this slider ?

import "solid-slider/slider.css";
import {
  createSlider,
} from "solid-slider";
import BidsStyle from "./Bids.module.css";
import {
  FaSolidCircleChevronLeft,
  FaSolidCircleChevronRight,
} from "solid-icons/fa";
import { createSignal, For, createEffect, createResource } from "solid-js";

export default function Bids() {
  const [HotCollection, setHotcollection] = createSignal([]);

  //fetch data
  createEffect(async () => {
    const res = await fetch(`http://localhost:3000/api/bid`);
    const json = await res.json();
    setHotcollection(json);
    console.log(json);
  });

  const [slider, { next, prev }] = createSlider({
    loop: true,
    mode: "free-snap",
    breakpoints: {
      "(max-width:800px)": {
        slides: { perView: 2, spacing: 15 },
      },
      "(max-width:500px)": {
        slides: { perView: 1, spacing: 15 },
      },
    },
    slides: { perView: 4, spacing: 15 },
  });

  return (
    <section>
      <div ref={slider} className="keen-slider">
        {HotCollection().map((e) => (
          <div className="keen-slider__slide number-slide1">{e._id}</div>
        ))}
      </div>

      <button className={BidsStyle.next} onClick={next}>
        <FaSolidCircleChevronRight />
      </button>
      <button className={BidsStyle.prev} onClick={prev}>
        <FaSolidCircleChevronLeft />
      </button>
    </section>
  );
}

This is nearly a moot issue, as it has not been possible for me to reproduce on StackBlitz . . however there may be cases when using SolidStart that slides are initialized with a 1px width. Any window resize event will trigger a re-initialization so that the slider is then correctly rendered.

In the case where this occurred, the <Slider> is created within a component requiring authentication, that was wrapped in Suspense, and the slides themselves were loaded from a store via Context API.

Could not find a declaration file for module 'solid-slider'. '/home/andrew/Documents/GFT/node_modules/solid-slider/dist/index/index.module.js' implicitly has an 'any' type.
There are types at '/home/andrew/Documents/GFT/node_modules/solid-slider/dist/index/index.d.ts', but this result could not be resolved when respecting package.json "exports". The 'solid-slider' library may need to update its package.json or typings.

i get this error with "vite": "^2.9.5" and "solid-js": "^1.3.16",

thx for this lib :)

Hey, wanted to try this out.
Got an error & I can't seem to get it to work.
Is this known &/or is there a fix?

Package path ./dist/slider.css is not exported from package node_modules/solid-slider (see exports field in /node_modules/solid-slider/package.json)

If you initialize solid-slider with an initial value, the current variable is not updated.

See repro: https://codesandbox.io/s/solid-slider-forked-e72elz?file=/src/index.tsx:317-329

Hi there,

I'm using the component for reference.

When I import autoplay plugin using the recommended format per README.md,
e.g. import autoplay from "solid-slider/plugins/autoplay";

I get IDE error:
"Cannot find module 'solid-slider/plugins/autoplay' or its corresponding type declarations."
The webpage does not load and web-dev console error is as follows:
"Uncaught SyntaxError: The requested module '/node_modules/solid-slider/dist/autoplay/autoplay.jsx' does not provide an export named 'default'"

When I change the import to:
e.g. import { autoplay } from "solid-slider/plugins/autoplay";

I get the same IDE error, however, the webpage loads and autoslide works.

Just bringing this to dev attention so it gets cleaned up to work without any error messages. Thanks!