How can I integrate a swiper slider into my announcement bar JS file?

[Deep0617]

I create Shopify announcement bar app and simple  announcement bar work done in storefront,

Here is the code of simple bar..

  $(document).find('head').append('<style>.announcement_header{position: fixed;top: 0;left: 0;right: 0;z-index: 9999 !important;text-align: center;margin-bottom: 1px;}.announcement_main{background-color: ' + back_color + '; background-repeat: no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; color: ' + result.record['text_color'] + ';}.announcement_text{color: ' + result.record['text_color'] + ';font-family: Trebuchet MS, Helvetica, sans-serif;font-weight: bold;font-size:1.5vw;text-align: center;}.announcement_button{color:'+ result.record['btn_text_color']+';background-color:'+result.record['btn_background_color']+' ; border: 0;line-height: 2.8;font-weight: bold;padding: 0 10px;font-size: 1.8rem; border-radius: 12px;text-decoration:none;}</style>');

               

   $(document).find('body').prepend('<div class="announcement_main announcement_header"><div class="announcement_text">' + result.record['message'] + '  <a type="button" class ="announcement_button" href="'+result.record['btn_url']+'">'+ result.record['btn_text']+ '</a></div></div>');

But i want to also show more than one slide to storefront theme

I use swiper slider to show slider bar  but slider announcement bar not work , how can I add swiper in my Js file? @shopify @Anonymous  

I use swiper Slider from this.

https://codesandbox.io/s/swiper-manipulation-forked-rlvt82?file=/index.html:260-357