website-developer-in-meerut
website-designer-in-meerut
freelance-webite-developer

Need an Eye-caching Website - Contact Me Today !

image-carousel-with-navigation-arrows-and-autoplay-timer

Autoplay Carousel Timer

  • 107
  • 18-Nov-2021
  • Details

    Folder Structure

     

    index.html
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="css/jquery.carousel-line-arrow.css" />
        <link rel="stylesheet" href="css/style.css" />
        <link href="https://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css" />
        <title>Carousel With Navigation Arrows And Autoplay Timer Example</title>
      </head>
    
      <body>
        <div class="wrapper">
          <div class="your-slider">
            <div class="your-slider-item">
              <img src="https://source.unsplash.com/1600x900/?nature" alt="" />
            </div>
            <div class="your-slider-item">
              <img src="https://source.unsplash.com/1600x900/?mountain" alt="" />
            </div>
            <div class="your-slider-item">
              <img src="https://source.unsplash.com/1600x900/?computer" alt="" />
            </div>
            <div class="your-slider-item">
              <img src="https://source.unsplash.com/1600x900/?hacker" alt="" />
            </div>
          </div>
        </div>
    
        <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
        <script src="js/jquery.carousel-line-arrow.js"></script>
        <script src="js/main.js"></script>
      </body>
    </html>
    

     

    style.css
    * {
         margin: 0;
         padding: 0;
    }
     body .wrapper {
         max-width: 100%;
    }
     body .wrapper .your-slider {
         width: 100%;
    }
     .carousel-wrapper-middle {
         height: 450px;
    }
    

     

    jquery.carousel-line-arrow.css
    .carouselLineArrow-line {
         position: absolute;
         left: 0;
         width: 100%;
    }
     .carouselLineArrow-line .carouselLineArrow-innerline {
         height: 100%;
         width: 0%;
    }
     .carouselLineArrow-arrow {
         position: absolute;
         width: 50px;
         height: 50px;
         border-radius: 50%;
         background-color: rgba(255, 255, 255, 0.5);
         top: 50%;
         -webkit-transform: translateY(-50%);
         transform: translateY(-50%);
         -webkit-transition: .3s;
         transition: .3s;
         cursor: pointer;
         -webkit-box-shadow: 0 0 10px 0px rgba(0, 0, 0, 0.5);
         box-shadow: 0 0 10px 0px rgba(0, 0, 0, 0.5);
    }
     .carouselLineArrow-arrow:hover {
         background-color: white;
    }
     .carouselLineArrow-arrow.carouselLineArrow-arrow-left {
         left: -50px;
    }
     .carouselLineArrow-arrow.carouselLineArrow-arrow-left:hover .carouselLineArrow-arrow-inner {
         -webkit-transform: rotate(-360deg);
         transform: rotate(-360deg);
    }
     .carouselLineArrow-arrow.carouselLineArrow-arrow-left .carouselLineArrow-arrow-inner {
         height: 100%;
         width: 100%;
         -webkit-transition: .3s;
         transition: .3s;
    }
     .carouselLineArrow-arrow.carouselLineArrow-arrow-left .carouselLineArrow-arrow-inner:before {
         position: absolute;
         content: '';
         background-color: #222;
         height: 4px;
         width: 30px;
         top: 50%;
         right: 5px;
         -webkit-transform: translate(0%, -50%);
         transform: translate(0%, -50%);
    }
     .carouselLineArrow-arrow.carouselLineArrow-arrow-left .carouselLineArrow-arrow-inner:after {
         position: absolute;
         content: '';
         height: 0px;
         width: 0px;
         border: 10px solid transparent;
         border-right: 10px solid #222;
         top: 50%;
         right: 34px;
         -webkit-transform: translate(0, -50%);
         transform: translate(0, -50%);
    }
     .carouselLineArrow-arrow.carouselLineArrow-arrow-right {
         right: -50px;
    }
     .carouselLineArrow-arrow.carouselLineArrow-arrow-right:hover .carouselLineArrow-arrow-inner {
         -webkit-transform: rotate(360deg);
         transform: rotate(360deg);
    }
     .carouselLineArrow-arrow.carouselLineArrow-arrow-right .carouselLineArrow-arrow-inner {
         height: 100%;
         width: 100%;
         -webkit-transition: .3s;
         transition: .3s;
    }
     .carouselLineArrow-arrow.carouselLineArrow-arrow-right .carouselLineArrow-arrow-inner:before {
         position: absolute;
         content: '';
         background-color: #222;
         height: 4px;
         width: 30px;
         top: 50%;
         left: 5px;
         -webkit-transform: translate(0%, -50%);
         transform: translate(0%, -50%);
    }
     .carouselLineArrow-arrow.carouselLineArrow-arrow-right .carouselLineArrow-arrow-inner:after {
         position: absolute;
         content: '';
         height: 0px;
         width: 0px;
         border: 10px solid transparent;
         border-left: 10px solid #222;
         top: 50%;
         left: 34px;
         -webkit-transform: translate(0, -50%);
         transform: translate(0, -50%);
    }
     .carousel-wrapper-middle:hover .carouselLineArrow-arrow.carouselLineArrow-arrow-left {
         left: 20px;
    }
     .carousel-wrapper-middle:hover .carouselLineArrow-arrow.carouselLineArrow-arrow-right {
         right: 20px;
    }
    

     

    main.js
    $(function ()
    {
        $('.your-slider').carouselLineArrow(
        {
            lineDur: 6000, //duration of line-time animation (ms), default is 5000
            slideDur: 600, //duration of toggle slide animation (ms), default is 500
            heightIsProportional: true, // height of slider is proportional to the width when resized, defaultl is true
            linePosition: 'bottom', // position of line-time: 'bottom' or 'top', default is 'bottom'
            lineHeight: '10px', // height of line-time (px, em, rem, %), default is '5px';
            lineColor: '#7fff95' // color of line-time, default is 'red'
        });
    })

     

    jquery.carousel-line-arrow.js
    (function ($)
    {
        jQuery.fn.carouselLineArrow = function (options)
        {
            options = $.extend(
            {
                lineDur: 5000, //duration of line-time animation (ms), default is 5000
                slideDur: 500, //duration of toggle slide animation (ms), default is 500
                heightIsProportional: true, // height of slider is proportional to the width when resized, defaultl is true
                linePosition: "bottom", // position of line-time: 'bottom' or 'top', default is 'bottom'
                lineHeight: "5px", // height of line-time (px, em, rem, %), default is '5px';
                lineColor: "red", // color of line-time, default is 'red'
            }, options);
            let make = function ()
            {
                $(this).css("overflow", "hidden");
                let $this = $(this);
                let items = $(this).children();
                let imgItem = items.first().children();
                let imgsItem = items.children();
                let imgWidth = imgItem.width();
                let imgHeight = imgItem.height();
                let proportial = imgHeight / imgWidth;
                $(this).wrap("<div class='carousel-wrapper-middle'></div>");
                $(".carousel-wrapper-middle").wrap("<div class='carousel-wrapper-outer'></div>");
                $(".carousel-wrapper-outer").css("width", "100%");
                $(".carousel-wrapper-middle").css("width", "100%");
                if (options.heightIsProportional)
                {
                    $(".carousel-wrapper-middle").css("padding-bottom", proportial * 100 + "%");
                }
                else
                {
                    wrapperWidth = $(".carousel-wrapper-outer").width();
                    $(".carousel-wrapper-middle").css("padding-bottom",
                        (imgHeight * wrapperWidth) / imgWidth);
                }
                $(".carousel-wrapper-middle").css("position", "relative");
                $(this).css("position", "absolute");
                $(this).css("width", "100%");
                $(this).css("height", "100%");
                $(this).css("top", "0%");
                $(this).css("left", "0%");
                items.css("position", "absolute");
                items.css("width", "100%");
                items.css("height", "100%");
                items.css("top", "0%");
                items.css("left", "0%");
                //imgsItem.css('max-width', '100%');
                imgsItem.css("width", "100%");
                imgsItem.css("height", "100%");
                imgsItem.css("object-fit", "cover");
                items.css("display", "none");
                items.eq(0).css("display", "block");
                $(this).append('<div class="carouselLineArrow-line"><div class="carouselLineArrow-innerline"></div></div>');
                let line = $(this).children(".carouselLineArrow-line");
                line.css(options.linePosition, "0");
                line.css("height", options.lineHeight);
                let innerLine = line.children(".carouselLineArrow-innerline");
                innerLine.css("background-color", options.lineColor);
                $(this).append('<div class="carouselLineArrow-arrow carouselLineArrow-arrow-right"><div class="carouselLineArrow-arrow-inner"></div></div>');
                $(this).append('<div class="carouselLineArrow-arrow carouselLineArrow-arrow-left"><div class="carouselLineArrow-arrow-inner"></div></div>');
                let arrowLeft = $this.children(".carouselLineArrow-arrow-left");
                let arrowRight = $this.children(".carouselLineArrow-arrow-right");
                let iLast = items.length - 1;
                let iCurr = 0;
                let iNext;
                let iPrev;
                let sliderHover = false;
                let lineIsAnim = false;
                let slideIsAnim = false;
                
                function nextI(i)
                {
                    return i < iLast ? i + 1 : 0;
                }
                
                function prevI(i)
                {
                    return i > 0 ? i - 1 : iLast;
                }
                
                function afterSlideAnimateLeft()
                {
                    slideIsAnim = false;
                    items.each(function (index)
                    {
                        if (index !== iCurr)
                        {
                            items.eq(index).css("display", "none");
                        }
                    });
                    lineIsAnim = true;
                    //console.log(`lineIsAnim = ${lineIsAnim}`);
                    if (!sliderHover)
                    {
                        innerLine.animate(
                        {
                            width: "100%",
                        }, options.lineDur, afterLineAnimateLeft);
                    }
                }
                
                function afterLineAnimateLeft()
                {
                    lineIsAnim = false;
                    innerLine.css("width", "0");
                    iNext = nextI(iCurr);
                    items.eq(iCurr).css("display", "block");
                    items.eq(iNext).css("display", "block");
                    items.eq(iCurr).css("left", "0%");
                    items.eq(iNext).css("left", "99%");
                    slideIsAnim = true;
                    items.eq(iCurr).animate(
                    {
                        left: "-99%",
                    }, options.slideDur, afterSlideAnimateLeft);
                    items.eq(iNext).animate(
                    {
                        left: "0%",
                    }, options.slideDur);
                    if (iCurr < iLast)
                    {
                        iCurr++;
                    }
                    else
                    {
                        iCurr = 0;
                    }
                }
                
                function afterLineAnimateRight()
                {
                    lineIsAnim = false;
                    innerLine.css("width", "0");
                    iPrev = prevI(iCurr);
                    items.eq(iCurr).css("display", "block");
                    items.eq(iPrev).css("display", "block");
                    items.eq(iCurr).css("left", "0%");
                    items.eq(iPrev).css("left", "-99%");
                    slideIsAnim = true;
                    items.eq(iCurr).animate(
                    {
                        left: "99%",
                    }, options.slideDur, afterSlideAnimateLeft);
                    items.eq(iPrev).animate(
                    {
                        left: "0%",
                    }, options.slideDur);
                    if (iCurr > 0)
                    {
                        iCurr--;
                    }
                    else
                    {
                        iCurr = iLast;
                    }
                }
                lineIsAnim = true;
                if (!sliderHover)
                {
                    innerLine.animate(
                    {
                        width: "100%",
                    }, options.lineDur, afterLineAnimateLeft);
                }
                $(this).on("mouseenter", function ()
                {
                    sliderHover = true;
                    if (lineIsAnim)
                    {
                        innerLine.stop();
                        innerLine.css("width", "0%");
                        lineIsAnim = false;
                    }
                });
                $(this).on("mouseleave", function ()
                {
                    sliderHover = false;
                    if (!slideIsAnim)
                    {
                        lineIsAnim = true;
                        if (!sliderHover)
                        {
                            innerLine.animate(
                            {
                                width: "100%",
                            }, options.lineDur, afterLineAnimateLeft);
                        }
                    }
                });
                arrowLeft.on("click", function ()
                {
                    if (!slideIsAnim)
                    {
                        afterLineAnimateLeft();
                    }
                });
                arrowRight.on("click", function ()
                {
                    if (!slideIsAnim)
                    {
                        afterLineAnimateRight();
                    }
                });
            };
            return this.each(make);
        };
    })(jQuery);

whatsapp

Sagar Kumar
Typically replies within an hour

Atechseva
Hi there 👋

How can I help you?
×
Chat