Looking to place each div in a jssor carousel slider

Question

So I've got a JSON feed which i'm drawing down into seperate divs. What I'm looking to do is set the divs into a jquery carousel slider. The idea being that each div is one slide. Sadly this doesn't seem to be splitting them up how I'd like.

I've tried using the Jssor slider to achieve this but I'm not having much luck.

I considered seeing if there is a way to get each loop draw down into a seperate div completely rather than into the container div as then i could call the multiple container divs into each slide if that makes sense?

I'll show my code as it exists currently, if anyone could offer any pointers or adjustments it would be really appreciated.

 <!-- National Bullet Points-->
<script>

    let dataloft_national_bullets_url =
        'https://inform.dataloft.co.uk/api/BAh7CEkiCGdpZAY6BkVUSSIrZ2lkOi8vaW5mb3JtL1VzZXJBcmVhLzI2NzM2P2V4cGlyZXNfaW4GOwBUSSIMcHVycG9zZQY7AFRJIgxkZWZhdWx0BjsAVEkiD2V4cGlyZXNfYXQGOwBUMA==--36ebf74c32194c59ad4a7d9fb89db230a66efadf/V8UDrS9mIAVkNJcgBI3e3Q/national_bullets';

    fetch(dataloft_national_bullets_url)
        .then((response) => response.json())
        .then((payload) => {
            let container = document.getElementById(
                'national_bullets_target_container'
            );

            for (const chapter in payload.data) {
                const data = document.createElement('div');
                

                let header = document.createElement('h1');
                header.appendChild(document.createTextNode(chapter));
                data.appendChild(header);

                for (const paragraph in payload.data[chapter]) {
                    let para = document.createElement('li');
                    para.appendChild(
                        document.createTextNode(payload.data[chapter][paragraph])
                    );
                    data.appendChild(para);
                }

                container.appendChild(data);
            }
        });

</script>

As for the Jquery for the slider and HTML is looks like the following:

<div id="jssor_9" style="position:relative;margin:0 auto;top:10px;left:0px;width:900px;height:500px;overflow:hidden;visibility:hidden;">
                            <!-- Loading Screen -->
                            <script type="text/javascript">

                                jssor_9_slider_init = function () {

                                    var jssor_9_SlideoTransitions = [
                                        [{ b: -1, d: 1, o: -0.7 }],
                                        [{ b: 900, d: 2000, x: -379, e: { x: 7 } }],
                                        [{ b: 900, d: 2000, x: -379, e: { x: 7 } }],
                                        [{ b: -1, d: 1, o: -1, sX: 2, sY: 2 }, { b: 0, d: 900, x: -171, y: -341, o: 1, sX: -2, sY: -2, e: { x: 3, y: 3, sX: 3, sY: 3 } }, { b: 900, d: 1600, x: -283, o: -1, e: { x: 16 } }]
                                    ];

                                    var jssor_9_options = {
                                        $AutoPlay: 1,
                                        $SlideDuration: 800,
                                        $SlideEasing: $Jease$.$OutQuint,
                                        $ArrowNavigatorOptions: {
                                            $Class: $JssorArrowNavigator$
                                        },
                                        $BulletNavigatorOptions: {
                                            $Class: $JssorBulletNavigator$
                                        }
                                    };

                                    var jssor_9_slider = new $JssorSlider$("jssor_9", jssor_9_options);

                                    /*#region responsive code begin*/

                                    var MAX_WIDTH = 1000;

                                    function ScaleSlider() {
                                        var containerElement = jssor_9_slider.$Elmt.parentNode;
                                        var containerWidth = containerElement.clientWidth;

                                        if (containerWidth) {

                                            var expectedWidth = Math.min(MAX_WIDTH || containerWidth, containerWidth);

                                            jssor_9_slider.$ScaleWidth(expectedWidth);
                                        }
                                        else {
                                            window.setTimeout(ScaleSlider, 30);
                                        }
                                    }

                                    ScaleSlider();

                                    $Jssor$.$AddEvent(window, "load", ScaleSlider);
                                    $Jssor$.$AddEvent(window, "resize", ScaleSlider);
                                    $Jssor$.$AddEvent(window, "orientationchange", ScaleSlider);
                                    /*#endregion responsive code end*/
                                };


                            </script>

                            <div data-u="loading" class="jssor9-009-spin" style="position:absolute;top:0px;left:0px;width:100%;height:100%;text-align:center;background-color:rgba(0,0,0,0.7);">
                                <img style="margin-top:-19px;position:relative;top:50%;width:38px;height:38px;" src="https://www.tortoiseproperty.co.uk/Content/img/spin.svg" alt="loading" />
                            </div>
                           
                            <div data-u="slides" id="national_bullets_target_container" style="cursor:default;position:relative;top:0px;left:0px;width:900px;height:500px;overflow:hidden;">

                         
                            </div>


                            
                                <!-- Arrow Navigator -->
                                <div data-u="arrowleft" class="jssora051" style="width:65px;height:65px;top:0px;left:35px;" data-autocenter="2" data-scale="0.75" data-scale-left="0.75">
                                    <svg viewBox="0 0 16000 16000" style="position:absolute;top:0;left:-50px;width:100%;height:100%;">
                                        <polyline class="a" points="11040,1920 4960,8000 11040,14080 "></polyline>
                                    </svg>
                                </div>
                                <div data-u="arrowright" class="jssora051" style="width:65px;height:65px;top:0px;right:-20px;" data-autocenter="2" data-scale="0.75" data-scale-right="0.75">
                                    <svg viewBox="0 0 16000 16000" style="position:absolute;top:0;left:0;right:50px;width:100%;height:100%;">
                                        <polyline class="a" points="4960,1920 11040,8000 4960,14080 "></polyline>
                                    </svg>
                                </div>

                            </div>
                        <script type="text/javascript">jssor_9_slider_init();</script>

Any advice would be great!