how to make recently-viewed products swipe on mobile view (urgent help)

[masooma12]

hey guys this is my recently viewed products i want it to make go swipe in mobile view 

main

and this is how i want it 

this is my code 

<script>
    // First Block
    function setRecentlyViewedPdp() {
        const pdpData = {
            productTitle : "{{ product.title }}",
            productImg : "{{ product.featured_image | image_url: width: 500 }}",
            productPrice : "{{ product.price | money | remove_first: '' }}",
            productUrl : "{{ product.url }}"
        };
 
        // Init Empty Array to push data
        const productArr = [];
        // Create a couple of variables
        let jsonResp,
            jsonRespArr,
            jsonRespArrStr;
        // Set the number how many products you want to capture
        const numberOfProduct = 4;
        // Now push the pdpData into Array so that we can use it
        productArr.push(pdpData);
        // Get the product title from pdpData
        const currPdpTitle = pdpData.productTitle;
        // Now Convert current page data into Strings which we already pushed in Array
        const pdpDataString = JSON.stringify(productArr);
        // Set the variable for localStorage
        const localData = localStorage.getItem('recently_viewed');
     
        // Second Block
        // first we need to check data if data is not there then store right away
        if (localData == null) {
            localStorage.setItem('recently_viewed', pdpDataString);
           
        }
        // If data is there then we need to check couple of other conditions
        else if ( localData != null ) {
           
            // Create Variable for oldData or Previous page
            const oldPdpData = localStorage.getItem('recently_viewed');
            // Count the amount of data stored in strings so that we can remove old products from the stack
            const countPdpData = (oldPdpData.match(/productTitle/g) || []).length;
            // we also need to check if user is not visiting page again
            const reVisitPdp =  oldPdpData.includes(currPdpTitle);
            // Get old data, merged it with new data and store merged data
            if (countPdpData < numberOfProduct && reVisitPdp == false) {
                jsonResp = JSON.parse(oldPdpData);
                jsonRespArr = jsonResp.concat(productArr);
                jsonRespArrStr = JSON.stringify(jsonRespArr);
                localStorage.setItem('recently_viewed', jsonRespArrStr);
            }
            // If User visited more than 4 pages delete first page data
            else if (countPdpData >= numberOfProduct && reVisitPdp == false) {
                jsonResp = JSON.parse(oldPdpData);
                jsonResp.shift();
                jsonRespArr = jsonResp.concat(productArr);
                jsonRespArr =  JSON.stringify(jsonRespArr);
                localStorage.setItem('recently_viewed', jsonRespArr);
            }
        }
    }
   
    // Now we write all our function and it's time to execute it
    setRecentlyViewedPdp();
    // Set Variable for Local Storage Data
    const localViewed = localStorage.recently_viewed;
    // console.log to verify the data
</script>
<div class="recently-title">
  <h2 class="title inline-richtext h2 scroll-trigger animate--slide-in tw-text-[24px] tw-pt-[50px] tw-border-t-[1px] tw-border-solid tw-border-gray-300 ">
    <b>Recently Viewed</b>
  </h2>
</div>
<div class="js-recentPdpBlock min-[750px]:tw-grid min-[750px]:tw-grid-cols-4 min-[750px]:tw-gap-[var(--grid-desktop-horizontal-spacing)]  max-[576px]:tw-grid  max-[576px]:tw-grid-cols-2  max-[576px]:tw-gap-[var(--grid-desktop-horizontal-spacing)] "></div>
<script>
    // Third Block
    function getRecentPdp (){
 
        // First let's convert localStorage data into object again
        const pdpData = JSON.parse(localStorage.getItem('recently_viewed'));
        console.log(pdpData)
        // Create a empty Array
        const recentViewHtml = []
        // Loop through all the data and inject into HTML using ES6
        pdpData.forEach(function(item){
            recentViewHtml.push(`
                <section id="Recent">
                <div class="c-product tw-pointer">
                    <div class="c-product__img ">
                    <a href="${item.productUrl}"><img class="tw-w-full tw-object-cover" style="height:auto; object-fit:cover" src='${item.productImg}'/></a>
                    </div>
 
                       <h3 class="c-product__title tw-pt-[12px] tw-pb-[10px] tw-line-[0px] " >
                        <a class="c-product__url tw-text-[#000000] tw-no-underline"  href="${item.productUrl}">
                        ${item.productTitle}
                        </a>
                       </h3>
                      <p class="c-productPrice tw-m-[0px] tw-line-[0px] tw-text-[#000000]   " >${item.productPrice}</p>
                    </div>
     
               
               
                </section>
            `)
        })
        // Now consolidate the data
        const recentBlock = `${recentViewHtml.join('')}`
        // console.log() to check data is correct
        console.log(recentBlock);
        // Inject into PDP page
        const contentBlock = document.querySelectorAll('.js-recentPdpBlock');
        // Push the data
        contentBlock.forEach(element =>{
            element.innerHTML = recentBlock;
        })
       
    }
    // Execute this function on DOM content load
 
    getRecentPdp();
</script>

[GTLOfficial]

@masooma12  Send me the Url of your website. i need to check the theme of your store.