Convertir un carrousel PhP & Js en AJAX

Spookiss
Javascript
PHP

Convertir un carrousel PhP & Js en AJAX

Bonjour,
Je suis sur un projet de visualisation de séquences. J'ai crée un carrousel qui affiche les médias reliée à une séquence sélectionner dans une liste déroulante(je récupère les informations dans une base de données) . J'aimerai passer ce carrousel en AJAX, j'aimerai donc savoir si vous aviez des conseils ou des astuces pour m'aider à avancer merci d'avance.

Le script qui affiche les médias :

function loadImage()
        { 
        var i=0;
        var files = <?php echo json_encode($fichier)?>;
        console.log(files);
        var ordre =6;
         for(i;i<=ordre;i++){
         var type=files[i]['Type'];
         var nI = "media/"+files[i][0];  // remettre le chemin et ajouter le préfixe "
         console.log(nI);
         switch (type){
            case 'video':
                var str = "<video width='1280' height='720' autoplay><source src='"+nI+"' type=video/mp4></video>";
                break;
            case 'image':
                var str ="<img src='"+nI+"'/>";
                console.log(nI);
                break;
            }
         document.getElementById("slide-"+(i+1)).innerHTML = str;
        }
    }

le carrousel :

 <div class="slider">
    <a href="#slide-1">1</a>
    <a href="#slide-2">2</a>
    <a href="#slide-3">3</a>
    <a href="#slide-4">4</a>
    <a href="#slide-5">5</a>
    <div class="slides" >
        <div id="slide-1">

        <div id="output"></div>
        </div>
        <div id="slide-2">
            <img id="diapo2"/>
        </div>
        <div id="slide-3">
            <img id="diapo3"/>
        </div>
        <div id="slide-4">
            <img id="diapo4"/>
        </div>
        <div id="slide-5">
            <img id="diapo5"/>
        </div>
    </div>
</div>

la requête qui récupère les noms des médias :

<?php
    $media = $db->prepare('SELECT est_constitue_de.nom_fichier, est_constitue_de.ordre, est_constitue_de.dure, fichier_media.Type
    FROM est_constitue_de, fichier_media
    WHERE est_constitue_de.Nom_seq = ?
    AND est_constitue_de.nom_fichier=fichier_media.nom_fichier');

    $media->execute(array($seq));
    $fichier = $media->fetchAll();
    // var_dump($fichier);
    $media->closeCursor();

?>

Ce que je veux

J'aimerais pouvoir convertir mon affichage de médias dans le caroussel en AJAX pour que la page ne s'actualise plus lorsque je change de séquence.

Ce que j'obtiens

J'ai essayer avec des tutos en ligne mais malheuresement je n'ai pas réussi à faire en sorte que ça fonctionne

Aucune réponse