jQuery swipe-tabs content changing on tab "swipe" & Reverse swipe content change

Dear jQuery & JS experts I need your Help!

I have been stuck in functionality on the jQuery swipe-tab library. is it possible to change the content under tabs on "swipe" on the tab li or tab button?

Here by I am listing down the external sources, I have used and the source code I made below.

1. Bootstrap v4.0.0 2.jQuery v3.1.0
2. Swipe tab JQuery library.

enter image description here

<!-- Stack Section Begins -->
<section id="technologies">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 col-md-12 col-12">
                <h5>Technology Stack</h5>
                <p class="text-center">
                    Stay ahead with the latest technologies<br />
                    Our highly skilled developers and architects use the latest technology to deliver results that exceed expectations.
                </p>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12 col-md-12 col-12">
                <div class="tabs">
                    <div class="sub-header">
                        <ul class="swipe-tabs">
                            <li class="swipe-tab nav-link">Frontend</li>
                            <li class="swipe-tab nav-link">Backend</li>
                            <li class="swipe-tab nav-link">Mobile</li>
                            <li class="swipe-tab nav-link">Database</li>
                            <li class="swipe-tab nav-link">CMS</li>
                            <li class="swipe-tab nav-link">DevOps</li>
                            <li class="swipe-tab nav-link">Cloud</li>
                        </ul>
                    </div>
                    <div class="main-container">
                        <div class="swipe-tabs-container">
                            <div class="swipe-tab-content">
                                <div class="container-fluid">
                                  <div class="row d-flex justify-content-center">
                                    <div class="col-lg-2 col-md-3 col-6">
                                        <div class="tech-div">
                                            <img src="assets/images/angular.svg" alt="angular" />
                                        </div>
                                    </div>
                                    <div class="col-lg-2 col-md-3 col-6">
                                        <div class="tech-div">
                                            <img class="img-fluid" src="assets/images/vue.svg" alt="vue" />
                                        </div>
                                    </div>
                                    <div class="col-lg-2 col-md-3 col-6">
                                        <div class="tech-div">
                                            <img class="img-fluid" src="assets/images/react.svg" alt="react" />
                                        </div>
                                    </div>
                                    <div class="col-lg-2 col-md-3 col-6">
                                        <div class="tech-div">
                                            <img class="img-fluid" src="assets/images/jquery.svg" alt="jquery" />
                                        </div>
                                    </div>
                                    <div class="col-lg-2 col-md-3 col-6">
                                        <div class="tech-div">
                                            <img class="img-fluid" src="assets/images/bootstrap.svg" alt="bootstrap" />
                                        </div>
                                    </div>
                                    <div class="col-lg-2 col-md-3 col-6">
                                        <div class="tech-div">
                                            <img class="img-fluid" src="assets/images/html-css-js.svg" alt="css" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="swipe-tab-content">
                            <div class="container-fluid">
                                <div class="row d-flex justify-content-center">
                                    <div class="col-lg-2 col-md-3 col-6">
                                        <div class="tech-div"><img class="img-fluid" src="assets/images/asp-net.svg" alt="ASP.NET" />&emsp;</div>
                                    </div>
                                    <div class="col-lg-2 col-md-3 col-6">
                                        <div class="tech-div"><img class="img-fluid" src="assets/images/java.svg" alt="Java" />&emsp;&emsp;</div>
                                    </div>
                                    <div class="col-lg-2 col-md-3 col-6">
                                        <div class="tech-div"><img class="img-fluid" src="assets/images/nodejs.svg" alt="nodejs" />&emsp;</div>
                                    </div>
                                    <div class="col-lg-2 col-md-3 col-6">
                                        <div class="tech-div">
                                            <img src="assets/images/python.svg" alt="python" />
                                        </div>
                                    </div>
                                    <div class="col-lg-2 col-md-3 col-6">
                                        <div class="tech-div"><img class="img-fluid" src="assets/images/php.svg" alt="php" />&emsp;</div>
                                    </div>
                                    <div class="col-lg-2 col-md-3 col-6">
                                        <div class="tech-div">
                                            <img class="img-fluid" src="assets/images/ruby-rails.svg" alt="rails" />
                                        </div>
                                    </div>
                                    <div class="col-lg-2 col-md-3 col-6">
                                        <div class="tech-div">
                                            <img class="img-fluid" src="assets/images/go.svg" alt="rails" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="swipe-tab-content">
                            <div class="container-fluid">
                                <div class="row d-flex justify-content-center">
                                    <div class="col-lg-2 col-md-3 col-6">
                                        <div class="tech-div"><img class="img-fluid" src="assets/images/flutter.svg" alt="flutter" />&emsp;</div>
                                    </div>
                                    <div class="col-lg-2 col-md-3 col-6">
                                        <div class="tech-div"><img class="img-fluid" src="assets/images/android.svg" alt="android" />&emsp;&emsp;</div>
                                    </div>
                                    <div class="col-lg-2 col-md-3 col-6">
                                        <div class="tech-div"><img class="img-fluid" src="assets/images/ios.svg" alt="ios" />&emsp;</div>
                                    </div>
                                    <div class="col-lg-2 col-md-3 col-6">
                                        <div class="tech-div"><img class="img-fluid" class="reactnative" src="assets/images/reactnative.svg" alt="reactnative" />&emsp;</div>
                                    </div>
                                    <div class="col-lg-2 col-md-3 col-6">
                                        <div class="tech-div"><img class="img-fluid" class="xamarin" src="assets/images/xamarin.svg" alt="xamarin" />&emsp;</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="swipe-tab-content">
                            <div class="container-fluid">
                                <div class="row d-flex justify-content-center">
                                    <div class="col-lg-2 col-md-3 col-6">
                                        <div class="tech-div"><img class="img-fluid" src="assets/images/mysql.svg" alt="mysql" />&emsp;</div>
                                    </div>
                                    <div class="col-lg-2 col-md-3 col-6">
                                        <div class="tech-div"><img class="img-fluid" src="assets/images/postgresql.svg" alt="PostgreSQL" />&emsp;</div>
                                    </div>
                                    <div class="col-lg-2 col-md-3 col-6">
                                        <div class="tech-div"><img class="img-fluid" src="assets/images/mongodb.svg" alt="mongodb" />&emsp;</div>
                                    </div>
                                    <div class="col-lg-2 col-md-3 col-6">
                                        <div class="tech-div"><img class="img-fluid" src="assets/images/dynamodb.svg" alt="dynamodb" />&emsp;</div>
                                    </div>
                                    <div class="col-lg-2 col-md-3 col-6">
                                        <div class="tech-div"><img class="img-fluid" src="assets/images/redis.svg" alt="redis" />&emsp;</div>
                                    </div>
                                    <div class="col-lg-2 col-md-3 col-6">
                                        <div class="tech-div"><img class="img-fluid" src="assets/images/ElasticSearch.svg" alt="ElasticSearch" />&emsp;</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="swipe-tab-content">
                            <div class="container-fluid">
                                <div class="row d-flex justify-content-center">
                                    <div class="col-lg-2 col-md-3 col-6">
                                        <div class="tech-div"><img class="img-fluid" src="assets/images/magento.svg" alt="magento" />&emsp;</div>
                                    </div>
                                    <div class="col-lg-2 col-md-3 col-6">
                                        <div class="tech-div"><img class="img-fluid" src="assets/images/woocommerce.svg" alt="woocommerce" />&emsp;</div>
                                    </div>
                                    <div class="col-lg-2 col-md-3 col-6">
                                        <div class="tech-div"><img class="img-fluid" src="assets/images/opencart.svg" alt="opencart" />&emsp;</div>
                                    </div>
                                    <div class="col-lg-2 col-md-3 col-6">
                                        <div class="tech-div"><img class="img-fluid" src="assets/images/shopify.svg" alt="shopify" />&emsp;</div>
                                    </div>
                                    <div class="col-lg-2 col-md-3 col-6">
                                        <div class="tech-div"><img class="img-fluid" src="assets/images/wordpress.svg" alt="wordpress" />&emsp;</div>
                                    </div>
                                    <div class="col-lg-2 col-md-3 col-6">
                                        <div class="tech-div"><img class="img-fluid" src="assets/images/joomla.svg" alt="joomla" />&emsp;</div>
                                    </div>
                                    <div class="col-lg-2 col-md-3 col-6">
                                        <div class="tech-div"><img class="img-fluid" src="assets/images/durpal.svg" alt="durpal" />&emsp;</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="swipe-tab-content">
                            <div class="container-fluid">
                                <div class="row d-flex justify-content-center">
                                    <div class="col-lg-2 col-md-3 col-6">
                                        <div class="tech-div"><img class="img-fluid" src="assets/images/kubernetes.svg" alt="kubernetes" />&emsp;</div>
                                    </div>
                                    <div class="col-lg-2 col-md-3 col-6">
                                        <div class="tech-div"><img class="img-fluid" src="assets/images/docker.svg" alt="docker" />&emsp;</div>
                                    </div>
                                    <div class="col-lg-2 col-md-3 col-6">
                                        <div class="tech-div"><img class="img-fluid" src="assets/images/terraform.svg" alt="terraform" />&emsp;</div>
                                    </div>
                                    <div class="col-lg-2 col-md-3 col-6">
                                        <div class="tech-div"><img class="img-fluid" src="assets/images/chef.svg" alt="chef" />&emsp;</div>
                                    </div>
                                    <div class="col-lg-2 col-md-3 col-6">
                                        <div class="tech-div"><img class="img-fluid" src="assets/images/puppet.svg" alt="puppet" />&emsp;</div>
                                    </div>
                                    <div class="col-lg-2 col-md-3 col-6">
                                        <div class="tech-div"><img class="img-fluid" src="assets/images/ansible.svg" alt="ansible" />&emsp;</div>
                                    </div>
                                    <div class="col-lg-2 col-md-3 col-6">
                                        <div class="tech-div"><img class="img-fluid" src="assets/images/ZABBIX.svg" alt="ZABBIX" />&emsp;</div>
                                    </div>
                                    <div class="col-lg-2 col-md-3 col-6">
                                        <div class="tech-div"><img class="img-fluid" src="assets/images/Prometheus.svg" alt="Prometheus" />&emsp;</div>
                                    </div>
                                    <div class="col-lg-2 col-md-3 col-6">
                                        <div class="tech-div"><img class="img-fluid" src="assets/images/AWSCloudFormation.svg" alt="AWSCloudFormation" />&emsp;</div>
                                    </div>
                                    <div class="col-lg-2 col-md-3 col-6">
                                        <div class="tech-div"><img class="img-fluid" src="assets/images/Grafana.svg" alt="Grafana" />&emsp;</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="swipe-tab-content">
                            <div class="container-fluid">
                                <div class="row d-flex justify-content-center">
                                    <div class="col-lg-2 col-md-3 col-6">
                                        <div class="tech-div"><img class="img-fluid" src="assets/images/aws-cloud.svg" alt="aws" />&emsp;</div>
                                    </div>
                                    <div class="col-lg-2 col-md-3 col-6">
                                        <div class="tech-div"><img class="img-fluid" src="assets/images/azure-cloud.svg" alt="azure" />&emsp;</div>
                                    </div>
                                    <div class="col-lg-2 col-md-3 col-6">
                                        <div class="tech-div"><img class="img-fluid" src="assets/images/google-cloud.svg" alt="gcp" />&emsp;</div>
                                    </div>
                                    <div class="col-lg-2 col-md-3 col-6">
                                        <div class="tech-div"><img class="img-fluid" src="assets/images/ibm-cloud.svg" alt="ibm" />&emsp;</div>
                                    </div>
                                    <div class="col-lg-2 col-md-3 col-6">
                                        <div class="tech-div"><img class="img-fluid" src="assets/images/oracle-cloud.svg" alt="ibm" />&emsp;</div>
                                    </div>
                                    <div class="col-lg-2 col-md-3 col-6">
                                        <div class="tech-div"><img class="img-fluid" src="assets/images/digital-ocean.svg" alt="ibm" />&emsp;</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>