将鼠标悬停在swiper滑块上的下一个和上一个按钮时，需要显示下一个和上一个图像

Question

我想要显示下一个滑块图像预览，并且应该有下一个和上一个按钮。当我将鼠标悬停在上一个按钮上时，之前的图像应该在下一个图像预览上进行。然后，当我徘徊在下一个图像shouuld返回..

我已尝试在swiper滑块中制作但无法达到预期效果。

您的帮助将不胜感激..

HTML                 

            <div class="main-slider swiper-container">

                <!-- Slider Wrapper -->

                <div class="swiper-wrapper">

                    <!-- Slider Slide -->

                    <div class="swiper-slide">

                        <div class="row">

                            <div class="col padding-0">

                                <div class="slider-bg-outer height-100  bg-setting" style="background: url(images/main-slider-img-1.jpg)"></div>

                            </div>

                            <div class="col padding-0 d-none d-sm-none d-md-none d-lg-block">

                                <div class="gradient-bg height-100"></div>

                            </div>

                        </div>

                        <div class="slider-caption-outer position-absolute top-0 width-100 vertical-align-middle-transform">

                            <div class="container">

                                <div class="row">

                                    <div class="col-sm-8 offset-sm-4">

                                        <div class="slider-caption text-right">

                                            <h1 class="font-family-one white-color font-weight-100 bottom-padding-20">We Make</h1>

                                            <h1 class="font-family-one white-color font-weight-800 bottom-padding-30">Creative Design</h1>

                                            <div class="row">

                                                <div class="col-sm-6 offset-sm-6">

                                                    <p class="font-family-two white-color font-weight-200 paragraph-24  bottom-padding-30">

                                                        Treely is a design studio founded in London. Nowadays, we've grown and expanded our services.

                                                    </p>

                                                </div>

                                            </div>

                                            <a href="#." class="button-setting secondary-bg font-family-one font-weight-400 white-color paragraph-15">

                                                Learn More

                                            </a>

                                        </div>

                                    </div>

                                </div>

                            </div>

                        </div>

                    </div>

                    <div class="swiper-slide">

                        <div class="row">

                            <div class="col padding-0">

                                <div class="slider-bg-outer height-100  bg-setting" style="background: url(images/main-slider-img-1.jpg)"></div>

                            </div>

                            <div class="col padding-0 d-none d-sm-none d-md-none d-lg-block">

                                <div class="gradient-bg height-100"></div>

                            </div>

                        </div>

                        <div class="slider-caption-outer position-absolute top-0 width-100 vertical-align-middle-transform">

                            <div class="container">

                                <div class="row">

                                    <div class="col-sm-8 offset-sm-4">

                                        <div class="slider-caption text-right">

                                            <h1 class="font-family-one white-color font-weight-100 bottom-padding-20">We Make</h1>

                                            <h1 class="font-family-one white-color font-weight-800 bottom-padding-30">Latest Trends</h1>

                                            <div class="row">

                                                <div class="col-sm-6 offset-sm-6">

                                                    <p class="font-family-two white-color font-weight-200 paragraph-24  bottom-padding-30">

                                                        Treely is a design studio founded in London. Nowadays, we've grown and expanded our services.

                                                    </p>

                                                </div>

                                            </div>

                                            <a href="#." class="button-setting secondary-bg font-family-one font-weight-400 white-color paragraph-15">

                                                Learn More

                                            </a>

                                        </div>

                                    </div>

                                </div>

                            </div>

                        </div>

                    </div>

                </div>

            </div>

的js

 new Swiper('.main-slider', {
        pagination: '.swiper-pagination',
        paginationClickable: true,
        effect : 'fade',
    })