Slideshow not showing

[jamestagal]

Hi @jimafisk

I am trying to get a basic version of this Slideshow Gallery example I found in a Svelte REPL to work but I can't get the image gallery to display. I see you did add a fix to the slider yesterday. thank you. Could you pls have a look when you are free. The two main files you could look at are slideshow.svelte and slide.svelte.

And for now I am importing the slideshow.svelte component into the notice_page.svelte pages down the bottom.

One question I had with this set up is with the following variable, in the slideshow.svelte component.

let imageShowingIndex = 0;

How is this connected to the array of images in the slide.svelte file? Does it function like a container, if you like, that stores a value and in this case the index of the images?

Ben

[jamestagal]

Hi @jimafisk

Just an update on this theme. I have finished all the main bits and pieces. The only component/functionality left to do is the text-based slider on the front page.

I have the markup in the hero.svelte file and done the replacement pattern for the content source for this section. To be honest I haven't had any luck trying to get any sliders to work and am feeling frustrated with them. I think in the Hugo theme example they are importing Slick slider. But I am not sure how to approach this one.

Pls help. Ben

[jimafisk]

The theme looks awesome @jamestagal! I can tell you put a ton of work into it, really nice job :tada:

I personally find it easier re-implementing features like this than trying to integrate other libraries and fixing compatibility issues. It's not exactly 1-to-1 but I coded up a transition effect the "svelte-way" so hopefully it works close enough.

I made some small tweaks to the nav/header so it looks like the demo when you scroll and fixed the font loading issue so the headings use Futura.

[jamestagal]

Hi @jimafisk

Thanks Jim. That is awesome. I will study the way you have set it up. 😄

Yes it has taken me some time but we are almost there with it. Thanks to you I have been able to implement at lot of functionality and have learnt a lot in the process. I'm sure the next themes I tackle will take me a lot less time 😸 to build.

The final item on my list was Rewrite styles to reduce global.css size & make it more sustainable see issue link below.

https://github.com/jamestagal/plenti-educenter/issues/6

What exactly does this one entail because I am not really sure what to do. But happy to try when I understand what I need to do here.

Thanks again Jim Cheers, Ben

[jamestagal]

Hi @jimafisk Sorry to be a pain. I noticed that the right and left arrows buttons in the slider were missing from the code. So I have added them into the hero component and functions for next and previous slides. It seems to work 🎉 but the position of the div isn't quite right. It sits below the dots. But I am not sure how to get them to display higher up.

Also, the slider in the Hugo theme has a 5 sec interval timer which moves each slide along automatically.

I have tried to set this up with the following code but I get an error about the setInterval function: See below.

    const slideInterval = 5000; 

    function startSlideTimer() {
    setInterval(() => {
      activeSlide = (activeSlide + 1) % items.length;
    }, slideInterval);
  }
  startSlideTimer();

 Building... 2023/04/24 21:02:40 build.go:153: 
Error in DataSource build step
Can't create props for content/pages/_index.json 
Can't render htmlComponent for layouts_content_pages_svelte
ReferenceError: setInterval is not defined
    at startSlideTimer (create_ssr:23:3)
    at create_ssr:31:2
    at Object.$$render (create_ssr:1555:22)
    at create_ssr:19:168
    at each (create_ssr:1521:16)
    at create_ssr:19:12
    at Object.$$render (create_ssr:1555:22)
    at create_ssr:87:77
    at $$render (create_ssr:1555:22)
    at Object.render (create_ssr:1563:26)

Pls have a look when you can. Thanks.

Ben