I have this code and when I put the anchor (arrow img) outside, .MultiCarousel div it doesn't work. I didn't write the code but I think I should change something in JavaScript. I want the anchor outside the container div but with the same functionality. I am not very familiar with JavaScript so I don't know what to change. Can someone help?
$(document).ready(function () {
var itemsMainDiv = ('.MultiCarousel');
var itemsDiv = ('.MultiCarousel-inner');
var itemWidth = "";
$('.leftLst, .rightLst').click(function () {
var condition = $(this).hasClass("leftLst");
if (condition)
click(0, this);
else
click(1, this)
});
ResCarouselSize();
$(window).resize(function () {
ResCarouselSize();
});
//this function define the size of the items
function ResCarouselSize() {
var incno = 0;
var dataItems = ("data-items");
var itemClass = ('.item');
var id = 0;
var btnParentSb = '';
var itemsSplit = '';
var sampwidth = $(itemsMainDiv).width();
var bodyWidth = $('body').width();
$(itemsDiv).each(function () {
id = id + 1;
var itemNumbers = $(this).find(itemClass).length;
btnParentSb = $(this).parent().attr(dataItems);
itemsSplit = btnParentSb.split(',');
$(this).parent().attr("id", "MultiCarousel" + id);
if (bodyWidth >= 1200) {
incno = itemsSplit[3];
itemWidth = sampwidth / incno;
}
else if (bodyWidth >= 992) {
incno = itemsSplit[2];
itemWidth = sampwidth / incno;
}
else if (bodyWidth >= 768) {
incno = itemsSplit[1];
itemWidth = sampwidth / incno;
}
else {
incno = itemsSplit[0];
itemWidth = sampwidth / incno;
}
$(this).css({ 'transform': 'translateX(0px)', 'width': itemWidth * itemNumbers });
$(this).find(itemClass).each(function () {
$(this).outerWidth(itemWidth);
});
$(".leftLst").addClass("over");
$(".rightLst").removeClass("over");
});
}
//this function used to move the items
function ResCarousel(e, el, s) {
var leftBtn = ('.leftLst');
var rightBtn = ('.rightLst');
var translateXval = '';
var divStyle = $(el + ' ' + itemsDiv).css('transform');
var values = divStyle.match(/-?[\d\.]+/g);
var xds = Math.abs(values[4]);
if (e == 0) {
translateXval = parseInt(xds) - parseInt(itemWidth * s);
$(el).siblings(rightBtn).removeClass("over");
if (translateXval <= itemWidth / 2) {
translateXval = 0;
$(el).siblings(leftBtn).addClass("over");
}
}
else if (e == 1) {
var itemsCondition = $(el).find(itemsDiv).width() - $(el).width();
translateXval = parseInt(xds) + parseInt(itemWidth * s);
$(el).siblings(leftBtn).removeClass("over");
if (translateXval >= itemsCondition - itemWidth / 2) {
translateXval = itemsCondition;
$(el).siblings(rightBtn).addClass("over");
}
}
$(el + ' ' + itemsDiv).css('transform', 'translateX(' + -translateXval + 'px)');
}
//It is used to get some elements from btn
function click(ell, ee) {
var Parent = "#" + $(ee).siblings( '.MultiCarousel' ).attr("id");
var slide = $(Parent).attr("data-slide");
ResCarousel(ell, Parent, slide);
}
});.MultiCarousel {
float: left;
overflow: hidden;
padding: 15px;
width: 100%;
position:relative;
box-sizing: border-box;
}
.MultiCarousel .MultiCarousel-inner {
transition: 1s ease all;
float: left;
}
.MultiCarousel .MultiCarousel-inner .item {
float: left;
}
.MultiCarousel .MultiCarousel-inner .item > div {
text-align: center;
padding:10px;
margin:10px;
color:#666;
}
.leftLst, .rightLst {
position:absolute;
border-radius:50%;
top:calc(50% - 20px);
background: red;
width: 50px;
height: 50px;
}
.leftLst {
left:0;
}
.rightLst {
right:0;
}
.leftLst.over, .rightLst.over {
pointer-events: none;
background:#ccc;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="MultiCarousel" data-items="1,2,3,4" data-slide="1" id="MultiCarousel" data-interval="1000">
<div class="MultiCarousel-inner">
<div class="item">
<div class="col-xl-3 pad15">
<img src="images/cert4.png" class="d-block w-100" alt="...">
<div class="onhover"><span>Certifikata per Atesimin e Kaldajes Elektrike</span></div>
</div>
</div>
<div class="item">
<div class="col-xl-3 pad15">
<img src="images/cert2.png" class="d-block w-100" alt="...">
<div class="onhover"><span>Certifikata per Atesimin e Kaldajes Elektrike</span></div>
</div>
</div>
<div class="item">
<div class="col-xl-3 pad15">
<img src="images/cert3.png" class="d-block w-100" alt="...">
<div class="onhover"><span>Certifikata per Atesimin e Kaldajes Elektrike</span></div>
</div>
</div>
<div class="item">
<div class="col-xl-3 pad15">
<img src="images/cert7.png" class="d-block w-100" alt="...">
<div class="onhover"><span>Certifikata per Atesimin e Kaldajes Elektrike</span></div>
</div>
</div>
<div class="item">
<div class="col-xl-3 pad15">
<img src="images/cert4.png" class="d-block w-100" alt="...">
<div class="onhover"><span>Certifikata per Atesimin e Kaldajes Elektrike</span></div>
</div>
</div>
<div class="item">
<div class="col-xl-3 pad15">
<img src="images/cert2.png" class="d-block w-100" alt="...">
<div class="onhover"><span>Certifikata per Atesimin e Kaldajes Elektrike</span></div>
</div>
</div>
<div class="item">
<div class="col-xl-3 pad15">
<img src="images/cert3.png" class="d-block w-100" alt="...">
<div class="onhover"><span>Certifikata per Atesimin e Kaldajes Elektrike</span></div>
</div>
</div>
<div class="item">
<div class="col-xl-3 pad15">
<img src="images/cert7.png" class="d-block w-100" alt="...">
<div class="onhover"><span>Certifikata per Atesimin e Kaldajes Elektrike</span></div>
</div>
</div>
</div>
<a class=" leftLst"><img src="images/left_arrow.svg" alt=""></a>
<a class=" rightLst"><img src="images/right_arrow.svg" alt=""></a>
</div>
</div>
</div>