CSS Slider with Arrows Using Animation

$(function(){ var i= 0; //when the next button is clicked on $('.next').on("click", function(){  //increase the display picture index by 1  i = i + 1;  //if we are at the end of the image queue, set the index back to 0  if (i == $('img').length) {   i=0;  }  //set current image and previous image  var currentImg = $('img').eq(i);  var prevImg = $('img').eq(i-1);  //call function to animate the rotation of the images to the right  animateImage(prevImg, currentImg);  }); //when the previous button is clicked on $('.previous').on("click", function(){  //if we are at the beginning of the image queue, set the previous image to the first image and the current image to the last image of the queue  if (i==0) {    prevImg = $('img').eq(0);   i=$('img').length-1;   currentImg = $('img').eq(i);  }  //decrease the display picture index by 1  else {   i=i-1;   //set current and previous images   currentImg = $('img').eq(i);   prevImg = $('img').eq(i+1);  }  //call function to animate the rotation of the images to the left  animateImageLeft(prevImg, currentImg);  }); //function to animate the rotation of the images to the left function animateImageLeft(prevImg, currentImg) {  //move the image to be displayed off the visible container to the right  currentImg.css({"left":"100%"});  //slide the image to be displayed from off the container onto the visible container to make it slide from the right to left  currentImg.animate({"left":"0%"}, 1000);  //slide the previous image off the container from right to left  prevImg.animate({"left":"-100%"}, 1000); } //function to animate the rotation of the images to the right function animateImage(prevImg, currentImg) {  //move the image to be displayed off the container to the left  currentImg.css({"left":"-100%"});  //slide the image to be displayed from off the container onto the container to make it slide from left to right  currentImg.animate({"left":"0%"}, 1000);  //slide the image from on the container to off the container to make it slide from left to right  prevImg.animate({"left":"100%"}, 1000);  }});

.owl-carousel { position:relative; width:80%; height:100%; margin:0 auto; overflow:hidden;}
.owl-carousel img:first-child { position:relative; width:100%; left:0%; top:0;}
img { position:absolute; width:100%; left:-100%; top:0;}
.nextCircle { position:absolute; top:50%; transform:translateY(-50%); left:85%; width:50px; height:50px; border-radius: 50%; opacity:0.5; background-color:black; z-index:19; }
.next { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); color:white; z-index:20;
}
.nextCircle:hover{ opacity:0.7; cursor: pointer;}
.fa.fa-arrow-right, .fa.fa-arrow-left { font-size:30px;}
.prevCircle { position:absolute; top:50%; transform:translateY(-50%); right:85%; width:50px; height:50px; border-radius: 50%; opacity:0.5; background-color:black; z-index:19; }
.previous { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); color:white; z-index:20; }
.prevCircle:hover { opacity: 0.7; cursor: pointer;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"><div class="row">   <div id="client-logo" class="owl-carousel owl-theme" style="opacity: 1; display: block;">      <div class="owl-wrapper-outer">        <img src="https://images.unsplash.com/photo-1510797215324-95aa89f43c33?fit=crop&fm=jpg&h=800&q=80&w=1200" alt="Sample Image">        <img src="https://images.unsplash.com/photo-1513836279014-a89f7a76ae86?fit=crop&fm=jpg&h=800&q=80&w=120" alt="Sample Image">        <img src="https://images.unsplash.com/photo-1509149037-37dc57ccbd13?fit=crop&fm=jpg&h=800&q=80&w=1200" alt="Sample Image">        <img src="https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?fit=crop&fm=jpg&h=800&q=80&w=1200g" alt="Sample Image">      </div>   </div>   <div class="nextCircle">      <i class="fa fa-arrow-right next" aria-hidden="true"></i>   </div>   <div class="prevCircle">      <i class="fa fa-arrow-left previous" aria-hidden="true"></i>   </div></div>

slider with autoplay and next and previous arrows with CSS HTML JS

No need for a lib or framework to do that.
So, i already have to do this, it's not as complicated as it seems.
First, i used css pseudo class :checked and input type radio to choose which slide to display:

<div id="slider">
    <input type="radio" name="slider" checked> <!-- The first slide is displayed by default -->
    <div class="slide">...</div>

    <input type="radio" name="slider">
    <div class="slide">...</div>
    ...

    <div class="prev-button">prev</div>
    <div class="next-button">next</div>
</div>

And a bit of css :

#slider > .slide,
#slider > input[type="radio"]{
    display:none;
}
#slider > input[type="radio"]:checked + .slide{display:block;}

Then, it should be simpler with js:

window.addEventListener("load",function(){
    let timer; let delay = 4000;
    let loader = document.querySelector("#slider .loader");
    let inputs = Array.from(document.querySelectorAll('#slider > input[type="radio"]'));
    //first, the go function that choose which input to check
    let go = (prev=false)=>{
        let checked = document.querySelector('#slider > input[type="radio"]:checked');
        let index = inputs.indexOf(checked);

        let next = ((prev) ? index -1 : index + 1);
        if(next >= inputs.length) next = 0; //restart from beginning
        else if(next < 0 ) next = inputs.length -1; //go to the last slide

        //restart the progress bar
        loader.classList.remove("loader");
        loader.classList.add("loader");
        inputs[next].checked = true;

    };
    //Allow you to define some sort of recursive timeout, otherwise it works only once
    let defineTimer = (callback)=>{
        timer = setTimeout(()=>{
            callback();
            defineTimer(callback);
        },delay);
    };
    //next, autoplay :
    defineTimer(go);

    //next, buttons:
    let next = document.querySelector("#slider > .next-button");
    let prev = document.querySelector("#slider > .prev-button");

    //clear the timer with `clearTimeout` each time you click on a button, if you don't 
    //and the user click on a button 3900ms after the autoplay call, the next/prev slide will only be displayed 
    //for 100ms and then switch to the next, which can be disturbing for the user.
    next.addEventListener("click",()=>{
        go();
        clearTimeout(timer);
        defineTimer(go);
    });
    prev.addEventListener("click",()=>{
        go(true);
        clearTimeout(timer);
        defineTimer(go);
    });
});

Why it should works :
Every time the go function is called, it will select the next or previous input to check, accordingly to the currently checked one. So you can call it from the timer or not, it doesn't makes any difference.

Hope it answer your question :)

How to make slider arrows taller

I would create a container for them. Give the container a position: relative;, the arrows a position: absolute;, then you can use 100%.

The reason height: 100%; is not working right now is the browser doesn't know what to compare 100% to, since there is no given height for the parent element.

CSS: how we can do slide animation in slider?

Try the snippet here.
I just use CSS animations and a little update on javascript and CSS, but the animation itself is managed by CSS animation.

Please note, this is just an idea to manage left and right arrows buttons, you should also edit CSS for dots.

var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n, n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n, idx) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  if (n > slides.length) {
    slideIndex = 1
  }
  if (n < 1) {
    slideIndex = slides.length
  }
  for (i = 0; i < slides.length; i++) {
    slides[i].classList.remove("active");
    slides[i].classList.remove("from-left");
    slides[i].classList.remove("from-right");
  }
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }
  if (idx === undefined){
    idx=1;
  }
  if (idx < 1) {
    slides[slideIndex-1].classList.add("from-left");
  }else{
    slides[slideIndex-1].classList.add("from-right");
  }
  
  slides[slideIndex - 1].classList.add("active");
  dots[slideIndex - 1].className += " active";
}

/* Slideshow container */

.slideshow-container {
  width: 100%;
  position: relative;
  background: #f1f1f1f1;
  overflow: hidden;
}

section {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}


/* Slides */

.mySlides {
  position: relative;
  top: 0;
  padding: 80px;
  text-align: center;
  display:none;
  visibility: hidden;
  opacity: 0;
  /*transition: visibility 0s, opacity 5s linear;*/
}

.mySlides.active.from-left {
  visibility: visible;
  display:block;
  opacity: 1;
  -webkit-animation: linear;
  -webkit-animation-name: runLeft;
  -webkit-animation-delay: 0.001s;
  -webkit-animation-duration: 0.6s;
}

.mySlides.active.from-right {
  visibility: visible;
  display:block;
  opacity: 1;
  -webkit-animation: linear;
  -webkit-animation-name: runRight;
  -webkit-animation-duration: 0.6s;
  -webkit-animation-delay: 0.001s;
}

@-webkit-keyframes runLeft {
  0% {
    left:100%;
    opacity: 0.1;
  }
  50% { 
    
    left:50%;
    opacity: 0.5;
   }
  100% {
   
    left:0%;
    opacity: 1;
  }
}

@-webkit-keyframes runRight {
  0% {
    right:100%;
    opacity: 0.1;
  }
  50% { 
    right:50%;
    opacity: 0.5;
   }
  100% {
    right:0%;
    opacity: 1;
  }
}



/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 100px;
  width: auto;
  margin-top: -30px;
  padding: 16px;
  color: red;
  font-weight: bold;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  user-select: none;
}


/* Position the "next button" to the right */

.next {
  position: absolute;
  right: 0;
  border-radius: 3px 0 0 3px;
}


/* On hover, add a black background color with a little bit see-through */

.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
}


/* The dot/bullet/indicator container */

.dot-container {
  text-align: center;
  padding: 20px;
  background: #ddd;
}


/* The dots/bullets/indicators */

.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}


/* Add a background color to the active dot/circle */

.active,
.dot:hover {
  background-color: #717171;
}


/* Add an italic font style to all quotes */

q {
  font-style: italic;
}


/* Add a blue color to the author */

.author {
  color: cornflowerblue;
}

<section>
  <!-- Slideshow container -->
  <div class="slideshow-container">

    <!-- Full-width slides/quotes -->
    <div class="mySlides">
      <q>I love you the more in that I believe you had liked me for my own sake and for.</q>
      <p class="author">- John Keats</p>
    </div>

    <div class="mySlides">
      <q>But man is not made for defeat. A man can be destroyed but not defeated.</q>
      <p class="author">- Ernest Hemingway</p>
    </div>

    <div class="mySlides">
      <q>I have not failed. I've just found 10,000 ways that won't work.</q>
      <p class="author">- Thomas A. Edison</p>
    </div>

    <!-- Next/prev buttons -->
    <a class="prev" onclick="plusSlides(-1)">❮</a>
    <a class="next" onclick="plusSlides(1)">❯</a>
  </div>

  <!-- Dots/bullets/indicators -->
  <div class="dot-container">
    <span class="dot" onclick="currentSlide(1)"></span>
    <span class="dot" onclick="currentSlide(2)"></span>
    <span class="dot" onclick="currentSlide(3)"></span>
  </div>
</section>

.square.outbounded {
  background-color: blue;
  transform: translateX(200px) scale(0.5);
}

const square = document.querySelector('.square');
const buttonOutbound = document.querySelector('button.outboundButton');
const buttonReturn = document.querySelector('button.returnButton');


buttonOutbound.addEventListener('click', () => {

  square.className = 'square outbound';
  
  setTimeout(() => {
    square.classList.add('outbounded');
    square.classList.remove('outbound');
  }, 1000);
  
}, false);

buttonReturn.addEventListener('click', () => {

  square.className = 'square return';
  
  setTimeout(() => {
    square.classList.remove('return');
  }, 1000);
  
}, false);

.square {
  width: 100px;
  height: 100px;
  margin: 12px;
  background-color: red;
  transform: translateX(0) scale(1);
}

.square.outbounded {
  background-color: blue;
  transform: translateX(200px) scale(0.5);
}

.square.outbound {
  animation: animateSquare 1s linear normal forwards;
}

.square.return {
  animation: animateSquare 1s linear reverse forwards;
}

@keyframes animateSquare {
  
  100% {
    background-color: blue;
    transform: translateX(200px) scale(0.5);
  }
}

<div class="square"></div>
<button type="button" class="outboundButton">Outbound animation</button>
<button type="button" class="returnButton">Return animation</button>

.box {  width:50px;  height:50px;  margin:5px;  background:red;  position:relative;}.normal {  animation: move normal  2s linear forwards;}.reverse {  animation: move reverse 2s linear forwards;}
@keyframes move{  from {    left:0;  }  to {    left:300px;  }}

<div class="box normal">
</div>
<div class="box reverse">
</div>