Slideshow not working in Deliver theme

Support Themes & Styling
1

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: https://demo.getgrav.org/deliver-skeleton/

slideshow01
slideshow01600×559 35.1 KB

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

slideshow

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.

2

@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:

    $('#content-slide').slideme({
  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’…

    header_options:
 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
3

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.