How to automatically swipe images in gallery

Question

How to automatically swipe images in gallery

Donald Symmons 3,066

Hi,

Please I have 3 images in gallery. Is a way to automatically swipe these images using javascript or CSS?

As the image in front swipes to the right, the image on the left should swipe to the right and vice versa.

.gallery{width: 100%;}
.gallery-container{align-items: center; display: flex; height: 400px;               margin: 0 auto; max-width: 1000px; position: relative;}            
.gallery-item{height: 200px; opacity: 0; position: absolute; transition: all 0.3s ease-in-out; width: 330px; z-index: 0; border-radius: 15px;               background-size: contain;}
.gallery-item-1 {left: 20%; opacity: .4; transform: translateX(-50%);}
.gallery-item-2{box-shadow: -2px 5px 33px 6px rgba(0,0,0,0.35); height: 300px; opacity: 1; left: 50%; transform: translateX(-50%); width: 430px;               z-index: 2;}
.gallery-item-3 {opacity: .4; left: 80%; transform: translateX(-50%);}

<div class="gallery">
<div class="gallery-container">
<img class="gallery-item gallery-item-1" src="images/A/customer-support.png" data-index="1" />
<img class="gallery-item gallery-item-2" src="images/A/customer-support.png" data-index="2" />
<img class="gallery-item gallery-item-3" src="images/A/customer-support.png" data-index="3" />
</div>
</div>

Accepted answer

0 additional answers

Your answer

Answer 1

Hi @Donald Symmons,

I think using the Swiper plugin you can easily achieve the effect you want.

<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>

test5

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.

Donald Symmons 3,066 Reputation points

2023-10-03T10:40:17.8633333+00:00

Hi @Lan Huang-MSFT ,

Thank you very much.

Share via

How to automatically swipe images in gallery

0 additional answers

Your answer