Jump to content
Sign in to follow this  

How to place arrow to slideshow next and prev buttons

Recommended Posts


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;

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

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

.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:




Please advise. 

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this