Hello all, I'm working on a display module for jomsocial events to take it to the FUTURE, and I am looking to see if anyone would like to help.

It's based on the current jomsocial Suggested Events, however, I'd like to show the newest upcoming event first to the oldest.
Second, I'm trying to make the module display the event cover in Verticle not Horizontally is should have a different size of 1080 pixels wide by 1920 pixels tall (similar to Reels, Shorts, and Stories). The module should only show the event image that someone can click and it takes them to the event.
Lastly, I'm trying to have swipe up or down to move to the next event, and Left to see the full event, Swiping right opens the person's profile.

Here's what I came up with but when I zip the folder it doesn't work.

XML

<field
name="show_toggle"
type="list"
default="1"
label="COM_COMMUNITY_EVENTS_SUGGESTIONS_SHOW_TOGGLE"
description="COM_COMMUNITY_EVENTS_SUGGESTIONS_SHOW_TOGGLE_DESC"
class="btn-group hasTip toggle"

CSS

.moduletable_events_suggestions .toggle label {
border-radius: 4px;
border: 1px solid #ccc;
background-color: #f1f1f1;
color: #333;
padding: 4px 10px;
cursor: pointer;
display: inline-block;
margin-right: 10px;
}

.moduletable_events_suggestions .toggle label:hover {
background-color: #ddd;
}

.moduletable_events_suggestions .toggle input[type="radio"] {
display: none;
}

.moduletable_events_suggestions .toggle input[type="radio"]:checked + label {
background-color: #46A6EB;
color: #fff;
}

or this one:

.moduletable_events_suggestions .event-suggestion-item .event-suggestion-image {
display: block;
height: auto;
width: 100%;
max-width: 100%;
max-height: 300px;
margin: 0 auto;
}

.event-suggestion-item .event-suggestion-name {
font-weight: bold;
text-transform: uppercase;
text-align: center;
margin-top: 10px;
}

.event-suggestion-item .event-suggestion-date {
text-align: center;
text-transform: capitalize;
margin-top: 5px;
}

.event-suggestion-item .event-suggestion-buttons {
display: flex;
justify-content: space-between;
margin-top: 10px;
}

.event-suggestion-item .event-suggestion-buttons .button {
padding: 10px;
color: #fff;
border-radius: 5px;
text-transform: uppercase;
font-weight: bold;
font-size: 14px;
}

.event-suggestion-item .event-suggestion-buttons .get-ticket {
background-color: #F64747;
}

.event-suggestion-item .event-suggestion-buttons .sponsor {
background-color: #46A6EB;
}

.event-suggestion-item .event-suggestion-buttons .view-event {
background-color: #E67E22;
}