How can I get the caption to appear on the right side instead of the left side?
Here is the CSS code I am using:
#jumboCarousel {
margin-top: 70px;
min-height: 300px;
max-height: 600px;
min-width: 100%;
}
#jumboCarousel img {
min-height: 300px;
max-height: 600px;
min-width: 100%;
}
#jumboCarousel > .carousel-indicators > li {
border-radius: 0px;
min-width: 25px;
background-color: #9d9d9d;
border: 1px solid black;
margin-right: 10px;;
margin-left: 10px;;
}
#jumboCarousel > .carousel-indicators > .active {
background-color: orange;
}
#jumboCarousel .carousel-caption {
color: white;
xright: 58%;
text-align: center;
max-width: 300px;
right: 0;
top: 1px;
/*top: 50%; */
xtransform: translateY(-50%);
xbottom: initial;
background: rgba(0,0,0,0.5);
padding:10px;
height:100%;
}
.item {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}
To see the issue in action, visit my codepen: https://codepen.io/mrsalami/pen/VdeGYK?editors=1100