If you're looking for a solution, here's what I came up with: I created a custom solution by linking the thumbnails to the single swiper and rotating them based on the child number of the thumbnails. Check out the code below:
JS CODE
jQuery(document).ready(function($) {
var galleryTop = new Swiper('.gallery-top', {
paginationClickable: true,
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
spaceBetween: 30,
});
// Make first child of div active
$(".portfolios-thumb-wrapper .container .row div:first-child").addClass("active");
// When click on any of the thumbnails with classname 'slide_no' it
// gets the child number of the div and then I just use that number
// to rotate to that specific slide number by 'slideTo' callback
$('.slide_no').each(function (i) {
$(this).click(function (e) {
e.preventDefault();
var thumb = i;
galleryTop.slideTo(thumb, 1000, false);
$('.slide_no').removeClass('active');
$(this).addClass('active');
});
});
});
PHP WITH HTML (WORDPRESS)
<div class="portfolios-wrapper">
<?php if ($postslist->have_posts()) : ?>
<div class="swiper-container gallery-top">
<div class="swiper-wrapper gallery_top_slides">
<?php while ($postslist->have_posts()) : $postslist->the_post(); ?>
<?php
$post_id = $post->ID;
$permalink = get_post_permalink($post_id);
$backgroundImage = get_post_meta($post_id, 'portfolio_background_image', true);
?>
<div class="swiper-slide top_slide_<?php echo $top_counter; ?>" style="background-image: url('<?php echo $backgroundImage; ?>');">
<div class="portfolio-details" style="background-color: transparent">
<div class="container" style="background-color: transparent">
<div class="row">
<div class="col-md-6">
<div class="portfolio-thumb">
<?php echo the_post_thumbnail('large'); ?>
<?php echo the_title('<h2>', '</h2>', true); ?>
</div>
</div>
<div class="col-md-6">
<div class="portfolio-excerpt">
<?php echo the_title('<h2>', '</h2>', true); ?>
<p><?php echo get_the_date('M Y'); ?></p>
<span class="excerpt"><?php echo the_excerpt(); ?></span>
</div>
</div>
</div>
</div>
</div>
</div>
<php $top_counter++; endwhile; ?gt;
</div>
<div class="container custom_adjust">
<div class="swiper-button-next custom-btn-next">Next</div>
<div class="swiper-button-prev custom-btn-prev">Previous</div>
</div>
</div>
<?php endif; ?>
</div>
<div class="portfolios-thumb-wrapper">
<?php if ($postslist->have_posts()) : ?>
<div class="container">
<div class="row">
<?php while ($postslist->have_posts()) : $postslist->the_post(); ?>
<?php if (has_post_thumbnail($post->ID)) : ?>
<?php $image = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'single-post-thumbnail'); ?>
<?php endif; ?>
<div class="col-md-2 slide_no">
<div class="thumb_slide" style="background-image: url('<?php echo $image[0]; ?>')">
</div>
<div class="portfolio-title"><?php echo the_title('<h2>', '</h2>', true); ?> </div>
</div>
<?php $thumb_counter++; endwhile; ?>
</div>
</div>
<?php endif; ?>
</div>