Reducing opacity of swipe images

Donald Symmons 3,066 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>
Developer technologies | .NET | Other
Developer technologies | ASP.NET | Other
0 comments No comments
{count} votes

Accepted answer
  1. Lan Huang-MSFT 30,191 Reputation points Microsoft External Staff
    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) 78,236 Reputation points Volunteer Moderator
    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

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.