How to place arrow to slideshow next and prev buttons

[newcoder1010]

Hello,

I created a slideshow in carousel and I had white color arrows of prev and next buttons. I applied some css animation and now the arrows are gone. Instead, I see white color square. 

Below is the css:

.carousel-control.left {
 left: 22px;
 opacity: 1;
}


css_injector_4.css?p4k674:194
.carousel-control.left, .carousel-control.right {
 position: absolute;
 z-index: 100;
 top: 50%;
 margin-top: -30px;
 opacity: 0;
 color: #fff;
 font-size: 0px;
 -webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
 transition: all 0.2s ease-in-out;
 text-shadow: none;
 width: 30px;
 height: 30px;
}


css_injector_4.css?p4k674:183
.carousel-control.left {
 left: -22px;
}


bootstrap.css? [sm]:6306
.carousel-control.left {
 background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .0001) 100%);
background-image: -o-linear-gradient(left, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .0001) 100%);
 background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, .5)), to(rgba(0, 0, 0, .0001)));
 background-image: linear-gradient(to right, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .0001) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1);
 background-repeat: repeat-x;
}


opacity.less:7
.carousel-control {
 position: absolute;
 top: 0;
 bottom: 0;
 left: 0;
 width: 15%;
 font-size: 20px;
 color: #fff;
 text-align: center;
 text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
 background-color: rgba(0, 0, 0, 0);
filter: alpha(opacity=50);
 opacity: .5;
}

 

Image to see the page in chrome inspect:

 

https://drive.google.com/open?id=1U0G2BXb1kDOvQIM-x_Zk67VLY-CXyebO

 

Please advise. 

[newcoder1010]

Never  mind. I removed some code and now it is working. Thanks.