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

Need an Eye-caching Website - Contact Me Today !

Autoplay Carousel Timer

Autoplay Carousel Timer

  • 63
  • 18-Nov-2021

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);

 

 

Download

Atechseva
Typically replies within an hour

Atechseva
Hi there 👋

How can I help you?
×
Chat with Me