J'avais raté ça.

Une todo list basique

Pour les fichiers json, avant toute chose, pensez à convertir les caractères accentués (é en \u00e9e par exemple).
Si vous ne savez pas la correspondance, json_encode en php peut vous aider :

$a = array('é','è','à');
foreach($a as $k => $v) {
     var_dump(str_replace('"','',json_encode($v)) );
}

Quand vous avez un gros fichier (plus de 20 000 entrées) à lire en ajax (avec dataTable.js par exemple), si le fichier est présenté de la façon suivante, le navigateur a une chance sur 2 de planter en cours de lecture :

{
   "data": 
         [
            [
                 "donn\u00e9ee 1",
                 "donn\u00e9ee 2",
                 "donn\u00e9ee 3",
                 "donn\u00e9ee 4",
                 "donn\u00e9ee 5"
            ],
            [
                 "donn\u00e9ee 1.1",
                 "donn\u00e9ee 2.2",
                 "donn\u00e9ee 3.3",
                 "donn\u00e9ee 4.4",
                 "donn\u00e9ee 5.5"
            ],
            (...),
            [
                 "donn\u00e9ee n1",
                 "donn\u00e9ee n2",
                 "donn\u00e9ee n3",
                 "donn\u00e9ee n4",
                 "donn\u00e9ee n5"
            ]
        ]
}

Il vaut mieux les présenter sur une ligne par entrée. Là, ça passe car il y a moins de lignes à lire :

{
   "data": [
            [ "donn\u00e9ee 1", "donn\u00e9ee 2", "donn\u00e9ee 3", "donn\u00e9ee 4",  "donn\u00e9ee 5"],
            [ "donn\u00e9ee 1.1", "donn\u00e9ee 2.2", "donn\u00e9ee 3.3",  "donn\u00e9ee 4.4", "donn\u00e9ee 5.5"],
            (...),
            [ "donn\u00e9ee n1", "donn\u00e9ee n2", "donn\u00e9ee n3",  "donn\u00e9ee n4", "donn\u00e9ee n5"]

        ]
}

C'est tout con, mais j'ai passé ma matinée à trouver comment faire :-p

Un slider simplissime par Timo en css et js sans aucune dépendance.
Merci.

<div id="my-slider">
    <div id="my-slider-inner">
       <img src="<a href="https://picsum.photos/570/270/?random&1&quot">https://picsum.photos/570/270/?random&1&quot</a>; alt="Slide 1" />
       <img src="<a href="https://picsum.photos/570/270/?random&2&quot">https://picsum.photos/570/270/?random&2&quot</a>; alt="Slide 2" /> 
       <img src="<a href="https://picsum.photos/570/270/?random&3&quot">https://picsum.photos/570/270/?random&3&quot</a>; alt="Slide 3" />
       <img src="<a href="https://picsum.photos/570/270/?random&4&quot">https://picsum.photos/570/270/?random&4&quot</a>; alt="Slide 4" /> 
       <img src="<a href="https://picsum.photos/570/270/?random&5&quot">https://picsum.photos/570/270/?random&5&quot</a>; alt="Slide 5" /> 
       <img src="<a href="https://picsum.photos/570/270/?random&6&quot">https://picsum.photos/570/270/?random&6&quot</a>; alt="Slide 6" /> 
       <img src="<a href="https://picsum.photos/570/270/?random&7&quot">https://picsum.photos/570/270/?random&7&quot</a>; alt="Slide 7" />
    </div>
</div>
<style>
#my-slider {
    width: 570px;
    height: 270px;
    overflow: hidden;
    font-size: 0;
    margin: 0 auto;
}

#my-slider-inner {
    white-space: nowrap;
    transition: margin 1s ease 0s;
}

#my-slider > #my-slider-inner > img {
    display: inline-block;
    width: 570px;
    height: 270px;
}
</style>
<script>
'use strict'
// amount of images in the slider :
var amountImg = 7;
// width of one image (in pixels)
var widthImg = 570;
// waiting interval (in milliseconds)
var waitTime = 4000;

var deltaX = 0;
var slider = document.getElementById('my-slider');

 window.setInterval(doSlide, waitTime);

function doSlide() {
    deltaX += widthImg;
    deltaX %= amountImg*widthImg;
    console.log(deltaX);
    slider.querySelector('#my-slider-inner').style.marginLeft = '-' + deltaX + 'px';
}
</script>

Pour des tableaux "responsives". À tester avec des tableaux plus complexes...

Avec un peu de javascript.