Ok. Here is how you can do it using custom CSS. From the Admin Dashboard click on ShortCodes Settings and then the tab for Custom CSS. Paste the following code
.myown .su-carousel-prev,
.myown .su-carousel-next {
position: absolute;
top: 50%;
display: block;
width: 40px;
height: 40px;
margin-top: -20px;
background: rgb(0, 0, 0) 0 0 url('%plugin_url%/assets/images/swiper/default.png') no-repeat;
background-color: rgba(0, 0, 0, 0.5);
cursor: pointer;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
filter: alpha(opacity=0);
opacity: 0.7;
transition: all .2s;
-o-transition: all .2s;
-ie-transition: all .2s;
-moz-transition: all .2s;
-webkit-transition: all .2s;
}
.myown .su-carousel-prev {
right: 20px;
margin-right: 0px;
background-position: -40px 0;
}
.myown .su-carousel-next {
left: 20px;
margin-left: 0px;
background-position: 0 0;
}
.myown:hover .su-carousel-prev,
.myown:hover .su-carousel-next {
margin-left: 0;
margin-right: 0;
filter: alpha(opacity=70);
opacity: 0.7;
}
.myown .su-carousel-prev:hover,
.myown .su-carousel-next:hover {
filter: alpha(opacity=100);
opacity: 1;
}
where you can replace myown with the class name of your choice. While creating the carousel, add your class name (myown in this example) in the popup (it is the last field). This should work.
What I have changed Here are the changes, (1) Set initial opacity for the nav items to .7 (from 0)
(2) reduced the margin for the arrows so that the default position is not too intrusive
