few issues

Hi anand99
In your site you are using css to put a square around the arrows using css so Most of the things you are mentioning can be achieved using css.
Pointwise/serialwise answers
1.The arrow can be adjusted using top property of arrows.Eg
.rvpscarousel .slick-prev, .rvpscarousel .slick-next {
top: 40%;
}
2. The arrows are inside the container because there may be a situation when the container is full screen & in that case the arrows will overflow.Again if you want the arrows to be outside the container , you can target the left & right property.Eg
.rvpscarousel .slick-next {
right: -40px;
}
.rvpscarousel .slick-prev {
left: -40px;
}
3.Change position by adjusting top , right or left prop as above
4. & 5. I would consider this in future updates
6. The plugin doesnot specify the container width, it takes space alloted by the theme
7. The z-index is more because it should overlap the images/slides.Ofcourse if you move it out of the container then no need for higher z-index.To over-ride you can mark the new z-index as !important in theme css
Hope the answers would solve the queries
Thanks
Rajnish

1.in case 6, the product container in other places doesn’t have any problem,here the heart symbol is contained inside the container
2.https://pasteboard.co/JLQwKnh.png
3 https://pasteboard.co/JLQxMAa.png

1. The heart symbol and the text introduced by some other plugin overflows out of the container in mobile view.One quickfix could be to move the whole symbol & text towards right.Eg
.products .product .tinv-wraper.tinv-wishlist {
right: 3px;
}
its right:10px ; reduce it to 3px or 4px (only in mobile view using media query)
2.Increase the height of the box as arrows are positioned absolute. Eg
.rvpscarousel .slick-prev, .rvpscarousel .slick-next {
height: 75px;
}
Change height to suit your requirements.However I would not advice to put a border on arrows
3 . Increase the z-index of the header, if you want it to remain at top. Eg
#site-header{
z-index:101;
}

from above
1. css for case no. 1 doesn’t work, here it is seen that the width of the product container of the recently viewed products is small, is it possible to increase the width of the product container to that fits the screen (2 columns for mobile view)
reference can be taken from the related products (product containers) from the same page (for both the mobile and desktop version the product containers are stretched)

2. css provided in case 2 only increases the height of box , but my requirement is to bring the arrows to the center of the box