Simple way to create a custom fade slider using only jquery

Code Maker BD 9:00 AM 2

It's very easy to create a custom fade slider which is looking more beautiful than other third party slider plugins in our website.

It Also:

No external java script
Fully customize able
Fully Responsive
Browser friendly and supports all device
Very simple coding
Very lighting and easy to understand

We need a jquery link :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Here is the HTML:
<section>
<div class="slider-box">
<img src="images/slider/arrow-left.png" class="prev" alt="Prev">
<img src="images/slider/arrow-right.png" class="next" alt="Next">
<div class="slideshow">
<img src="images/slider/slider1.jpg"/>
<img src="images/slider/slider2.jpg"/>
<img src="images/slider/slider3.jpg"/>
</div>
</div>
</section>

Here is all JS & CSS code:

<script>
//  This is fully custom code generate slider for simple, lite & better performance  */
        $(function () {
            // initialized 1st Image
            $('.slideshow img:first').addClass('top');
            // auto change slide
            var change = function () {
                var curr = $('.slideshow img.top');
                var next = curr.next();
                if (!next.length) {
                    next = $('.slideshow img:first');
                    next.addClass('top');
                    curr.animate({ opacity: 0 }, 1000, function () {
                        curr.removeClass('top');
                        curr.css({ opacity: 1 });
                    });
                } else {
                    next.css({ opacity: 0.0 })
                        .addClass('top')
                        .animate({ opacity: 1 }, 1000, function () {
                            curr.removeClass('top');
                        });
                }
            };
            // for duration to change image
            setInterval(change, 4000);
            if ($('.slideshow img').onmouseover) {
                alert("mouse hover");
            }
            // slide to next  on click
            $('.next').on('click', function () {
                var curr = $('.slideshow img.top');
                var next = curr.next();
                if (!next.length) {
                    next = $('.slideshow img:first');
                    next.addClass('top');
                    curr.animate({ opacity: 0 }, 300, function () {
                        curr.removeClass('top');
                        curr.css({ opacity: 1 });
                    });
                } else {
                    next.css({ opacity: 0.0 })
                        .addClass('top')
                        .animate({ opacity: 1 }, 300, function () {
                            curr.removeClass('top');
                        });
                }
            });
            // slide to prev on click
            $('.prev').on('click', function () {
                var curr = $('.slideshow img.top');
                var prev = curr.prev();
                if (!prev.length) {
                    prev = $('.slideshow img:first');
                    prev.addClass('top');
                    curr.animate({ opacity: 0 }, 100, function () {
                        curr.removeClass('top');
                        curr.css({ opacity: 1 });
                    });
                } else {
                    prev.css({ opacity: 0.0 })
                        .addClass('top')
                        .animate({ opacity: 1 }, 100, function () {
                            curr.removeClass('top');
                        });
                }
            });
        })
 </script>

<style>
 /* Image Positioning */
        .slideshow {
            height: 500px;
            padding: 20px;
            position: relative;
            width: 100%;
        }
            /* z-index addition */
            .slideshow img {
                left: 0px;
                position: absolute;
                top: 0px;
                width: 100%;
                z-index: -2;
            }
            /* z-index for class - top */
            .slideshow .top {
                z-index: -1;
            }
            .slideshow img.top {
                z-index: -1;
            }
        /* prev & next  */
        .prev, .next {
            cursor: pointer;
            float: left;
            margin-top: 14%;
        }
        .prev {
            margin-right: -45px;
            position: relative;
            z-index: 100;
        }
        .next {
            float: right;
            margin-left: -47px;
            position: relative;
            z-index: 100;
        }
</style>

Finally our slider is looking like below:

2 comments:

UnknownNovember 25, 2018 at 4:01 AM
Nice and easy to coding.
ReplyDelete
Replies
Nina AthenaMarch 22, 2020 at 4:22 PM
Thank you for sharing this on your blog! It is very helpful for my insight! Please update more posts about this. Would love to see more updates from you.

Melbourne Web Designer
ReplyDelete
Replies

Subscribe to: Post Comments ( Atom )