Reducing opacity of swipe images

Question

Reducing opacity of swipe images

Donald Symmons 3,066

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

1 additional answer

Your answer

Answer 1

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

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.

Answer 2

Bruce (SqlWork.com) 78,236 Volunteer Moderator

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

Share via

Reducing opacity of swipe images

1 additional answer

Your answer