JSON & Slider: How to do it with the jQuery Lightslider-Lib

Your challenge:
You have some URLs to Images in your JSON-Feed. Those images should be displayed in a image-slider.
There are many ways to do that: One way is to use a PRO-slider like Smartslider and feed him with RSS, build out of JSON.

Another way is to use the jQuery lightSlider Library (see also here).

  1. Example JSON: http://api.json-content-importer.com/extra/example-gen-cp-ts/example_events_venues.json
  2. Create a new JCI-Template:
    • Name: lightslider
    • URL: http://api.json-content-importer.com/extra/example-gen-cp-ts/example_events_venues.json
    • twig-Template:
        {% for d in _context %}
      • {% endfor %}

      In this Twig-code are three Script-Tags, loading code from remote servers. You can do that for testing. For a productive website you should host the JS-libs on your own servers!
      • “jquery.min.js” you can add via the JCI-options, Tab “Extra”
      • “lightslider.css” / “lightslider.js” you find at http://sachinchoolur.github.io/lightslider/ at “Download”. In the zip you find a folder “dist”. Copy the files from that (js and css) to your server and insert the URL to the two libs in the JCI-template.
  3. Insert this Shortcode on a WordPress-Page: [jsoncontentimporterpro nameoftemplate=lightslider]

In Action: