PRO: 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).

Example JSON: https://api.json-content-importer.com/extra/example-gen-cp-ts/example_events_venues.json
Create a new JCI-Template:
- Name: lightslider
- URL: https://api.json-content-importer.com/extra/example-gen-cp-ts/example_events_venues.json
- twig-Template:

<link type="text/css" rel="stylesheet" href="http://sachinchoolur.github.io/lightslider/src/css/lightslider.css">                  
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://sachinchoolur.github.io/lightslider/src/js/lightslider.js"></script>
<ul id="lightSlider">
{% for d in _context %}
<li>
<img src="{{d.venue.img}}">
</li>
{% endfor %}
</ul>
<script type="text/javascript">
    $.noConflict();
    jQuery( document ).ready(function( $ ) {
        $("#lightSliderDemo").lightSlider({
            speed: 1500,
            auto: true,
            loop: true
        }
    ); 
});
</script>

ATTENTION: 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.

Insert this Shortcode on a WordPress-Page:

[jsoncontentimporterpro nameoftemplate=lightslider]

In Action: