How To Create Slider Animation Example Using Javascript

Posted By Bajarangi soft , Posted On 02-09-2020

Create Slider Animation Example with easy method

First Need to Create HTML File
1. Add The HTML5 Doctype

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css
/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

</body>
</html>

2. You Need to Add This Link Inside HTML File

<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans%3A400%2C400italic%2C600%2C700%2C700italic%7COswald%3A400%2C300%7CVollkorn%3A400%2C400italic">

3. You Need to Add This Script Inside HTML File

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
<script src='https://kit.fontawesome.com/a076d05399.js'></script>

4 Create Html File
Index.Html

<div class="container-fluid">
    <main class="main-content">
        <section class="slideshow">
            <div class="slideshow-inner">
                <div class="slides">
                    <div class="slide is-active ">
                        <div class="slide-content">
                            <div class="caption">
                                <h1 class="ml15">
                                    <span class="title word">Maecenas </span>
                                </h1>
                                <div class="text">
                                    <h6 class="sentence">Aliquam facilisis ex
                                    <div class="clockWise">
                                        <span>sollicitudin.</span>
                                        <span>Firefox.</span>
                                        <span>posuere.</span>
                                        <span>IE.</span>
                                    </div>
                                </h6>
                                </div>
                                <a href="#" class="btn">
                                    <span class="btn-inner">Learn More</span>
                                </a>
                            </div>
                        </div>
                        <div class="image-container">
                            <img src="https://images.pexels.com/photos/110649/pexels-photo-110649.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=1080&w=1920" alt="" class="image" />
                        </div>
                    </div>
                    <div class="slide">
                        <div class="slide-content">
                            <div class="caption">
                                <h1 class="ml15">
                                    <span class="title word">Vestibulum </span>
                                </h1>
                                <div class="text">
                                    <h6 class="sentence"> Vivamus pharetra mollis
                                        <div class="clockWise">
                                            <span>lacus.</span>
                                            <span>vitae.</span>
                                            <span>dignissim.</span>
                                        </div>
                                    </h6>
                                </div>
                                <a href="#" class="btn">
                                    <span class="btn-inner">Learn More</span>
                                </a>
                            </div>
                        </div>
                        <div class="image-container">
                            <img src="https://www.alixbdanthenay.fr/wp-content/uploads/2015/07/Indispensable-4-1.jpg" alt="" class="image" />
                        </div>
                    </div>
                    <div class="slide">
                        <div class="slide-content">
                            <div class="caption">
                                <h1 class="ml15">
                                    <span class="title word">Phasellus </span>
                                </h1>
                                <div class="text">
                                    <h6 class="sentence">Integer suscipit consequat
                                        <div class="clockWise">
                                            <span>metus.</span>
                                            <span>nec.</span>
                                            <span>pellentesque.</span>
                                        </div>
                                    </h6>
                                </div>
                                <a href="#" class="btn">
                                    <span class="btn-inner">Learn More</span>
                                </a>
                            </div>
                        </div>
                        <div class="image-container">
                            <img src="https://www.alixbdanthenay.fr/wp-content/uploads/2016/11/11.jpg" alt="" class="image" />
                        </div>
                    </div>
                    <div class="slide">
                        <div class="slide-content">
                            <div class="caption">
                                <h1 class="ml15">
                                    <span class="title word">Donec </span>
                                </h1>
                                <div class="text">
                                    <h6 class="sentence"> Cras at interdum nibh,
                                        <div class="clockWise">
                                            <span>sodales.</span>
                                            <span>tellus.</span>
                                        </div>
                                    </h6>
                                </div>
                                <a href="#" class="btn">
                                    <span class="btn-inner">Learn More</span>
                                </a>
                            </div>
                        </div>
                        <div class="image-container">
                            <img src="https://www.alixbdanthenay.fr/wp-content/uploads/2016/11/20mars17-sans-typo.jpg" alt="" class="image" />
                        </div>
                    </div>
                </div>
                <div class="pagination">
                    <div class="item is-active">
                        <span class="icon">1</span>
                    </div>
                    <div class="item">
                        <span class="icon">2</span>
                    </div>
                    <div class="item">
                        <span class="icon">3</span>
                    </div>
                    <div class="item">
                        <span class=icon">4</span>
                    </div>
                </div>
                <div class="arrows">
                    <div class="arrow prev">
                        <span class="svg svg-arrow-left">
                            <i class='fas fa-angle-left bs_icon_left' id="svg5-Layer_1"></i>
                             <span class="alt sr-only"></span>
                        </span>
                    </div>
                    <div class="arrow next">
                        <span class="svg svg-arrow-right bs_icon_right">
                        <i class='fas fa-angle-right' id="svg5-Layer_1" ></i>
                            <span class="alt sr-only"></span>
                        </span>
                    </div>
                </div>
            </div>
        </section>
    </main>
</div>


<script>
    var slideshowDuration = 4000;
    var slideshow=$('.main-content .slideshow');

    function slideshowSwitch(slideshow,index,auto){
        if(slideshow.data('wait')) return;

        var slides = slideshow.find('.slide');
        var pages = slideshow.find('.pagination');
        var activeSlide = slides.filter('.is-active');
        var activeSlideImage = activeSlide.find('.image-container');
        var newSlide = slides.eq(index);
        var newSlideImage = newSlide.find('.image-container');
        var newSlideContent = newSlide.find('.slide-content');
        var newSlideElements=newSlide.find('.caption > *');
        if(newSlide.is(activeSlide))return;

        newSlide.addClass('is-new');
        var timeout=slideshow.data('timeout');
        clearTimeout(timeout);
        slideshow.data('wait',true);
        var transition=slideshow.attr('data-transition');
        if(transition=='fade'){

            newSlideImage.css({
                opacity:0
            });

            TweenMax.to(newSlideImage,1,{
                alpha:1,
                onComplete:function(){
                    newSlide.addClass('is-active').removeClass('is-new');
                    activeSlide.removeClass('is-active');
                    newSlide.css({display:'',zIndex:''});
                    // newSlideImage.css({opacity:''});
                    slideshow.find('.pagination').trigger('check');
                    slideshow.data('wait',false);
                    if(auto){
                        timeout=setTimeout(function(){
                            slideshowNext(slideshow,false,true);
                        },slideshowDuration);
                        slideshow.data('timeout',timeout);}}});
        } else {
            if(newSlide.index()>activeSlide.index()){
                var newSlideRight=0;
                var newSlideLeft='auto';
                var newSlideImageRight=-slideshow.width()/8;
                var newSlideImageLeft='auto';
                var newSlideImageToRight=0;
                var newSlideImageToLeft='auto';
                var newSlideContentLeft='auto';
                var newSlideContentRight=0;
                var activeSlideImageLeft=-slideshow.width()/4;
            } else {
                var newSlideRight='';
                var newSlideLeft=0;
                var newSlideImageRight='auto';
                var newSlideImageLeft=-slideshow.width()/8;
                var newSlideImageToRight='';
                var newSlideImageToLeft=0;
                var newSlideContentLeft=0;
                var newSlideContentRight='auto';
                var activeSlideImageLeft=slideshow.width()/4;
            }

            newSlide.css({
                display:'block',
                width:0,
                right:newSlideRight,
                left:newSlideLeft
                ,zIndex:2
            });

            newSlideImage.css({
                width:slideshow.width(),
                right:newSlideImageRight,
                left:newSlideImageLeft
            });

            newSlideContent.css({
                width:slideshow.width(),
                left:newSlideContentLeft,
                right:newSlideContentRight
            });

            activeSlideImage.css({
                left:0
            });

            TweenMax.set(newSlideElements,{y:20,force3D:true});
            TweenMax.to(activeSlideImage,1,{
                left:activeSlideImageLeft,
                ease:Power3.easeInOut
            });

            TweenMax.to(newSlide,1,{
                width:slideshow.width(),
                ease:Power3.easeInOut
            });

            TweenMax.to(newSlideImage,1,{
                right:newSlideImageToRight,
                left:newSlideImageToLeft,
                ease:Power3.easeInOut
            });

            TweenMax.staggerFromTo(newSlideElements,0.8,{alpha:0,y:60},{alpha:1,y:0,ease:Power3.easeOut,force3D:true,delay:0.6},0.1,function(){
                newSlide.addClass('is-active').removeClass('is-new');
                activeSlide.removeClass('is-active');
                newSlide.css({
                    display:'',
                    width:'',
                    left:'',
                    zIndex:''
                });

                newSlideImage.css({
                    width:'',
                    right:'',
                    left:''
                });

                newSlideContent.css({
                    width:'',
                    left:''
                });

                newSlideElements.css({
                    transform:''
                });

                activeSlideImage.css({
                    left:''
                });

                slideshow.find('.pagination').trigger('check');
                slideshow.data('wait',false);
                if(auto){
                    timeout=setTimeout(function(){
                        slideshowNext(slideshow,false,true);
                    },slideshowDuration);
                    slideshow.data('timeout',timeout);
                }
            });
        }
    }

    function slideshowNext(slideshow,previous,auto){
        var slides=slideshow.find('.slide');
        var activeSlide=slides.filter('.is-active');
        var newSlide=null;
        if(previous){
            newSlide=activeSlide.prev('.slide');
            if(newSlide.length === 0) {
                newSlide=slides.last();
            }
        } else {
            newSlide=activeSlide.next('.slide');
            if(newSlide.length==0)
                newSlide=slides.filter('.slide').first();
        }

        slideshowSwitch(slideshow,newSlide.index(),auto);
    }

    function homeSlideshowParallax(){
        var scrollTop=$(window).scrollTop();
        if(scrollTop>windowHeight) return;
        var inner=slideshow.find('.slideshow-inner');
        var newHeight=windowHeight-(scrollTop/2);
        var newTop=scrollTop*0.8;

        inner.css({
            transform:'translateY('+newTop+'px)',height:newHeight
        });
    }
    //
    $(document).ready(function() {
        $('.slide').addClass('is-loaded');

        $('.slideshow .arrows .arrow').on('click',function(){
            slideshowNext($(this).closest('.slideshow'),$(this).hasClass('prev'));
        });

        $('.slideshow .pagination .item').on('click',function(){
            slideshowSwitch($(this).closest('.slideshow'),$(this).index());
        });

        $('.slideshow .pagination').on('check',function(){
            var slideshow=$(this).closest('.slideshow');
            var pages=$(this).find('.item');
            var index=slideshow.find('.slides .is-active').index();
            pages.removeClass('is-active');
            pages.eq(index).addClass('is-active');
        });

        /* Lazyloading
        $('.slideshow').each(function(){
          var slideshow=$(this);
          var images=slideshow.find('.image').not('.is-loaded');
          images.on('loaded',function(){
            var image=$(this);
            var slide=image.closest('.slide');
            slide.addClass('is-loaded');
          });
        */

        var timeout=setTimeout(function(){
            slideshowNext(slideshow,false,true);
        },slideshowDuration);

        slideshow.data('timeout',timeout);
    });

    if($('.main-content .slideshow').length > 1) {
        $(window).on('scroll',homeSlideshowParallax);
    }
</script>
<script>
    anime.timeline({loop: true})
        .add({
            targets: '.ml15 .word',
            scale: [14,1],
            opacity: [0,1],
            easing: "easeOutCirc",
            duration: 800,
            delay: (el, i) => 800 * i
        }).add({
        targets: '.ml15',
        opacity: 0,
        duration: 1000,
        easing: "easeOutExpo",
        delay: 1000
    });
</script>

5.Create a CSS File, Inside Your CSS Folde
Style.css

body{
    background-color: #373737;
}
.btn {
    display: inline-block;
    padding: 13px 20px;
    color: #fff;
    text-decoration: none;
    position: relative;
    background: transparent;
    border: 1px solid #e1e1e1;
    font: 12px/1.2 "Oswald", sans-serif;
    letter-spacing: 0.4em;
    text-align: center;
    text-indent: 2px;
    text-transform: uppercase;
    transition: color 0.1s linear 0.05s;
}
.btn::before {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background: #e1e1e1;
    z-index: 1;
    opacity: 0;
    transition: height 0.2s ease, top 0.2s ease, opacity 0s linear 0.2s;
}
.btn::after {
    transition: border 0.1s linear 0.05s;
}
.btn .btn-inner {
    position: relative;
    z-index: 2;
}
.btn:hover {
    color: #373737;
    transition: color 0.1s linear 0s;
}
.btn:hover::before {
    top: 0;
    height: 100%;
    opacity: 1;
    transition: height 0.2s ease, top 0.2s ease, opacity 0s linear 0s;
}
.btn:hover::after {
    border-color: #373737;
    transition: border 0.1s linear 0s;
}
.bs_icon_left{
    font-size: 30px;
    color: white;
}
.bs_icon_right{
    font-size: 30px;
    color: white;
}
.slideshow {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 100vh;
    z-index: 1;
}
.slideshow-inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.slides {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}
.slide {
    display: none;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    /*transition: opacity 0.3s ease;*/
}
.is-active {
    display: block;
}
/*.is-loaded {*/
    /*opacity: 1;*/
/*}*/
.caption {
    padding: 0 100px;
}
 .image-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-position: center;
    z-index: 1;
    background-size: cover;
    image-rendering: optimizeQuality;
}
 .image-container::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
}
 .image {
    width: 100%;
    width: 100%;
    object-fit: cover;
    height: 100%;
}
 .slide-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    color: #fff;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}
.title {
    margin: 0 auto 15px;
    max-width: 1000px;
    font: 300 50px/1.2 "Oswald", sans-serif;
    letter-spacing: 0.35em;
    text-transform: uppercase;
}
.text {
    margin: 0 auto;
    max-width: 1000px;
    font-size: 18px;
    line-height: 1.4;
}
 .btn {
    margin: 15px 0 0;
    border-color: #fff;
}
.btn::before {
    background: #fff;
}
 .pagination {
    position: absolute;
    bottom: 35px;
    left: 0;
    width: 100%;
    height: 12px;
    cursor: default;
    z-index: 2;
    text-align: center;
}
 .item {
    display: inline-block;
    padding: 15px 5px;
    position: relative;
    width: 46px;
    height: 32px;
    cursor: pointer;
    text-indent: -999em;
    z-index: 1;
}
.item + .page {
    margin-left: -2px;
}
.item::before {
    content: "";
    display: block;
    position: absolute;
    top: 15px;
    left: 5px;
    width: 36px;
    height: 2px;
    background: rgba(255, 255, 255, 0.5);
    transition: background 0.2s ease;
}
 .item::after {
    width: 0;
    background: #fff;
    z-index: 2;
    transition: width 0.2s ease;
}
 .item:hover::before, .slideshow .pagination .item.is-active::before {
    background-color: #fff;
}
.arrow {
    margin: -33px 0 0;
    padding: 20px;
    position: absolute;
    top: 50%;
    cursor: pointer;
    z-index: 3;
}
.prev {
    left: 30px;
}
 .prev:hover .svg {
    left: -10px;
}
.next {
    right: 30px;
}
.next:hover .svg {
    left: 10px;
}
 .svg {
    position: relative;
    left: 0;
    width: 14px;
    height: 26px;
    fill: #fff;
    transition: left 0.2s ease;
}

/*Sentence*/
.sentence {
    color: #bdb7b7;
    font-size: 30px;
    text-align: left;
}
/*Wrapper*/
.wrapper {
    background-color: #e20a0a;
    font-family: "Raleway", sans-serif;
    margin: 100px auto;
    padding: 40px 40px;
    position: relative;
    width: 70%;
}

/*ClockWise Effect*/
.clockWise {
    display: inline;
    text-indent: 8px;
}
.clockWise span {
    animation: clock 12.5s linear infinite 0s;
    -ms-animation: clock 12.5s linear infinite 0s;
    -webkit-animation: clock 12.5s linear infinite 0s;
    color: #e71212;
    opacity: 0;
    overflow: hidden;
    position: absolute;
}
.clockWise span:nth-child(2) {
    animation-delay: 2.5s;
    -ms-animation-delay: 2.5s;
    -webkit-animation-delay: 2.5s;
}
.clockWise span:nth-child(3) {
    animation-delay: 5s;
    -ms-animation-delay: 5s;
    -webkit-animation-delay: 5s;
}
.clockWise span:nth-child(4) {
    animation-delay: 7.5s;
    -ms-animation-delay: 7.5s;
    -webkit-animation-delay: 7.5s;
}
.clockWise span:nth-child(5) {
    animation-delay: 10s;
    -ms-animation-delay: 10s;
    -webkit-animation-delay: 10s;
}

/*ClockWise Effect Animation*/
@-moz-keyframes clock {
    0% {
        opacity: 0;
    }
    5% {
        opacity: 0;
        -moz-transform: rotate(-180deg);
    }
    10% {
        opacity: 1;
        -moz-transform: translateX(0px);
    }
    25% {
        opacity: 1.5%;
        -moz-transform: translateX(0px);
    }
    30% {
        opacity: 0;
        -moz-transform: translateX(0px);
    }
    80% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}
@-webkit-keyframes clock {
    0% {
        opacity: 0;
    }
    5% {
        opacity: 0;
        -webkit-transform: rotate(-180deg);
    }
    10% {
        opacity: 1;
        -webkit-transform: translateX(0px);
    }
    25% {
        opacity: 1;
        -webkit-transform: translateX(0px);
    }
    30% {
        opacity: 0;
        -webkit-transform: translateX(0px);
    }
    80% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}
@-ms-keyframes clock {
    0% {
        opacity: 0;
    }
    5% {
        opacity: 0;
        -ms-transform: rotate(-180deg);
    }
    10% {
        opacity: 1;
        -ms-transform: translateX(0px);
    }
    25% {
        opacity: 1;
        -ms-transform: translateX(0px);
    }
    30% {
        opacity: 0;
        -ms-transform: translateX(0px);
    }
    80% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}
/*title effect*/
.ml15 .word {
    display: inline-block;
    line-height: 1em;
                }

6.Complete Code Of HTML File

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Slider Animation</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans%3A400%2C400italic%2C600%2C700%2C700italic%7COswald%3A400%2C300%7CVollkorn%3A400%2C400italic">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
    <script src='https://kit.fontawesome.com/a076d05399.js'></script>


</head>
<body>

<div class="container-fluid">
    <main class="main-content">
        <section class="slideshow">
            <div class="slideshow-inner">
                <div class="slides">
                    <div class="slide is-active ">
                        <div class="slide-content">
                            <div class="caption">
                                <h1 class="ml15">
                                    <span class="title word">Maecenas </span>
                                </h1>
                                <div class="text">
                                    <h6 class="sentence">Aliquam facilisis ex
                                    <div class="clockWise">
                                        <span>sollicitudin.</span>
                                        <span>Firefox.</span>
                                        <span>posuere.</span>
                                        <span>IE.</span>
                                    </div>
                                </h6>
                                </div>
                                <a href="#" class="btn">
                                    <span class="btn-inner">Learn More</span>
                                </a>
                            </div>
                        </div>
                        <div class="image-container">
                            <img src="https://images.pexels.com/photos/110649/pexels-photo-110649.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=1080&w=1920" alt="" class="image" />
                        </div>
                    </div>
                    <div class="slide">
                        <div class="slide-content">
                            <div class="caption">
                                <h1 class="ml15">
                                    <span class="title word">Vestibulum </span>
                                </h1>
                                <div class="text">
                                    <h6 class="sentence"> Vivamus pharetra mollis
                                        <div class="clockWise">
                                            <span>lacus.</span>
                                            <span>vitae.</span>
                                            <span>dignissim.</span>
                                        </div>
                                    </h6>
                                </div>
                                <a href="#" class="btn">
                                    <span class="btn-inner">Learn More</span>
                                </a>
                            </div>
                        </div>
                        <div class="image-container">
                            <img src="https://www.alixbdanthenay.fr/wp-content/uploads/2015/07/Indispensable-4-1.jpg" alt="" class="image" />
                        </div>
                    </div>
                    <div class="slide">
                        <div class="slide-content">
                            <div class="caption">
                                <h1 class="ml15">
                                    <span class="title word">Phasellus </span>
                                </h1>
                                <div class="text">
                                    <h6 class="sentence">Integer suscipit consequat
                                        <div class="clockWise">
                                            <span>metus.</span>
                                            <span>nec.</span>
                                            <span>pellentesque.</span>
                                        </div>
                                    </h6>
                                </div>
                                <a href="#" class="btn">
                                    <span class="btn-inner">Learn More</span>
                                </a>
                            </div>
                        </div>
                        <div class="image-container">
                            <img src="https://www.alixbdanthenay.fr/wp-content/uploads/2016/11/11.jpg" alt="" class="image" />
                        </div>
                    </div>
                    <div class="slide">
                        <div class="slide-content">
                            <div class="caption">
                                <h1 class="ml15">
                                    <span class="title word">Donec </span>
                                </h1>
                                <div class="text">
                                    <h6 class="sentence"> Cras at interdum nibh,
                                        <div class="clockWise">
                                            <span>sodales.</span>
                                            <span>tellus.</span>
                                        </div>
                                    </h6>
                                </div>
                                <a href="#" class="btn">
                                    <span class="btn-inner">Learn More</span>
                                </a>
                            </div>
                        </div>
                        <div class="image-container">
                            <img src="https://www.alixbdanthenay.fr/wp-content/uploads/2016/11/20mars17-sans-typo.jpg" alt="" class="image" />
                        </div>
                    </div>
                </div>
                <div class="pagination">
                    <div class="item is-active">
                        <span class="icon">1</span>
                    </div>
                    <div class="item">
                        <span class="icon">2</span>
                    </div>
                    <div class="item">
                        <span class="icon">3</span>
                    </div>
                    <div class="item">
                        <span class=icon">4</span>
                    </div>
                </div>
                <div class="arrows">
                    <div class="arrow prev">
                        <span class="svg svg-arrow-left">
                            <i class='fas fa-angle-left bs_icon_left' id="svg5-Layer_1"></i>
                             <span class="alt sr-only"></span>
                        </span>
                    </div>
                    <div class="arrow next">
                        <span class="svg svg-arrow-right bs_icon_right">
                        <i class='fas fa-angle-right' id="svg5-Layer_1" ></i>
                            <span class="alt sr-only"></span>
                        </span>
                    </div>
                </div>
            </div>
        </section>
    </main>
</div>


<script>
    var slideshowDuration = 4000;
    var slideshow=$('.main-content .slideshow');

    function slideshowSwitch(slideshow,index,auto){
        if(slideshow.data('wait')) return;

        var slides = slideshow.find('.slide');
        var pages = slideshow.find('.pagination');
        var activeSlide = slides.filter('.is-active');
        var activeSlideImage = activeSlide.find('.image-container');
        var newSlide = slides.eq(index);
        var newSlideImage = newSlide.find('.image-container');
        var newSlideContent = newSlide.find('.slide-content');
        var newSlideElements=newSlide.find('.caption > *');
        if(newSlide.is(activeSlide))return;

        newSlide.addClass('is-new');
        var timeout=slideshow.data('timeout');
        clearTimeout(timeout);
        slideshow.data('wait',true);
        var transition=slideshow.attr('data-transition');
        if(transition=='fade'){

            newSlideImage.css({
                opacity:0
            });

            TweenMax.to(newSlideImage,1,{
                alpha:1,
                onComplete:function(){
                    newSlide.addClass('is-active').removeClass('is-new');
                    activeSlide.removeClass('is-active');
                    newSlide.css({display:'',zIndex:''});
                    // newSlideImage.css({opacity:''});
                    slideshow.find('.pagination').trigger('check');
                    slideshow.data('wait',false);
                    if(auto){
                        timeout=setTimeout(function(){
                            slideshowNext(slideshow,false,true);
                        },slideshowDuration);
                        slideshow.data('timeout',timeout);}}});
        } else {
            if(newSlide.index()>activeSlide.index()){
                var newSlideRight=0;
                var newSlideLeft='auto';
                var newSlideImageRight=-slideshow.width()/8;
                var newSlideImageLeft='auto';
                var newSlideImageToRight=0;
                var newSlideImageToLeft='auto';
                var newSlideContentLeft='auto';
                var newSlideContentRight=0;
                var activeSlideImageLeft=-slideshow.width()/4;
            } else {
                var newSlideRight='';
                var newSlideLeft=0;
                var newSlideImageRight='auto';
                var newSlideImageLeft=-slideshow.width()/8;
                var newSlideImageToRight='';
                var newSlideImageToLeft=0;
                var newSlideContentLeft=0;
                var newSlideContentRight='auto';
                var activeSlideImageLeft=slideshow.width()/4;
            }

            newSlide.css({
                display:'block',
                width:0,
                right:newSlideRight,
                left:newSlideLeft
                ,zIndex:2
            });

            newSlideImage.css({
                width:slideshow.width(),
                right:newSlideImageRight,
                left:newSlideImageLeft
            });

            newSlideContent.css({
                width:slideshow.width(),
                left:newSlideContentLeft,
                right:newSlideContentRight
            });

            activeSlideImage.css({
                left:0
            });

            TweenMax.set(newSlideElements,{y:20,force3D:true});
            TweenMax.to(activeSlideImage,1,{
                left:activeSlideImageLeft,
                ease:Power3.easeInOut
            });

            TweenMax.to(newSlide,1,{
                width:slideshow.width(),
                ease:Power3.easeInOut
            });

            TweenMax.to(newSlideImage,1,{
                right:newSlideImageToRight,
                left:newSlideImageToLeft,
                ease:Power3.easeInOut
            });

            TweenMax.staggerFromTo(newSlideElements,0.8,{alpha:0,y:60},{alpha:1,y:0,ease:Power3.easeOut,force3D:true,delay:0.6},0.1,function(){
                newSlide.addClass('is-active').removeClass('is-new');
                activeSlide.removeClass('is-active');
                newSlide.css({
                    display:'',
                    width:'',
                    left:'',
                    zIndex:''
                });

                newSlideImage.css({
                    width:'',
                    right:'',
                    left:''
                });

                newSlideContent.css({
                    width:'',
                    left:''
                });

                newSlideElements.css({
                    transform:''
                });

                activeSlideImage.css({
                    left:''
                });

                slideshow.find('.pagination').trigger('check');
                slideshow.data('wait',false);
                if(auto){
                    timeout=setTimeout(function(){
                        slideshowNext(slideshow,false,true);
                    },slideshowDuration);
                    slideshow.data('timeout',timeout);
                }
            });
        }
    }

    function slideshowNext(slideshow,previous,auto){
        var slides=slideshow.find('.slide');
        var activeSlide=slides.filter('.is-active');
        var newSlide=null;
        if(previous){
            newSlide=activeSlide.prev('.slide');
            if(newSlide.length === 0) {
                newSlide=slides.last();
            }
        } else {
            newSlide=activeSlide.next('.slide');
            if(newSlide.length==0)
                newSlide=slides.filter('.slide').first();
        }

        slideshowSwitch(slideshow,newSlide.index(),auto);
    }

    function homeSlideshowParallax(){
        var scrollTop=$(window).scrollTop();
        if(scrollTop>windowHeight) return;
        var inner=slideshow.find('.slideshow-inner');
        var newHeight=windowHeight-(scrollTop/2);
        var newTop=scrollTop*0.8;

        inner.css({
            transform:'translateY('+newTop+'px)',height:newHeight
        });
    }
    //
    $(document).ready(function() {
        $('.slide').addClass('is-loaded');

        $('.slideshow .arrows .arrow').on('click',function(){
            slideshowNext($(this).closest('.slideshow'),$(this).hasClass('prev'));
        });

        $('.slideshow .pagination .item').on('click',function(){
            slideshowSwitch($(this).closest('.slideshow'),$(this).index());
        });

        $('.slideshow .pagination').on('check',function(){
            var slideshow=$(this).closest('.slideshow');
            var pages=$(this).find('.item');
            var index=slideshow.find('.slides .is-active').index();
            pages.removeClass('is-active');
            pages.eq(index).addClass('is-active');
        });

        /* Lazyloading
        $('.slideshow').each(function(){
          var slideshow=$(this);
          var images=slideshow.find('.image').not('.is-loaded');
          images.on('loaded',function(){
            var image=$(this);
            var slide=image.closest('.slide');
            slide.addClass('is-loaded');
          });
        */

        var timeout=setTimeout(function(){
            slideshowNext(slideshow,false,true);
        },slideshowDuration);

        slideshow.data('timeout',timeout);
    });

    if($('.main-content .slideshow').length > 1) {
        $(window).on('scroll',homeSlideshowParallax);
    }
</script>
<script>
    anime.timeline({loop: true})
        .add({
            targets: '.ml15 .word',
            scale: [14,1],
            opacity: [0,1],
            easing: "easeOutCirc",
            duration: 800,
            delay: (el, i) => 800 * i
        }).add({
        targets: '.ml15',
        opacity: 0,
        duration: 1000,
        easing: "easeOutExpo",
        delay: 1000
    });
</script>
</body>
</html>

7.Preview Of HTML File

Related Post

How To Create Slider Animation Example Using Javascript
How To Create Range Slider With Flutter Android App
How To Create Image Comparison Slider Using JavaScript
How To Create Custom Range Sliders Using CSS And JavaScript
Material Range Slider Demos Using Flutter Android App
How To Create Carousel Slider Using Flutter Android App
How To Make Button With Slider Effect Animation Hover Using CSS
How To Make Button With Slider Effect Animation Hover Using CSS Part-2
How To Make Button With Slider Effect Animation Hover Using CSS Part-3
How To Create a Animation Slider Hover Effects Buttons Using Css
How To Create a Animation Slider Hover Effects Buttons Using CSS Part-3
How To Create a Slider Up Down Hover Effects Animation Buttons Using Css