Reducing opacity of swipe images

Donald Symmons 2,881

How do I reduce the opacity of images in a swiper container, except for the image that is swiped to display in the middle?

For example, as the images are swiping through, any image that appear in the middle will be clear while the other ones beside will appear blurry, and so on.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta charset="utf-8" />
    <title>Swiper demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.5/js/swiper.min.js"></script>
    <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.5/css/swiper.css" />
    <!-- Demo styles -->
    <style type="text/css">
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
            padding: 0;
        }

        .swiper-container {
            width: 100%;
            padding-top: 50px;
            padding-bottom: 50px;
        }

        .swiper-slide {
            background-position: center;
            background-size: cover;
            width: 320px;
            background-color: #fff;
            overflow: hidden;
            border-radius: 8px;
        }

        .picture {
            width: 320px;
            height: 320px;
            overflow: hidden;
        }

            .picture img {
                display: block;
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <div class="swiper-container">
                <!-- Additional required wrapper -->
                <div class="swiper-wrapper">
                    <!-- Slides -->
                    <div class="swiper-slide">
                        <div class="picture">

                            <img src="images/A/customer-support.JPG" />
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="picture">
                            <img src="images/A/customer-support.JPG" />
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="picture">
                            <img src="images/A/customer-support.JPG" />
                        </div>
                    </div>
                </div>
                <!-- If we need pagination -->
                <div class="swiper-pagination"></div>
                <!-- If we need navigation buttons -->
                <!--     <div class="swiper-button-prev"></div> -->
                <!--     <div class="swiper-button-next"></div> -->

                <!-- If we need scrollbar -->
                <div class="swiper-scrollbar"></div>
            </div>
            <!-- Initialize Swiper -->
            <script type="text/javascript">
                var swiper = new Swiper(".swiper-container", {
                    effect: "coverflow",
                    grabCursor: true,
                    centeredSlides: true,
                    slidesPerView: "auto",
                    autoplay: true,
                    speed: 500,
                    coverflowEffect: {
                        rotate: 20,
                        stretch: 0,
                        depth: 350,
                        modifier: 1,
                        slideShadows: true
                    },
                    pagination: {
                        el: ".swiper-pagination"
                    }
                });               
            </script>
        </div>
    </form>
</body>
</html>

Accepted answer

Lan Huang-MSFT 29,341 Reputation points Microsoft Vendor

2023-10-04T05:39:40.4266667+00:00
Hi @Donald Symmons,

The Swiper Coverflow Effect does not include an opacity property, but I think you could achieve a similar result by setting a depth property.

https://swiperjs.com/swiper-api#coverflow-effect

The code below includes some modifications to the Coverflow effect parameters.

<script type="text/javascript"> var swiper = new Swiper(".swiper-container", { effect: "coverflow", grabCursor: true, centeredSlides: true, slidesPerView: "auto", autoplay: true, speed: 500, coverflowEffect: { rotate: 0, stretch: 80, depth: 500, modifier:1 , slideShadows: true, }, pagination: { el: ".swiper-pagination" } }); </script>

The screenshot below is the rendered result.

Best regards,
Lan Huang

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.
Please sign in to rate this answer.

0 comments No comments
Sign in to comment

Use comments to ask for clarification, additional information, or improvements to the question.

1 additional answer

Bruce (SqlWork.com) 65,311 Reputation points

2023-10-03T18:08:05.1866667+00:00

this is a third party library and not supported by this site. that said, it sounds like you want the fade effect:

https://swiperjs.com/swiper-api#fade-effect
Please sign in to rate this answer.

0 comments No comments
Sign in to comment

Use comments to ask for clarification, additional information, or improvements to the question.

Share via

Reducing opacity of swipe images

1 additional answer

Your answer