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. 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;
}