.jcarousel-wrapper {
position : relative;
width : 1024px;
}
.jcarousel {
width : 100%;
overflow : hidden;
padding-left : 30px;
margin-top : 20px;
margin-bottom : 20px;
}
.jcarousel-wrapper::before {
right : 0;
background : linear-gradient(90deg, hsl(0 0% 100% / 0) 0, #fff);
content : " ";
position : absolute;
top : 0;
bottom : 0;
width : 110px;
z-index : 1;
}
.jcarousel-wrapper::after {
left : 0;
background : linear-gradient(90deg, var(--color-bg) 0, hsl(0 0% 100% / 0));
content : " ";
position : absolute;
top : 0;
bottom : 0;
width : 110px;
z-index : 1;
}
.jcarousel > div {
position : relative;
width : 1000em;
list-style : none;
margin : 15px 0 0 0;
padding : 0;
}
.jcarousel > div > div {
float : left;
}
.jcarousel-control-prev, .jcarousel-control-next {
position : absolute;
top : 50%;
margin-top : -15px;
text-align : center;
color : var(--color-primary);
text-decoration : none !important ;
font : 50px/27px Tahoma, Verdana, sans-serif;
box-shadow : 0 2px 19px rgb(65, 85, 108, 0.2);
transition : 0.3s;
z-index : 2;
}
.jcarousel-control-prev:hover, .jcarousel-control-next:hover {
color : var(--color-primary-light);
box-shadow : 0 2px 19px var(--color-primary-lighter);
}
.jcarousel-control-prev {
left : 0;
background : var(--color-bg);
line-height : 32px;
width : 40px;
height : 40px;
margin : 0 auto;
border-radius : 50px;
padding-right : 3px;
}
.jcarousel-control-next {
right : 0;
background : var(--color-bg);
line-height : 32px;
width : 40px;
height : 40px;
margin : 0 auto;
border-radius : 50px;
padding-left : 3px;
}
@media only screen and (max-width: 768px) {
.jcarousel-wrapper {
position : relative;
width : 100%;
}
.jcarousel {
padding-left : 0;
}
.jcarousel-control-prev, .jcarousel-control-next {
top : 41.9% !important ;
}
.jcarousel-wrapper::before {
width : 55px;
}
.jcarousel-wrapper::after {
width : 55px;
}
}
@media (max-width: 767px) {
.jcarousel-control-prev, .jcarousel-control-next {
top : 42.9% !important ;
line-height : 32px !important ;
}
.jcarousel-wrapper::before {
display : none;
}
.jcarousel-wrapper::after {
display : none;
}
.jcarousel-wrapper {
margin-top : 0 !important ;
}
.jcarousel-pagination {
bottom : 20px !important ;
margin-bottom : -45px !important ;
width : 190px;
z-index : 1;
}
.jcarousel-pagination a {
height : 16px !important ;
width : 40px !important ;
}
}
.jcarousel-pagination {
position : absolute;
bottom : -20px;
left : 50%;
transform : translate(-50%,0);
margin : 0;
}
.jcarousel-pagination a {
text-decoration : none;
display : inline-block;
font-size : 11px;
height : 10px;
width : 30px;
line-height : 10px;
background : rgb(140, 140, 140);
border-radius : 10px;
text-indent : -9999px;
margin-right : 7px;
border-bottom: none !important;
opacity : 0.3;
}
.jcarousel-pagination a.active {
background: rgb(140, 140, 140);
color : #fff;
opacity : 1;
}