Reducing opacity of swipe images

Donald Symmons 2,226 Reputation points
2023-10-03T12:11:36.16+00:00

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>
.NET
.NET
Microsoft Technologies based on the .NET software framework.
2,328 questions
ASP.NET
ASP.NET
A set of technologies in the .NET Framework for building web applications and XML web services.
1,730 questions
ASP.NET Web Forms
ASP.NET Web Forms
A part of the ASP.NET web application framework that can be used to create ASP.NET web applications.
660 questions
0 comments No comments
{count} votes

Accepted answer
  1. Lan Huang-MSFT 19,911 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.

    User's image

    User's image

    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.

    0 comments No comments

1 additional answer

Sort by: Most helpful
  1. Bruce (SqlWork.com) 49,051 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

    0 comments No comments