Carousel slider to two column list

I have come across a small issue that I’m dealing with at the moment.

I’m wanting to convert a carousel file slider into a plain two column menu.

Here is the current template:

<img src=”/community/uploads/default/original/3X/b/3/b336b1553c17f1fc91e40160139b68a3fdba7af6.png” width=”690″ height=”141″>

Here is what I would like it to look like:

<img src=”/community/uploads/default/original/3X/5/0/5003bc135e319085cca03b9d1fd05172be63db22.png” width=”536″ height=”376″>

Here is the Javascript code:

“`
function getOneDriveFiles(){
//PnP call here

$pnp.setup({
baseUrl: “BASE URL”
});

$pnp.sp.web.getFolderByServerRelativeUrl(“FOLDER TO GRAB FILES”).files.orderBy(“Name”).get().then(function(f){
console.log(f);

var files = ”;

$.each(f, function(index, value){
var filesHtml = “<div class=’file’>” +
“<a href='” + value.ServerRelativeUrl + “‘><img src=’IMAGE URL’ /></a>” +
“<a href='” + value.ServerRelativeUrl + “‘><p id=’fileTitle’>” + value.Name + “</p></a>” +
“</div></div>”;

files = files + filesHtml;
});

$(“.files”).append(files);

/*$(‘.files’).slick({
dots: true,
infinite: true,
speed: 300,
slidesToShow: 5,
slidesToScroll: 5,
prevArrow:”<img class=”>”,
nextArrow:”<img class=”>”,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: true,
dots: true
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});*/
});
}
“`

HTML Code:

“`
<div>
<hr />
<div class=”files”>
/* BLANK */
</div>
</div>
<script type=”text/javascript” src=”/publiccdnlib/apps/O365-Slider/o365FileSlide.js”></script>
“`

Also in #JavaScript _↴