Slideshow not working in Deliver theme

Hi, I am starting with Deliver theme. In my fresh GRAV installation, everything seems to work fine but the slideshow on the homepage.

I am using the sample Deliver pages and modify them to suit my data. However, the slideshow does not work even with the original 01.home. The slideshow should display four images, one after another. Instead, the images are displayed at once, one below the other.

This is the Deliver demo:

a this is how the sample 01.home looks in my GRAV:


Is there an option I should turn on / off in site.yaml or system.yaml? I have not done any to them changes yet, except for languages.

Thanks for pointing me in the right direction.

@sue, Did some research for you…

TL;DR: Solution is at the bottom

  • Downloaded the deliver skeleton

  • Slider is working fine…

  • Switched to fresh Grav installation, added theme Deliver and copied pages/01.home from skeleton into fresh installation.

  • Slides are vertically stacked…

  • Opened the developer tools of the browser. Page throws the following error:

    Uncaught SyntaxError: Unexpected token ','            home:110
  • Code at line 110 of home page looks like:

      arrows: ,                   <-- line 110, throwing error
      autoslide: ,
      autoslideHoverStop: ,
      interval: ,
      loop: ,
      pagination: "numbers",
      transition : '',
      itemsForSlide: ,
      touch: ,
      swipe: ,

    Values for the javascript object seem to be empty

  • Javascript object is filled in template ‘/themes/deliver/templates/modular/showcase.html.twig’ and reads the following values from ‘site.yaml’…

     arrows: 'true'               # Create Next and previous button
     autoslide: 'false'           # Auto slideshow mode
     autoslideHoverStop: 'false'  # Pause auto slideshow mode on mouseover
     interval: '2000'             # The interval between each slide (Interval in millisecond)
     loop: false                  # Infinite slideshow
     transition : zoom            # Set the animation kind (fade/slide/page/zoom)
     itemsForSlide: '0'           # Wrap each 'n' item
     touch: 'true'                # Set a native slide for touch device
     swipe : 'true'               # Enable swipe for touch device
  • Solution:
    Copy the above values into ‘user/config/site.yaml’ of your own site and it should work.

Hope this helps…

1 Like

pamtbaau, huge thanks for your time, the piece of code you have posted is way beyond my level of knowledge. The slideshow works (yay!), the only thing that needed fixing was adding inverted commas (`) around false in loop. Without those, it thew another error.