title: Understanding how this javascript slideshow works with key value pairs
body: <p>This may seem like a bit of a newbie question, but I’ve just started a new job and am trying to understand more about and roughly how the following javascript code works:</p>
  
  <pre><code>app.placementOptions["cycleslideshow"] = {
      ".cycle-slideshow" : {
              speed: 500
            , timeout: 8000
            , fx: "fade"
            , pager: ".decoration-right"
      },
      ".regen-slideshow .cycle-slideshow" : {
              speed: 800
            , timeout: 12000
            , fx: "scrollHorz"
            , pager: ".decoration-right"
      }
    };
  </code></pre>
  
  <p>Note that this above code apparently styles the slideshow buttons to be the small circles at the bottom right of the area above the fold on this site: <a href="https://www.ccht.org.uk" rel="nofollow noreferrer">https://www.ccht.org.uk</a></p>
  
  <p>And the full JS for that is here: <a href="https://www.ccht.org.uk/js/plugins.js" rel="nofollow noreferrer">https://www.ccht.org.uk/js/plugins.js</a></p>
  
  <p>Can someone explain what the snippet code roughly does? What is it? Is it JavaScript OOP with key value pairs? Can someone link to an article to help me read up about it? My employer may use BX Slider: <a href="https://bxslider.com" rel="nofollow noreferrer">https://bxslider.com</a></p>
  
  <p>I was told that this part of the code is key: <code>pager: ".decoration-right"</code> - the company uses the LESS CSS preprocessor if that makes a difference.</p>
  
  <p>And is Stack Overflow the right place to put this kind of question that has no actual solution (not that I won't accept any answer)? Hopefully it won't get closed as being broad. Thanks for any advice here.</p>