Javascript 我想让箭头滑块移动滑块图像

我有一个网站模板的问题。有一个滑块没有箭头来移动它的图像和它的移动自动，并为它制作箭头，但我需要JavaScript代码的帮助，使它移动滑块。模板是PHP

<div class="row">
<div id="client-logo" class="owl-carousel owl-theme" style="opacity: 1; display: block;">
      <div class="owl-wrapper-outer"><div class="owl-wrapper" style="width: 4500px; left: 0px; display: block; transition: all 800ms ease 0s; transform: translate3d(-250px, 0px, 0px);">

.下一圈{
位置：相对位置；
顶部：-65px；
转化：translateY（-50%）；
左：98%；
宽度：50px；
高度：50px；
边界半径：50%；
不透明度：0.5；
背景颜色：蓝色；
z指数：19；
}
.下一个{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
颜色：白色；
z指数：20；
}
.nextCircle:悬停{
不透明度：0.7；
光标：指针；
}
.fa.fa-箭头-右、.fa.fa-箭头-左{
字体大小：30px；
}
普雷维先生{
位置：相对位置；
顶部：-115px；
转化：translateY（-50%）；
右：2%；
宽度：50px；
高度：50px；
边界半径：50%；
不透明度：0.5；
背景颜色：蓝色；
z指数：19；
}
.以前的{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
颜色：白色；
z指数：20；
}
.prevCircle:悬停{
不透明度：0.7；
光标：指针；
}

代码末尾的箭头，我制作了CSS代码。我需要一个Javascript代码使箭头移动此滑块。

自定义解决方案1：

$（函数（）{
var i=0；
//单击“下一步”按钮时
$（'.next'）。在（“单击”，函数（）上）{
//将显示图片索引增加1
i=i+1；
//如果我们在映像队列的末尾，请将索引设置回0
如果（i=$（'img'）。长度）{
i=0；
}
//设置当前图像和上一图像
var currentimgimg=$（'img'）.eq（i）；
var prevImg=$（'img'）。等式（i-1）；
//调用函数以设置图像向右旋转的动画
动画图像（先前、当前图像）；
});
//单击“上一步”按钮时
$（'.previous'）。在（“单击”，函数（）上）{
//如果我们在图像队列的开头，将前一个图像设置为队列的第一个图像，将当前图像设置为队列的最后一个图像
如果（i==0）{
prevImg=$（'img'）。等式（0）；
i=$（'img'）。长度为1；
currentimgimg=$（'img'）。等式（i）；
}
//将显示图片索引减少1
否则{
i=i-1；
//设置当前和以前的图像
currentimgimg=$（'img'）。等式（i）；
prevImg=$（'img'）。等式（i+1）；
}
//调用函数以设置图像向左旋转的动画
animateImageLeft（上一个、当前个）；
});
//函数设置图像向左旋转的动画
函数animateImageLeft（prevImg、currentImg）{
//将要显示的图像从可见容器向右移动
css（{“左”：“100%”）；
//将要显示的图像从容器滑到可见容器上，使其从右向左滑动
当前img.animate（{“左”：“0%”，1000）；
//将上一张图像从右向左滑出容器
上一个动画（{“左”：“-100%”，1000）；
}
//函数设置图像向右旋转的动画
函数animateImage（prevImg、currentImg）{
//将要显示的图像向左移出容器
css（{“左”：“-100%”）；
//将要显示的图像从容器滑到容器上，使其从左向右滑动
当前img.animate（{“左”：“0%”，1000）；
//将图像从容器上滑动到容器下，使其从左向右滑动
上一个动画（{“左”：“100%”，1000）；
}
});
.owl旋转木马{
位置：相对位置；
宽度：80%；
身高：100%；
保证金：0自动；
溢出：隐藏；
}
.猫头鹰旋转木马img：第一个孩子{
位置：相对位置；
宽度：100%；
左：0%；
排名：0；
}
img{
位置：绝对位置；
宽度：100%；
左-100%；
排名：0；
}
.下一圈{
位置：绝对位置；
最高：50%；
转化：translateY（-50%）；
左：85%；
宽度：50px；
高度：50px；
边界半径：50%；
不透明度：0.5；
背景色：黑色；
z指数：19；
}
.下一个{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
颜色：白色；
z指数：20；
}
.nextCircle:悬停{
不透明度：0.7；
光标：指针；
}
.fa.fa-箭头-右、.fa.fa-箭头-左{
字体大小：30px；
}
普雷维先生{
位置：绝对位置；
最高：50%；
转化：translateY（-50%）；
右：85%；
宽度：50px；
高度：50px；
边界半径：50%；
不透明度：0.5；
背景色：黑色；
z指数：19；
}
.以前的{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
颜色：白色；
z指数：20；
}
.prevCircle:悬停{
不透明度：0.7；
光标：指针；
}

首先感谢您。。。但我不知道我将把这些代码放在哪里，在你的代码库中搜索owlCarousel init place谢谢，但它不起作用。。。我在我的帖子中添加了箭头的css代码进行了编辑。。。我只需要让这个箭头通过java脚本代码移动滑块。只有CSS不起作用，才会为thisHi@mohamedabdallah添加另一个解决方案我为您的情况添加了另一个自定义解决方案将此代码添加到您的项目中
<div class="owl-item" style="width: 250px;"><div class="client-logo item"> <a href="#" target="_blank"> <img src="login/pic/65874300338.jpg" alt=""> </a> </div></div></div></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>
.nextCircle {
position:relative;
top:-65px;
transform:translateY(-50%);
left:98%;
width:50px;
height:50px;
border-radius: 50%;
opacity:0.5;
background-color:blue;
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:relative;
top:-115px;
transform:translateY(-50%);
right:2%;
width:50px;
height:50px;
border-radius: 50%;
opacity:0.5;
background-color:blue;
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;
}