We have an unofficial WordPress plugin that will convert your plain event list widget into a sliding carousel, as seen on our demo home page: https://demo.vbotickets.com/

To do this, you need to be comfortable with installing a plugin from a zip file, and editing some basic javascript code in the plugin. 


I will walk you through all the steps in this video: Watch the video here

After watching that video, you can copy the HTML and CSS that's used on our demo example here:

HTML


<div class='event'>
<div class='eventwrapper'>
<div class='column-1'>{POSTER}</div>
<div class='column-2'>
<div class='event-name'>{EVENTNAME}</div>
<div class='event-date'>{EVENTDATE}</div>
<div class='event-button'>{BUTTON}</div>
</div>
</div>
</div>

CSS


.vbo-row { width: 100%; max-width: 1140px; margin: 0 auto; }
.upcoming-events:after { content: ""; visibility: hidden; height: 0; display: block; clear: both; }

.vbo-md-3,
.vbo-md-4 { float: left; min-height: 1px; padding: 0 15px; position: relative; }
.vbo-sm-1 { width: 8.33%; }

@media only screen and (min-width: 768px) {
.vbo-md-3 { width: 25%; }
.vbo-md-4 { width: 33.33%; }
}

.column-1 { min-height: 320px; max-height: 320px; overflow: hidden; }

.eventwrapper { background: #fff; padding: 10px; box-shadow: 0 1px 9px rgba(0,0,0,0.45); }
.event-name { color: #1e1e1e; font-size: 17px; font-weight: normal; height: 30px; white-space: nowrap; width: 100%; line-height: 1.4; text-overflow: ellipsis; margin-top: 10px; overflow: hidden; }
.event-date { font-size: 12px; color: #888; margin-bottom: 5px; }
.event-button { text-align: center; }
.event-button a { display: block; color: #fff; background: #7FC241; border-radius: 3px; text-transform: uppercase; padding: 6px; font-weight: 600; }
.event-button a:hover { background: #a5d677; text-decoration: none; }

.owl-theme .owl-dots .owl-dot.active span { background-color: #7FC241; }

That's it! Once you follow all those steps, the event widget on your web page will automatically display in a sliding carousel.