<div>
                        <div class="container">
                            <div class="slider">
                                <div class="box1"></div>
                                <div class="box2"></div>
                                <div class="box3"></div>
                                <div class="box4"></div>
                                <div class="box5"></div>
                                <div class="box6"></div>
                                <div class="box7"></div>
                            </div>
                        </div>
                        <div id="test"></div>
                    </div>
                    <style>
                        .container{ width:40vw; height:40vh; display:flex; justify-content:center; align-items:center;}
                        .slider {height: 30vw; width:40vw;  display: flex; perspective: 1000px; position: relative; align-items:center;}
                        .box1{background:url('../../pics/2018-Sh-01.jpg');background-size:cover;background-position:center center;}
                        .box2{background:url('../../pics/2018-Sh-02.jpg');background-size:cover;background-position:center center;}
                        .box3{background:url('../../pics/2018-Sh-03.jpg');background-size:cover;background-position:center center;}
                        .box4{background:url('../../pics/2018-Sh-12.jpg');background-size:cover;background-position:center center;}
                        .box5{background:url('../../p[ics/2018-Sh-05.jpg');background-size:cover;background-position:center center;}
                        .box6{background:url('../../pics/2018-Sh-06.jpg');background-size:cover;background-position:center center;}
                        .box7{background:url('../../pics/2018-Sh-07.jpg');background-size:cover;background-position:center center;}
                        .slider [class*="box"] {overflow: hidden; border-radius:2vw; transition: all 1s cubic-bezier(0.68, 
                            -0.6, 0.32, 1.6);position:absolute;}
                        .slider [class*="box"]:nth-child(7),.slider [class*="box"]:nth-child(1) {width: 40vh; height: 40vh; 
                            transform: scale(0.2) translate(-50%,-50%); top: 10%;z-index:1;}
                        .slider [class*="box"]:nth-child(2), .slider [class*="box"]:nth-child(6) {width: 40vh; height: 40vh; 
                            transform: scale(0.4) translate(-50%,-50%); top: 20%; z-index:2;}
                        .slider [class*="box"]:nth-child(3), .slider [class*="box"]:nth-child(5) {width: 40vh; height: 40vh; 
                            transform: scale(0.6) translate(-50%,-50%); top: 30%; z-index:3;}
                        .slider [class*="box"]:nth-child(4) {width: 30vw;height: 40vh; border-color: #c92026; color: #fff; 
                            transform: scale(1) translate(-50%,-50%); top: 50%; z-index:4;}
                        .slider [class*="box"]:nth-child(1){left:-13%;}
                        .slider [class*="box"]:nth-child(2){left:-5%;}
                        .slider [class*="box"]:nth-child(3){left:10%;}
                        .slider [class*="box"]:nth-child(4){left:50%;}
                        .slider [class*="box"]:nth-child(5){left:61%;}
                        .slider [class*="box"]:nth-child(6){left:75%;}
                        .slider [class*="box"]:nth-child(7){left:80%;}
                        .slider .firstSlide {-webkit-animation:  firstChild 1s; animation:  firstChild 1s; }
                        /*Animation for buyers landing page slider*/
                        @-webkit-keyframes firstChild {
                            0% {left:80%; transform: scale(0.2) translate(-80%,-50%);}
                            100% {left: -13%; transform: scale(0.2) translate(-80%,-50%);}
                        }
                        @keyframes firstChild {
                            0% {left:80%; transform: scale(0.2) translate(-80%,-50%);}
                            100% {left: -13%; transform: scale(0.2) translate(-80%,-50%);}
                        }
                                
                    </style>
                    <script>
                    function rotate() {
                            var lastChild = $('.slider div:last-child').clone();
                            /*$('#test').html(lastChild)*/
                            $('.slider div').removeClass('firstSlide')
                            $('.slider div:last-child').remove();
                            $('.slider').prepend(lastChild)
                            $(lastChild).addClass('firstSlide')
                        }
                        window.setInterval(function(){
                            rotate()
                        }, 4000);
                    </script>
                

                    <div class="carousel">
                        <div class="carousel_nav">
                            <span id="moveLeft" class="carousel_arrow">
                                <svg class="carousel_icon" width="24" height="24" viewBox="0 0 24 24">
                                    <path d="M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z">
                                    </path>
                                </svg>
                            </span>
                            <span id="moveRight" class="carousel_arrow" >
                                <svg class="carousel_icon" width="24" height="24" viewBox="0 0 24 24">
                                    <path d="M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z">
                                    </path>
                                </svg>    
                            </span>
                        </div>
                        <div class="carousel-item carousel-item--1">
                            <div class="carousel-item_image"></div>
                            <div class="carousel-item_info">
                                <div class="carousel-item_container">
                                <h3 class="carousel-item_subtitle">The grand moment </h3>
                                <h4 class="carousel-item_title">Le tour</h4>
                                <p class="carousel-item_description">Sed ut perspiciatis unde omnis iste natus error 
                                sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
                                <a href="#" class="carousel-item__btn">Explore the tour</a>
                                </div>
                            </div>
                        </div>
                        <div class="carousel-item carousel-item--2">
                            <div class="carousel-item_image"></div>
                            <div class="carousel-item_info">
                                <div class="carousel-item_container">
                                <h2 class="carousel-item_subtitle">The big window </h2>
                                <h1 class="carousel-item_title">Minimal window</h1>
                                <p class="carousel-item_description">Clear Glass Window With Brown and White Wooden 
                                Frame iste natus error sit voluptatem accusantium doloremque laudantium.</p>
                                <a href="#" class="carousel-item_btn">Read the article</a>
                                </div>
                            </div>
                        </div>
                        <div class="carousel-item carousel-item--3">
                            <div class="carousel-item_image"></div>
                            <div class="carousel-item_info">
                                <div class="carousel-item_container">
                                <h2 class="carousel-item_subtitle">Tropical palms </h2>
                                <h1 class="carousel-item_title">Palms</h1>
                                <p class="carousel-item_description">Sed ut perspiciatis unde omnis iste natus error 
                                sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
                                <a href="#" class="carousel-item__btn">Explore the palms</a>
                                </div>
                            </div>
                        </div>
                        <div class="carousel-item carousel-item--4">
                            <div class="carousel-item_image"></div>
                            <div class="carousel-item_info">
                                <div class="carousel-item_container">
                                <h2 class="carousel-item_subtitle">Beach </h2>
                                <h1 class="carousel-item_title">The beach </h1>
                                <p class="carousel-item_description">Sed ut perspiciatis unde omnis iste natus error 
                                sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
                                <a href="#" class="carousel-item_btn">Explore the beach</a>
                                </div>
                            </div>
                        </div>
                        <div class="carousel-item carousel-item--5">
                            <div class="carousel-item_image"></div>
                            <div class="carousel-item_info">
                                <div class="carousel-item_container">
                                <h2 class="carousel-item_subtitle">The white building </h2>
                                <h1 class="carousel-item_title">White building</h1>
                                <p class="carousel-item_description">Sed ut perspiciatis unde omnis iste natus error
                                sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
                                <a href="#" class="carousel-item_btn">Read the article</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <style>
                        .carousel {width: 40vw; height: 100vh; display: flex; max-width: 90vw; max-height: 55vw; 
                            overflow: hidden; position: relative;}
                        .carousel-item {visibility:visible; display: flex; width: 100%; height: 100%; 
                            align-items: center; justify-content: flex-end;  -webkit-align-items: center; 
                            -webkit-justify-content: flex-end; position: relative; background-color: #fff; 
                            flex-shrink: 0; -webkit-flex-shrink: 0; position: absolute; z-index: 0; 
                            transition: 0.6s all linear;}
                        .carousel-item_info {height: 100%; display: flex; justify-content: center; flex-direction: column; 
                            display: -webkit-flex;
                        -webkit-justify-content: center; -webkit-flex-direction: column; order: 1; left: 0; margin: auto; 
                        padding: 0 4vw; width: 20%;}
                        .carousel-item_image {width: 60%; height: 100%; order: 2; align-self: flex-end; flex-basis: 60%; 
                            -webkit-order: 2;    -webkit-align-self: flex-end;-webkit-flex-basis: 60%; 
                            background-position: center; background-repeat: no-repeat;     background-size: cover;  
                            position:relative;transform: translateX(100%);transition: 0.6s all ease-in-out;}
                        .carousel-item_subtitle {font-family: 'Open Sans', sans-serif;letter-spacing: 0.2vw; 
                        font-size: 1vw; text-transform: uppercase; margin: 0; color: #7E7E7E; font-weight: 700;
                        transform: translateY(25%); opacity: 0; visibility: hidden;transition: 0.4s all ease-in-out;}
                        .carousel-item_title {margin: 1vw 0 0 0; font-family: 'Playfair Display', serif; font-size: 3vw; 
                        line-height: 3vw;    letter-spacing: 0.3vw; font-weight: 700; color: #2C2C2C; 
                        transform: translateY(25%); opacity: 0; visibility: hidden;  transition: 0.6s all ease-in-out;}
                        .carousel-item_description {transform: translateY(25%); opacity: 0; visibility: hidden; 
                            transition: 0.6s all ease-in-out; margin-top: 3vw; font-family: 'Open Sans', sans-serif; 
                            font-size: 1vw; color: #7e7e7e; line-height: 2vw; margin-bottom: 3vw;}
                        .carousel-item--1 .carousel-item_image{background-image: url('../../pics/2018-Sh-01.jpg');}
                        .carousel-item--2 .carousel-item_image{background-image: url('../../pics/2018-Sh-02.jpg');}
                        .carousel-item--3 .carousel-item_image{background-image: url('../../pics/2018-Sh-03.jpg');}
                        .carousel-item--4 .carousel-item_image{background-image: url('../../pics/2018-Sh-06.jpg');}
                        .carousel-item--5 .carousel-item_image{background-image: url('../../pics/2018-Sh-08.jpg');}
                        .carousel-item_btn {width: 35%; color: #2C2C2C;font-family: 'Open Sans', sans-serif;
                        letter-spacing: 0.3vw;font-size: 1vw; text-transform: uppercase; margin: 0; width: 35%; 
                        font-weight: 700; text-decoration: none; transform: translateY(25%); opacity: 0; visibility: hidden;
                        transition: 0.6s all ease-in-out;}
                        .carousel_nav {position: absolute;right: 0; z-index: 2; background-color: #fff; bottom: 0;}
                        .carousel_icon {display: inline-block; vertical-align: middle; width: 1.5vw; fill: #5d5d5d;}
                        .carousel_arrow {cursor: pointer; display: inline-block; padding: 1.1vw 1.5vw; 
                            position: relative;}
                        .carousel_arrow:nth-child(1):after {content:'';right: -.3vw; position: absolute; width: 0.1vw; 
                        background-color: #b0b0b0; height: 1.4vw; top: 50%; margin-top: -.7vw;}
                        .active{z-index: 1; display: flex; visibility:visible;}
                        .active .carousel-item_subtitle, .active .carousel-item_title, .active .carousel-item_description,
                        .active .carousel-item_btn{transform: translateY(0); opacity: 1; transition: 0.6s all ease-in-out; 
                            visibility: visible;}
                        .active .carousel-item_image{transition: 0.6s all ease-in-out; transform: translateX(0);}
                    </style>
                    <script>
                        $(function(){
                            $('.carousel-item').eq(0).addClass('active');
                            var total = $('.carousel-item').length;
                            var current = 0;
                            $('#moveRight').on('click', function(){
                                var next=current;
                                current= current+1;
                                setSlide(next, current);
                            });
                            $('#moveLeft').on('click', function(){
                                var prev=current;
                                current = current- 1;
                                setSlide(prev, current);
                            });
                            function setSlide(prev, next){
                                var slide= current;
                                if(next>total-1){
                                slide=0;
                                current=0;
                                }
                                if(next<0){
                                slide=total - 1;
                                current=total - 1;
                                }
                                    $('.carousel-item').eq(prev).removeClass('active');
                                    $('.carousel-item').eq(slide).addClass('active');
                                setTimeout(function(){
            
                                },800);
                                console.log('current '+current);
                                console.log('prev '+prev);
                            }
                        });
                    </script>
                

                    <div>
                        <div class="container_a">
                            <div class="slider_a">
                            <ul class="slides_a">
                                <li class="slide_a"><img src="../../pics/2018-Sh-01.jpg"/></li>
                                <li class="slide_a"><img src="../../pics/2018-Sh-02.jpg" /></li>
                                <li class="slide_a"><img src="../../pics/2018-Sh-04.jpg" /></li>
                                <li class="slide_a"><img src="../../pics/2018-Sh-06.jpg" /></li>
                                <li class="slide_a"><img src="../../pics/2018-Sh-10.jpg" /></li>
                            </ul>
                            </div>
                            <div class="buttons">
                                <button type="button" class="btn btn-default pause">
                                    <span class="glyphicon glyphicon-pause">pause</span>
                                </button>
                                <button type="button" class="btn btn-default play">
                                    <span class="glyphicon glyphicon-play">play</span>
                                </button>
                            </div>
                        </div>
                    </div>
                    <style>
                        .slider_a { width: 40vw; height: 40vh; overflow: hidden; margin: 0 auto; text-align: center;}
                        .slides_a {display: block; width: 40vw; height: 40vh; margin: 0; padding: 0;}
                        .slide_a {float: left; list-style-type: none; width: 40vw; height: 40vh;}
                        .slide_a img {width: 100%; height: 100%;}
                        .buttons {width: 7vw; height: 2vw; position: relative;  top: 0vw; margin: 0 auto;}
                        .play {display: none;}
                        .btn {display: flex; height: 2vw; width: 5vw; padding: 1vw auto; text-align: center;}
                    </style>
                    <script>
                        var animationSpeed = 1000; // How quickly the next slide animates.
                        var pause = 3000; // The pause between each slide.
                        var interval;
                        function startSlider() {
                            interval = setInterval(function() {
                                $('.slides_a > li:first')
                                .fadeOut(animationSpeed)
                                .next()
                                .fadeIn(animationSpeed)
                                .end()
                                .appendTo('.slides_a');
                            }, pause);
                        }
                        startSlider();
                        $('.play').hide(); // Hiding the play button.
                        $('.pause').click(function() {
                            clearInterval(interval);
                            $(this).hide();
                            $('.play').show();
                        });
                        $('.play').click(function(){
                            startSlider();
                            $(this).hide();
                            $('.pause').show();
                        })
                    </script>