Style:New Products slider
@keyframes new-products-slider-keyframes {
0% {margin-left: 0;}
18% {margin-left: 0;}
20% {margin-left: -100%;}
38% {margin-left: -100%;}
40% {margin-left: -200%;}
58% {margin-left: -200%;}
60% {margin-left: -300%;}
78% {margin-left: -300%;}
80% {margin-left: -400%;}
98% {margin-left: -400%;}
100% {margin-left: -500%;}
}
@new-products-slider-width: 300px;/*same as images in template*/
overflow: hidden;
width: @new-products-slider-width;
margin-left: auto;
margin-right: auto;
>.new-products-slider-inner {
display: flex;
flex-direction: row;
width: 100%;
animation-name: new-products-slider-keyframes;
animation-duration: 25s !important;
animation-iteration-count: infinite !important;
animation-fill-mode: backwards;
>.new-products-slider-item {
width: 100%;
flex-shrink: 0;
display: grid;
grid-template-columns: max-content;
grid-template-rows: auto auto 1fr;
justify-content: center;
width: @new-products-slider-width;
>.new-products-slider-date {
font-style: italic;
font-size: 90%;
text-align: right;
}
>.new-products-slider-label {
text-align: center;
font-size: 105%;
font-weight: bold;
width: @new-products-slider-width;
}
>.new-products-slider-image {
text-align: center;
}
}
}