$('.frame').vegas({
preloadImage: true,
autoplay: false,
cover: true,
transition: 'fade',
transitionDuration: 250,
slides: [
{src: 'https://images.unsplash.com/photo-1583771803077-e512cbd2059c?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ'},
{src: 'https://images.unsplash.com/photo-1583858815652-56b390b3a3e6?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ'},
{src: 'https://images.unsplash.com/photo-1584605376366-63f17a36e99e?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ'},
{src: 'https://images.unsplash.com/photo-1585432840537-b8bd65bc6b6a?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ'}
]
});
$('.toggle-slide').on('click', function() {
//console.log($('.frame').vegas('current'));
var c = $('.frame').vegas('current');
var i = $('.toggle-slide').index(this);
var p = parseInt($('.frame').data("prev"));
if (i == c && !isNaN(p)) {
$('.frame').vegas('jump', p);
$('.frame').data("prev", "");
} else {
$('.frame').vegas('jump', i);
$('.frame').data("prev", c);
}
});
body {
background: #333333;
}
.frame {
width: 500px;
height: 500px;
border: 1px red solid;
}
main {
width: 100vw;
height: 100vh;
}
<main>
<button class="toggle-slide">1</button>
<button class="toggle-slide">2</button>
<button class="toggle-slide">3</button>
<button class="toggle-slide">4</button>
<div class="frame"></div>
</main>
<link href="https://cdnjs.cloudflare.com/ajax/libs/vegas/2.4.4/vegas.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vegas/2.4.4/vegas.min.js"></script>