Was ist das für ein Modul zum Grafik-scrolen

.carousel-container {
clear: both;
position: relative;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.carousel-container .carousel {
width: 600px;
float: left;
}
.carousel-container .awards {
z-index: 11;
position: absolute;
left: 10px;
top: 10px;
margin: 0;
text-transform: uppercase;
}
.carousel-container .awards span {
margin: 0;
background-color: #333333;
color: #fff;
padding: 0 0 0 8px;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
height: 20px;
line-height: 20px;
}
.carousel-container .awards span span {
padding: 0 5px;
display: inline-block;
margin-left: 4px;
}
.carousel-container .awards .label-new span {
background-color: #ff2121;
}
.carousel-container .awards .label-community_choice span {
background-color: #0099de;
}
.carousel-container .awards .label-popular span {
background-color: #00a500;
}
.carousel-container .view {
width: 300px;
height: 300px;
overflow: hidden;
position: relative;
}
.carousel-container .view .carousel-control {
left: 45%;
font-size: 2.5em;
position: absolute;
}
.carousel-container .view .carousel-control.bottom {
bottom: 10px;
top: inherit;
}
.carousel-container .view .carousel-control.top {
top: 10px;
}
.carousel-container .carousel-thumbs {
padding: 0;
margin: 0;
list-style: none;
}
.carousel-container .carousel-thumbs img {
width: 300px;
height: 100px;
}
.carousel-container .versions {
position: absolute;
top: 0;
right: 0;
z-index: 1;
}
.slider-full-images {
width: 100%;
position: relative;
height: 100%;
}
.slider-full-images .mask {
overflow: hidden;
height: 100%;
position: relative;
}
.slider-full-images .item {
width: 100%;
height: 100%;
position: absolute;
top: 0;
}
.slider-full-images .item img {
width: 100%;
/* height: 100%; */
/*makes images not-responsive - leave to auto to rescale on resize*/
}
.slider-full-images .item.active {
z-index: 1;
}
.slider-full-images .item.active img {
-webkit-filter: grayscale(0);
-ms-filter: grayscale(0);
filter: grayscale(0);
}
.slider:hover span[data-thumb="previous"],
.slider:hover span[data-thumb="next"] {
-moz-opacity: 1;
opacity: 1;
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
filter: alpha(opacity=100);
}
.slider:hover span[data-thumb="next"] {
right: 10px;
}
.slider:hover span[data-thumb="previous"] {
left: 10px;
}
.slider {
position: relative;
margin-bottom: 20px;
background-color: #f5f5f5;
max-height: 511px;
}
.slider .versions {
z-index: 11;
position: absolute;
right: 10px;
top: 10px;
}
.slider span[data-thumb="previous"],
.slider span[data-thumb="next"] {
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
position: absolute;
z-index: 999;
color: #0099de;
cursor: pointer;
top: 42%;
-moz-opacity: 0;
opacity: 0;
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
filter: alpha(opacity=0);
}
.slider span[data-thumb="previous"].muted,
.slider span[data-thumb="next"].muted {
color: #8fa7a8;
}
.slider span[data-thumb="next"] {
right: -10px;
}
.slider span[data-thumb="previous"] {
left: -10px;
}
.slider span[data-thumb="next"]:hover,
.slider span[data-thumb="previous"]:hover {
-moz-opacity: 1;
opacity: 1;
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
filter: alpha(opacity=100);
}
.slider .slider-text {
z-index: 999;
background-color: rgba(0, 0, 0, 0.8);
color: #fff;
bottom: 0;
position: absolute;
width: 100%;
}
.slider .slider-text > div {
padding: 10px 10px 10px 20px;
}
.slider .slider-text > div h2 {
text-transform: uppercase;
color: #fff;
padding: 0;
margin: 0;
overflow: hidden;
height: 23px;
text-overflow: ellipsis;
width: 525px;
}
.slider .slider-text .more-arrow {
position: absolute;
right: 0;
bottom: 0;
border-left: 1px solid rgba(255, 255, 255, 0.3);
height: 52px;
padding: 8px 20px;
text-align: center;
}
.slider .slider-text .more-arrow span {
color: #fff;
}
/** Set the responsive break point heights for the slide show.
Used to ensure that the video shows its controls. We were getting the largest
Image's height but that could be less than the max height in which case the video
controls were cut off*/
@media (min-width: 1200px) {
.view-extension .slider {
height: 511px;
}
}
@media (min-width: 979px) and (max-width: 1199px) {
.view-extension .slider {
height: 411px;
}
}
@media (min-width: 768px) and (max-width: 978px) {
.view-extension .slider {
height: 317px;
}
}
@media (max-width: 767px) {
.view-extension .slider {
height: 40vw;
}
}
@media (max-width: 480px) {
.view-extension .slider {
height: 38vw;
}
}