Add fade effect to Swiper slider using jQuery

Last Reply one year ago By dharmendr

Posted one year ago

i have this slider code its working fine.

 

but i want to add fade effect in this slider code thanks

<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">
        html, body
        {
            position: relative;
            height: 100%;
        }
        body
        {
            background: #eee;
            font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
            font-size: 14px;
            color: #000;
            margin: 0;
            padding: 0;
        }
        .swiper-container
        {
            width: 100%;
            height: 200px;
        }
        .swiper-slide
        {
            text-align: center;
            font-size: 18px;
            background: #fff; /* Center slide text vertically */
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img src="https://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" alt="Slide 1" /></div>
                <div class="swiper-slide">
                    <img src="https://static.flickr.com/75/199481072_b4a0d09597_s.jpg" alt="Slide 2" /></div>
                <div class="swiper-slide">
                    <img src="https://static.flickr.com/57/199481087_33ae73a8de_s.jpg" alt="Slide 3" /></div>
                <div class="swiper-slide">
                    <img src="https://static.flickr.com/77/199481108_4359e6b971_s.jpg" alt="Slide 4" /></div>
                <div class="swiper-slide">
                    <img src="https://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" alt="Slide 5" /></div>
                <div class="swiper-slide">
                    <img src="https://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" alt="Slide 6" /></div>
                <div class="swiper-slide">
                    <img src="https://static.flickr.com/58/199481218_264ce20da0_s.jpg" alt="Slide 7" /></div>
                <div class="swiper-slide">
                    <img src="https://static.flickr.com/69/199481255_fdfe885f87_s.jpg" alt="Slide 8" /></div>
                <div class="swiper-slide">
                    <img src="https://static.flickr.com/60/199480111_87d4cb3e38_s.jpg" alt="Slide 9" /></div>
                <div class="swiper-slide">
                    <img src="https://static.flickr.com/70/229228324_08223b70fa_s.jpg" alt="Slide 10" /></div>
            </div>
            <!-- Add Pagination -->
            <div class="swiper-pagination">
            </div>
            <!-- Add Arrows -->
            <div class="swiper-button-next">
            </div>
            <div class="swiper-button-prev">
            </div>
        </div>
        <!-- Initialize Swiper -->
        <script type="text/javascript">
            var swiper = new Swiper('.swiper-container', {
                spaceBetween: 30,
                centeredSlides: true,
                autoplay: 1000,
                speed: 1000, // Speed in milliseconds.
                pagination: {
                    el: '.swiper-pagination',
                    clickable: true
                },
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev'
                }
            });
            $(".swiper-container").mouseenter(function () {
                swiper.autoplay.start();
            });
            $(".swiper-container").mouseleave(function () {
                swiper.autoplay.stop();
                swiper.slideTo(0); // 0 is the index number of slide.
            });
        </script>
    </div>
    </form>
</body>
</html>

 

Posted one year ago Modified on one year ago

Hi nauna,

You need to add effect property while initializing the Swiper plugin.

And the value could be "slide", "fade", "cube", "coverflow" or "flip".

Check the example.

HTML

<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">
        html, body
        {
            position: relative;
            height: 100%;
        }
        body
        {
            background: #eee;
            font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
            font-size: 14px;
            color: #000;
            margin: 0;
            padding: 0;
        }
        .swiper-container
        {
            width: 100%;
            height: 200px;
        }
        .swiper-slide
        {
            text-align: center;
            font-size: 18px;
            background: #fff; /* Center slide text vertically */
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img src="https://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" alt="Slide 1" /></div>
                <div class="swiper-slide">
                    <img src="https://static.flickr.com/75/199481072_b4a0d09597_s.jpg" alt="Slide 2" /></div>
                <div class="swiper-slide">
                    <img src="https://static.flickr.com/57/199481087_33ae73a8de_s.jpg" alt="Slide 3" /></div>
                <div class="swiper-slide">
                    <img src="https://static.flickr.com/77/199481108_4359e6b971_s.jpg" alt="Slide 4" /></div>
                <div class="swiper-slide">
                    <img src="https://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" alt="Slide 5" /></div>
                <div class="swiper-slide">
                    <img src="https://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" alt="Slide 6" /></div>
                <div class="swiper-slide">
                    <img src="https://static.flickr.com/58/199481218_264ce20da0_s.jpg" alt="Slide 7" /></div>
                <div class="swiper-slide">
                    <img src="https://static.flickr.com/69/199481255_fdfe885f87_s.jpg" alt="Slide 8" /></div>
                <div class="swiper-slide">
                    <img src="https://static.flickr.com/60/199480111_87d4cb3e38_s.jpg" alt="Slide 9" /></div>
                <div class="swiper-slide">
                    <img src="https://static.flickr.com/70/229228324_08223b70fa_s.jpg" alt="Slide 10" /></div>
            </div>
            <!-- Add Pagination -->
            <div class="swiper-pagination">
            </div>
            <!-- Add Arrows -->
            <div class="swiper-button-next">
            </div>
            <div class="swiper-button-prev">
            </div>
        </div>
        <!-- Initialize Swiper -->
        <script type="text/javascript">
            var swiper = new Swiper('.swiper-container', {
                spaceBetween: 30,
                centeredSlides: true,
                autoplay: 1000,
                speed: 1000, // Speed in milliseconds.
                pagination: {
                    el: '.swiper-pagination',
                    clickable: true
                },
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev'
                },
                effect: 'fade'
            });
            $(".swiper-container").mouseenter(function () {
                swiper.autoplay.start();
            });
            $(".swiper-container").mouseleave(function () {
                swiper.autoplay.stop();
                swiper.slideTo(0); // 0 is the index number of slide.
            });
        </script>
    </div>
    </form>
</body>
</html>

Demo