如何在旋转木马中循环

Question

循环传送带的最佳方式是什么？是否有可能知道幻灯片何时到达结尾并将其带回开头，反之亦然？。我试着用"--每个屏幕的项目"；CSS中的变量，但它只在桌面版本中有效，我无法在移动版本中修复它

function MoveElements () {
let initialCounter= 0;

function nextElement () {
$(":root")[0].style.setProperty("--slider-index",++initialCounter);
}
function prevElement () {
$(":root")[0].style.setProperty("--slider-index", --initialCounter);
}
$('.carouselnav.next').click(nextElement)
$('.carouselnav.prev').click(prevElement)
} 
MoveElements ();

*{
margin:0;
padding:0;
box-sizing:border-box;
}
:root{
--handle-size:3rem;
--img-gap:.25rem;
--slider-index:0;
--items-per-screen:5;
}
body{
background:#f3f3f3;
}
.container{
width:100%;

position:relative;
}
.carouselcontainer{
max-width:1360px;
margin:50px auto;
background:#f1f1f1;
position:relative;
overflow:hidden;
}
.caroufredsel_wrapper{
width:100%;
}
.shopWindow{
display:flex;
justify-content:space-between;
transform: translateX(calc(var(--slider-index) * -100%));
transition:transform 0.5s cubic-bezier(0.96, -0.17, 0.07, 0.80);

}
.shopWindow .grid-unit {
flex-shrink: 0;
width: 144px;
/*width: calc(100% / 5);*/
width:calc(100% / var( --items-per-screen));
max-width:100%;
padding-right: 5px !important;
margin-right: 0 !important;
}
.shopWindow .thumb{
position: relative;
overflow: hidden;
padding: 45px 10px;
background: #fff;
}
.shopWindow .grid-unit .grid-unit-inner .item .thumb .img-responsive {
display:block;
margin: 0 auto;
max-width:100%;
}
.shopWindow .item .itemInfo {
padding: 20px 0;
background: #fafafa;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
font-weight: 500;
text-align: center;
}
.shopWindow .item .trademark {
margin-bottom: 4px;
}
.shopWindow .item .title {
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
margin-bottom: 9px;
}
.shopWindow .item .trademark a {
line-height: 16px;
font-size: 14px;
color: #000;
font-weight: 600;
text-transform: uppercase;
}
.shopWindow .item .title a {
line-height: 19px;
font-size: 14px;
color: #000;
text-decoration: none;
font-weight: 400;
}
.shopWindow .item .campaignContainer {
display: flex;
margin-bottom: 10px;
height: 30px;
}
.shopWindow .item .campaignContainer .priceContainer {
display: flex;
width: 100%;
font-family: 'Inter',sans-serif;
justify-content: center;
}
.shopWindow .item .campaignContainer .priceContainer .price, .shopWindow .item .campaignContainer .priceContainer .discount {
color: #303030;
font-weight: 700;
display: inline-block;
font-size: 18px;
line-height: 27px;
}
.carouselcontainer .carouselnav {
background-color: transparent !important;
background-image: none !important;
position: absolute;
background-color: #ececec;
background-repeat: no-repeat;
background-position: center center;
opacity: 0.8;
top: 0;
height: 100%;
width: 30px;
}
div.carouselcontainer.horizontal a.carouselnav.prev {
left: 0;

}
div.carouselcontainer.horizontal a.carouselnav.next {
right: 4px;

}
.carouselcontainer.horizontal .carouselnav.next:before {
content: '>';
}
.carouselcontainer.horizontal .carouselnav.prev:before {
content: '<';
}
.carouselcontainer a.carouselnav {
visibility: visible !important;
}
.carouselcontainer .carouselnav:before {
font-family: FontAwesome;
position: absolute;
width: 100%;
text-align: center;
top: 50%;
transform: translateY(-50%);
font-size: 40px;
opacity: 0.5;
}
.carouselcontainer .carouselnav:hover {
background-color: #e0e0e0 !important;
}
@media screen and (max-width: 1269px) and (min-width: 769px) {
.grid-unit{

--items-per-screen:3;
}
}
@media screen and (max-width: 768px) {
.grid-unit{

--items-per-screen:2;
}
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="carouselcontainer horizontal">
<div class="caroufredsel_wrapper">
<div class="shopWindow">
<div class="grid-unit">
<div class="grid-unit-inner">

<div class="item">
<div class="thumb">
<div class="badges"></div>
<a href="" class="addfavourite"></a>
<a href="" >
<img class="img-responsive lazy" src="https://03.cdn37.se/p6/images/2.2214369/bergamont-grandurance-rd-5-2022.jpeg" alt="">
</img>
</div>
<div class="itemInfo">
<div class="trademark">
<a href="">KTM</a>
</div>
<div class="title">
<a href="">Wild Cross 24</a>
</div>
<div class="campaignContainer">
<div class="priceContainer">
<span class="price">6490</span>
</div>
</div>
<div class="bottom-container"></div>
</div>
</div>
</div>
</div>
<div class="grid-unit">
<div class="grid-unit-inner">

<div class="item">
<div class="thumb">
<div class="badges"></div>
<a href="" class="addfavourite"></a>
<a href="" >
<img class="img-responsive lazy" src="https://03.cdn37.se/p6/images/2.2214369/bergamont-grandurance-rd-5-2022.jpeg" alt="">
</a>
</div>
<div class="itemInfo">
<div class="trademark">
<a href="">KTM</a>
</div>
<div class="title">
<a href="">Wild Cross 24</a>
</div>
<div class="campaignContainer">
<div class="priceContainer">
<span class="price">6490</span>
</div>
</div>
<div class="bottom-container"></div>
</div>
</div>
</div>
</div>
<div class="grid-unit">
<div class="grid-unit-inner">

<div class="item">
<div class="thumb">
<div class="badges"></div>
<a href="" class="addfavourite"></a>
<a href="" >
<img class="img-responsive lazy" src="https://03.cdn37.se/p6/images/2.2214369/bergamont-grandurance-rd-5-2022.jpeg" alt="">
</a>
</div>
<div class="itemInfo">
<div class="trademark">
<a href="">KTM</a>
</div>
<div class="title">
<a href="">Wild Cross 24</a>
</div>
<div class="campaignContainer">
<div class="priceContainer">
<span class="price">6490</span>
</div>
</div>
<div class="bottom-container"></div>
</div>
</div>
</div>
</div>
<div class="grid-unit">
<div class="grid-unit-inner">

<div class="item">
<div class="thumb">
<div class="badges"></div>
<a href="" class="addfavourite"></a>
<a href="" >
<img class="img-responsive lazy" src="https://03.cdn37.se/p6/images/2.2214369/bergamont-grandurance-rd-5-2022.jpeg" alt="">
</a>
</div>
<div class="itemInfo">
<div class="trademark">
<a href="">KTM</a>
</div>
<div class="title">
<a href="">Wild Cross 24</a>
</div>
<div class="campaignContainer">
<div class="priceContainer">
<span class="price">6490</span>
</div>
</div>
<div class="bottom-container"></div>
</div>
</div>
</div>
</div>
<div class="grid-unit">
<div class="grid-unit-inner">

<div class="item">
<div class="thumb">
<div class="badges"></div>
<a href="" class="addfavourite"></a>
<a href="" >
<img class="img-responsive lazy" src="https://03.cdn37.se/p6/images/2.2214369/bergamont-grandurance-rd-5-2022.jpeg" alt="">
</a>
</div>
<div class="itemInfo">
<div class="trademark">
<a href="">KTM</a>
</div>
<div class="title">
<a href="">Wild Cross 24</a>
</div>
<div class="campaignContainer">
<div class="priceContainer">
<span class="price">6490</span>
</div>
</div>
<div class="bottom-container"></div>
</div>
</div>
</div>
</div>
<div class="grid-unit">
<div class="grid-unit-inner">

<div class="item">
<div class="thumb">
<div class="badges"></div>
<a href="" class="addfavourite"></a>
<a href="" >
<img class="img-responsive lazy" src="https://03.cdn37.se/p6/images/2.2214257/trek-marlin-6-2022.jpeg" alt="">
</img>
</div>
<div class="itemInfo">
<div class="trademark">
<a href="">KTM</a>
</div>
<div class="title">
<a href="">Wild Cross 24</a>
</div>
<div class="campaignContainer">
<div class="priceContainer">
<span class="price">6490</span>
</div>
</div>
<div class="bottom-container"></div>
</div>
</div>
</div>
</div>
<div class="grid-unit">
<div class="grid-unit-inner">

<div class="item">
<div class="thumb">
<div class="badges"></div>
<a href="" class="addfavourite"></a>
<a href="" >
<img class="img-responsive lazy" src="https://03.cdn37.se/p6/images/2.2214257/trek-marlin-6-2022.jpeg" alt="">
</a>
</div>
<div class="itemInfo">
<div class="trademark">
<a href="">KTM</a>
</div>
<div class="title">
<a href="">Wild Cross 24</a>
</div>
<div class="campaignContainer">
<div class="priceContainer">
<span class="price">6490</span>
</div>
</div>
<div class="bottom-container"></div>
</div>
</div>
</div>
</div>
<div class="grid-unit">
<div class="grid-unit-inner">

<div class="item">
<div class="thumb">
<div class="badges"></div>
<a href="" class="addfavourite"></a>
<a href="" >
<img class="img-responsive lazy" src="https://03.cdn37.se/p6/images/2.2214257/trek-marlin-6-2022.jpeg" alt="">
</a>
</div>
<div class="itemInfo">
<div class="trademark">
<a href="">KTM</a>
</div>
<div class="title">
<a href="">Wild Cross 24</a>
</div>
<div class="campaignContainer">
<div class="priceContainer">
<span class="price">6490</span>
</div>
</div>
<div class="bottom-container"></div>
</div>
</div>
</div>
</div>
<div class="grid-unit">
<div class="grid-unit-inner">

<div class="item">
<div class="thumb">
<div class="badges"></div>
<a href="" class="addfavourite"></a>
<a href="" >
<img class="img-responsive lazy" src="https://03.cdn37.se/p6/images/2.2214257/trek-marlin-6-2022.jpeg" alt="">
</a>
</div>
<div class="itemInfo">
<div class="trademark">
<a href="">KTM</a>
</div>
<div class="title">
<a href="">Wild Cross 24</a>
</div>
<div class="campaignContainer">
<div class="priceContainer">
<span class="price">6490</span>
</div>
</div>
<div class="bottom-container"></div>
</div>
</div>
</div>
</div>
<div class="grid-unit">
<div class="grid-unit-inner">

<div class="item">
<div class="thumb">
<div class="badges"></div>
<a href="" class="addfavourite"></a>
<a href="" >
<img class="img-responsive lazy" src="https://03.cdn37.se/p6/images/2.2214257/trek-marlin-6-2022.jpeg" alt="">
</a>
</div>
<div class="itemInfo">
<div class="trademark">
<a href="">KTM</a>
</div>
<div class="title">
<a href="">Wild Cross 24</a>
</div>
<div class="campaignContainer">
<div class="priceContainer">
<span class="price">6490</span>
</div>
</div>
<div class="bottom-container"></div>
</div>
</div>
</div>
</div>
<div class="grid-unit">
<div class="grid-unit-inner">

<div class="item">
<div class="thumb">
<div class="badges"></div>
<a href="" class="addfavourite"></a>
<a href="" >
<img class="img-responsive lazy" src="https://03.cdn37.se/p6/images/2.2214369/bergamont-grandurance-rd-5-2022.jpeg" alt="">
</img>
</div>
<div class="itemInfo">
<div class="trademark">
<a href="">KTM</a>
</div>
<div class="title">
<a href="">Wild Cross 24</a>
</div>
<div class="campaignContainer">
<div class="priceContainer">
<span class="price">6490</span>
</div>
</div>
<div class="bottom-container"></div>
</div>
</div>
</div>
</div>
<div class="grid-unit">
<div class="grid-unit-inner">

<div class="item">
<div class="thumb">
<div class="badges"></div>
<a href="" class="addfavourite"></a>
<a href="" >
<img class="img-responsive lazy" src="https://03.cdn37.se/p6/images/2.2214369/bergamont-grandurance-rd-5-2022.jpeg" alt="">
</a>
</div>
<div class="itemInfo">
<div class="trademark">
<a href="">KTM</a>
</div>
<div class="title">
<a href="">Wild Cross 24</a>
</div>
<div class="campaignContainer">
<div class="priceContainer">
<span class="price">6490</span>
</div>
</div>
<div class="bottom-container"></div>
</div>
</div>
</div>
</div>
<div class="grid-unit">
<div class="grid-unit-inner">

<div class="item">
<div class="thumb">
<div class="badges"></div>
<a href="" class="addfavourite"></a>
<a href="" >
<img class="img-responsive lazy" src="https://03.cdn37.se/p6/images/2.2214369/bergamont-grandurance-rd-5-2022.jpeg" alt="">
</a>
</div>
<div class="itemInfo">
<div class="trademark">
<a href="">KTM</a>
</div>
<div class="title">
<a href="">Wild Cross 24</a>
</div>
<div class="campaignContainer">
<div class="priceContainer">
<span class="price">6490</span>
</div>
</div>
<div class="bottom-container"></div>
</div>
</div>
</div>
</div>
<div class="grid-unit">
<div class="grid-unit-inner">

<div class="item">
<div class="thumb">
<div class="badges"></div>
<a href="" class="addfavourite"></a>
<a href="" >
<img class="img-responsive lazy" src="https://03.cdn37.se/p6/images/2.2214369/bergamont-grandurance-rd-5-2022.jpeg" alt="">
</a>
</div>
<div class="itemInfo">
<div class="trademark">
<a href="">KTM</a>
</div>
<div class="title">
<a href="">Wild Cross 24</a>
</div>
<div class="campaignContainer">
<div class="priceContainer">
<span class="price">6490</span>
</div>
</div>
<div class="bottom-container"></div>
</div>
</div>
</div>
</div>
<div class="grid-unit">
<div class="grid-unit-inner">

<div class="item">
<div class="thumb">
<div class="badges"></div>
<a href="" class="addfavourite"></a>
<a href="" >
<img class="img-responsive lazy" src="https://03.cdn37.se/p6/images/2.2214369/bergamont-grandurance-rd-5-2022.jpeg" alt="">
</a>
</div>
<div class="itemInfo">
<div class="trademark">
<a href="">KTM</a>
</div>
<div class="title">
<a href="">Wild Cross 24</a>
</div>
<div class="campaignContainer">
<div class="priceContainer">
<span class="price">6490</span>
</div>
</div>
<div class="bottom-container"></div>
</div>
</div>
</div>
</div>
<div class="grid-unit">
<div class="grid-unit-inner">

<div class="item">
<div class="thumb">
<div class="badges"></div>
<a href="" class="addfavourite"></a>
<a href="" >
<img class="img-responsive lazy" src="https://03.cdn37.se/p6/images/2.2214257/trek-marlin-6-2022.jpeg" alt="">
</img>
</div>
<div class="itemInfo">
<div class="trademark">
<a href="">KTM</a>
</div>
<div class="title">
<a href="">Wild Cross 24</a>
</div>
<div class="campaignContainer">
<div class="priceContainer">
<span class="price">6490</span>
</div>
</div>
<div class="bottom-container"></div>
</div>
</div>
</div>
</div>
<div class="grid-unit">
<div class="grid-unit-inner">

<div class="item">
<div class="thumb">
<div class="badges"></div>
<a href="" class="addfavourite"></a>
<a href="" >
<img class="img-responsive lazy" src="https://03.cdn37.se/p6/images/2.2214257/trek-marlin-6-2022.jpeg" alt="">
</a>
</div>
<div class="itemInfo">
<div class="trademark">
<a href="">KTM</a>
</div>
<div class="title">
<a href="">Wild Cross 24</a>
</div>
<div class="campaignContainer">
<div class="priceContainer">
<span class="price">6490</span>
</div>
</div>
<div class="bottom-container"></div>
</div>
</div>
</div>
</div>
<div class="grid-unit">
<div class="grid-unit-inner">

<div class="item">
<div class="thumb">
<div class="badges"></div>
<a href="" class="addfavourite"></a>
<a href="" >
<img class="img-responsive lazy" src="https://03.cdn37.se/p6/images/2.2214257/trek-marlin-6-2022.jpeg" alt="">
</a>
</div>
<div class="itemInfo">
<div class="trademark">
<a href="">KTM</a>
</div>
<div class="title">
<a href="">Wild Cross 24</a>
</div>
<div class="campaignContainer">
<div class="priceContainer">
<span class="price">6490</span>
</div>
</div>
<div class="bottom-container"></div>
</div>
</div>
</div>
</div>
<div class="grid-unit">
<div class="grid-unit-inner">

<div class="item">
<div class="thumb">
<div class="badges"></div>
<a href="" class="addfavourite"></a>
<a href="" >
<img class="img-responsive lazy" src="https://03.cdn37.se/p6/images/2.2214257/trek-marlin-6-2022.jpeg" alt="">
</a>
</div>
<div class="itemInfo">
<div class="trademark">
<a href="">KTM</a>
</div>
<div class="title">
<a href="">Wild Cross 24</a>
</div>
<div class="campaignContainer">
<div class="priceContainer">
<span class="price">6490</span>
</div>
</div>
<div class="bottom-container"></div>
</div>
</div>
</div>
</div>
<div class="grid-unit">
<div class="grid-unit-inner">

<div class="item">
<div class="thumb">
<div class="badges"></div>
<a href="" class="addfavourite"></a>
<a href="" >
<img class="img-responsive lazy" src="https://03.cdn37.se/p6/images/2.2214257/trek-marlin-6-2022.jpeg" alt="">
</a>
</div>
<div class="itemInfo">
<div class="trademark">
<a href="">KTM</a>
</div>
<div class="title">
<a href="">Wild Cross 24</a>
</div>
<div class="campaignContainer">
<div class="priceContainer">
<span class="price">6490</span>
</div>
</div>
<div class="bottom-container"></div>
</div>
</div>
</div>
</div>
<div class="grid-unit">
<div class="grid-unit-inner">

<div class="item">
<div class="thumb">
<div class="badges"></div>
<a href="" class="addfavourite"></a>
<a href="" >
<img class="img-responsive lazy" src="https://03.cdn37.se/p6/images/2.2214257/trek-marlin-6-2022.jpeg" alt="">
</a>
</div>
<div class="itemInfo">
<div class="trademark">
<a href="">KTM</a>
</div>
<div class="title">
<a href="">Wild Cross 24</a>
</div>
<div class="campaignContainer">
<div class="priceContainer">
<span class="price">6490</span>
</div>
</div>
<div class="bottom-container"></div>
</div>
</div>
</div>
</div>
<div class="grid-unit">
<div class="grid-unit-inner">

<div class="item">
<div class="thumb">
<div class="badges"></div>
<a href="" class="addfavourite"></a>
<a href="" >
<img class="img-responsive lazy" src="https://03.cdn37.se/p6/images/2.2214257/trek-marlin-6-2022.jpeg" alt="">
</a>
</div>
<div class="itemInfo">
<div class="trademark">
<a href="">KTM</a>
</div>
<div class="title">
<a href="">Wild Cross 24</a>
</div>
<div class="campaignContainer">
<div class="priceContainer">
<span class="price">6490</span>
</div>
</div>
<div class="bottom-container"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<a class="carouselnav next" href="#">

</a>
<a class="carouselnav prev" href="#">

</a>
</div>
</div>

Answer 1

您需要根据当前设置计算屏幕总数：

let screensTotal = Math.ceil(itemsTotal / itemsPerScreen);

我强烈建议将initialCounter变量重命名为currentScreen(这只是不言自明(
每次调用nextElement()时，currentScreen变量都会增加
如果它大于屏幕总数，则需要将其重置为0。

示例

//count total items
let carouselItems = document.querySelectorAll(".grid-unit");
let itemsTotal = carouselItems.length;
//count total screens
let styles = window.getComputedStyle(document.body);
let itemsPerScreen = parseFloat(styles.getPropertyValue("--items-per-screen"));
let screensTotal = Math.ceil(itemsTotal / itemsPerScreen);
// update items to screen ratios on window resize
window.addEventListener("resize", function(e) {
styles = window.getComputedStyle(document.body);
itemsPerScreen = parseFloat(styles.getPropertyValue("--items-per-screen"));
screensTotal = Math.ceil(itemsTotal / itemsPerScreen);
});
function MoveElements() {
let currentScreen = 0;
function nextElement() {
currentScreen++;
if (currentScreen >= screensTotal) {
currentScreen = 0;
}
//update css var
$(":root")[0].style.setProperty("--slider-index", currentScreen);
}
function prevElement() {
currentScreen--;
//got to last screen
if (currentScreen < 0) {
currentScreen = screensTotal - 1;
}
$(":root")[0].style.setProperty("--slider-index", currentScreen);
}
$(".carouselnav.next").click(nextElement);
$(".carouselnav.prev").click(prevElement);
}
MoveElements();

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--handle-size: 3rem;
--img-gap: 0.25rem;
--slider-index: 0;
--items-per-screen: 5;
}
body {
background: #f3f3f3;
}
.container {
width: 100%;
position: relative;
}
.carouselcontainer {
max-width: 1360px;
margin: 50px auto;
background: #f1f1f1;
position: relative;
overflow: hidden;
}
.caroufredsel_wrapper {
width: 100%;
}
.shopWindow {
display: flex;
justify-content: space-between;
transform: translateX(calc(var(--slider-index) * -100%));
transition: transform 0.5s cubic-bezier(0.96, -0.17, 0.07, 0.8);
}
.shopWindow .grid-unit {
flex-shrink: 0;
width: 144px;
/*width: calc(100% / 5);*/
width: calc(100% / var(--items-per-screen));
max-width: 100%;
padding-right: 5px !important;
margin-right: 0 !important;
}
.shopWindow .thumb {
position: relative;
overflow: hidden;
padding: 45px 10px;
background: #fff;
}
.shopWindow .grid-unit .grid-unit-inner .item .thumb .img-responsive {
display: block;
margin: 0 auto;
max-width: 100%;
}
.shopWindow .item .itemInfo {
padding: 20px 0;
background: #fafafa;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
font-weight: 500;
text-align: center;
}
.shopWindow .item .trademark {
margin-bottom: 4px;
}
.shopWindow .item .title {
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
margin-bottom: 9px;
}
.shopWindow .item .trademark a {
line-height: 16px;
font-size: 14px;
color: #000;
font-weight: 600;
text-transform: uppercase;
}
.shopWindow .item .title a {
line-height: 19px;
font-size: 14px;
color: #000;
text-decoration: none;
font-weight: 400;
}
.shopWindow .item .campaignContainer {
display: flex;
margin-bottom: 10px;
height: 30px;
}
.shopWindow .item .campaignContainer .priceContainer {
display: flex;
width: 100%;
font-family: "Inter", sans-serif;
justify-content: center;
}
.shopWindow .item .campaignContainer .priceContainer .price,
.shopWindow .item .campaignContainer .priceContainer .discount {
color: #303030;
font-weight: 700;
display: inline-block;
font-size: 18px;
line-height: 27px;
}
.carouselcontainer .carouselnav {
background-color: transparent !important;
background-image: none !important;
position: absolute;
background-color: #ececec;
background-repeat: no-repeat;
background-position: center center;
opacity: 0.8;
top: 0;
height: 100%;
width: 30px;
}
div.carouselcontainer.horizontal a.carouselnav.prev {
left: 0;
}
div.carouselcontainer.horizontal a.carouselnav.next {
right: 4px;
}
.carouselcontainer.horizontal .carouselnav.next:before {
content: ">";
}
.carouselcontainer.horizontal .carouselnav.prev:before {
content: "<";
}
.carouselcontainer a.carouselnav {
visibility: visible !important;
}
.carouselcontainer .carouselnav:before {
font-family: FontAwesome;
position: absolute;
width: 100%;
text-align: center;
top: 50%;
transform: translateY(-50%);
font-size: 40px;
opacity: 0.5;
}
.carouselcontainer .carouselnav:hover {
background-color: #e0e0e0 !important;
}
@media screen and (max-width: 1269px) and (min-width: 769px) {
:root {
--items-per-screen: 3;
}
}
@media screen and (max-width: 768px) {
:root {
--items-per-screen: 2;
}
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="carouselcontainer horizontal">
<div class="caroufredsel_wrapper">
<div class="shopWindow">
<div class="grid-unit">
<div class="grid-unit-inner">
<div class="item">
<div class="thumb">
<div class="badges"></div>
<a href="" class="addfavourite"></a>
<a href="">
<img class="img-responsive lazy" src="https://03.cdn37.se/p6/images/2.2214369/bergamont-grandurance-rd-5-2022.jpeg" alt="">
</a>
</div>
<a href="">
</a>
<div class="itemInfo">
<a href="">
</a>
<div class="trademark">
<a href="">
</a><a href="">KTM</a>
</div>
<div class="title">
<a href="">Wild Cross 24</a>
</div>
<div class="campaignContainer">
<div class="priceContainer">
<span class="price">6490</span>
</div>
</div>
<div class="bottom-container"></div>
</div>
</div>
</div>
</div>
<div class="grid-unit">
<div class="grid-unit-inner">
<div class="item">
<div class="thumb">
<div class="badges"></div>
<a href="" class="addfavourite"></a>
<a href="">
<img class="img-responsive lazy" src="https://03.cdn37.se/p6/images/2.2214369/bergamont-grandurance-rd-5-2022.jpeg" alt="">
</a>
</div>
<div class="itemInfo">
<div class="trademark">
<a href="">KTM</a>
</div>
<div class="title">
<a href="">Wild Cross 24</a>
</div>
<div class="campaignContainer">
<div class="priceContainer">
<span class="price">6490</span>
</div>
</div>
<div class="bottom-container"></div>
</div>
</div>
</div>
</div>
<div class="grid-unit">
<div class="grid-unit-inner">
<div class="item">
<div class="thumb">
<div class="badges"></div>
<a href="" class="addfavourite"></a>
<a href="">
<img class="img-responsive lazy" src="https://03.cdn37.se/p6/images/2.2214369/bergamont-grandurance-rd-5-2022.jpeg" alt="">
</a>
</div>
<div class="itemInfo">
<div class="trademark">
<a href="">KTM</a>
</div>
<div class="title">
<a href="">Wild Cross 24</a>
</div>
<div class="campaignContainer">
<div class="priceContainer">
<span class="price">6490</span>
</div>
</div>
<div class="bottom-container"></div>
</div>
</div>
</div>
</div>
<div class="grid-unit">
<div class="grid-unit-inner">
<div class="item">
<div class="thumb">
<div class="badges"></div>
<a href="" class="addfavourite"></a>
<a href="">
<img class="img-responsive lazy" src="https://03.cdn37.se/p6/images/2.2214369/bergamont-grandurance-rd-5-2022.jpeg" alt="">
</a>
</div>
<div class="itemInfo">
<div class="trademark">
<a href="">KTM</a>
</div>
<div class="title">
<a href="">Wild Cross 24</a>
</div>
<div class="campaignContainer">
<div class="priceContainer">
<span class="price">6490</span>
</div>
</div>
<div class="bottom-container"></div>
</div>
</div>
</div>
</div>
<div class="grid-unit">
<div class="grid-unit-inner">
<div class="item">
<div class="thumb">
<div class="badges"></div>
<a href="" class="addfavourite"></a>
<a href="">
<img class="img-responsive lazy" src="https://03.cdn37.se/p6/images/2.2214369/bergamont-grandurance-rd-5-2022.jpeg" alt="">
</a>
</div>
<div class="itemInfo">
<div class="trademark">
<a href="">KTM</a>
</div>
<div class="title">
<a href="">Wild Cross 24</a>
</div>
<div class="campaignContainer">
<div class="priceContainer">
<span class="price">6490</span>
</div>
</div>
<div class="bottom-container"></div>
</div>
</div>
</div>
</div>
<div class="grid-unit">
<div class="grid-unit-inner">
<div class="item">
<div class="thumb">
<div class="badges"></div>
<a href="" class="addfavourite"></a>
<a href="">
<img class="img-responsive lazy" src="https://03.cdn37.se/p6/images/2.2214257/trek-marlin-6-2022.jpeg" alt="">
</a>
</div>
<a href="">
</a>
<div class="itemInfo">
<a href="">
</a>
<div class="trademark">
<a href="">
</a><a href="">KTM</a>
</div>
<div class="title">
<a href="">Wild Cross 24</a>
</div>
<div class="campaignContainer">
<div class="priceContainer">
<span class="price">6490</span>
</div>
</div>
<div class="bottom-container"></div>
</div>
</div>
</div>
</div>
<div class="grid-unit">
<div class="grid-unit-inner">
<div class="item">
<div class="thumb">
<div class="badges"></div>
<a href="" class="addfavourite"></a>
<a href="">
<img class="img-responsive lazy" src="https://03.cdn37.se/p6/images/2.2214257/trek-marlin-6-2022.jpeg" alt="">
</a>
</div>
<div class="itemInfo">
<div class="trademark">
<a href="">KTM</a>
</div>
<div class="title">
<a href="">Wild Cross 24</a>
</div>
<div class="campaignContainer">
<div class="priceContainer">
<span class="price">6490</span>
</div>
</div>
<div class="bottom-container"></div>
</div>
</div>
</div>
</div>
<div class="grid-unit">
<div class="grid-unit-inner">
<div class="item">
<div class="thumb">
<div class="badges"></div>
<a href="" class="addfavourite"></a>
<a href="">
<img class="img-responsive lazy" src="https://03.cdn37.se/p6/images/2.2214257/trek-marlin-6-2022.jpeg" alt="">
</a>
</div>
<div class="itemInfo">
<div class="trademark">
<a href="">KTM</a>
</div>
<div class="title">
<a href="">Wild Cross 24</a>
</div>
<div class="campaignContainer">
<div class="priceContainer">
<span class="price">6490</span>
</div>
</div>
<div class="bottom-container"></div>
</div>
</div>
</div>
</div>
<div class="grid-unit">
<div class="grid-unit-inner">
<div class="item">
<div class="thumb">
<div class="badges"></div>
<a href="" class="addfavourite"></a>
<a href="">
<img class="img-responsive lazy" src="https://03.cdn37.se/p6/images/2.2214257/trek-marlin-6-2022.jpeg" alt="">
</a>
</div>
<div class="itemInfo">
<div class="trademark">
<a href="">KTM</a>
</div>
<div class="title">
<a href="">Wild Cross 24</a>
</div>
<div class="campaignContainer">
<div class="priceContainer">
<span class="price">6490</span>
</div>
</div>
<div class="bottom-container"></div>
</div>
</div>
</div>
</div>
<div class="grid-unit">
<div class="grid-unit-inner">
<div class="item">
<div class="thumb">
<div class="badges"></div>
<a href="" class="addfavourite"></a>
<a href="">
<img class="img-responsive lazy" src="https://03.cdn37.se/p6/images/2.2214257/trek-marlin-6-2022.jpeg" alt="">
</a>
</div>
<div class="itemInfo">
<div class="trademark">
<a href="">KTM</a>
</div>
<div class="title">
<a href="">Wild Cross 24</a>
</div>
<div class="campaignContainer">
<div class="priceContainer">
<span class="price">6490</span>
</div>
</div>
<div class="bottom-container"></div>
</div>
</div>
</div>
</div>
<div class="grid-unit">
<div class="grid-unit-inner">
<div class="item">
<div class="thumb">
<div class="badges"></div>
<a href="" class="addfavourite"></a>
<a href="">
<img class="img-responsive lazy" src="https://03.cdn37.se/p6/images/2.2214369/bergamont-grandurance-rd-5-2022.jpeg" alt="">
</a>
</div>
<a href="">
</a>
<div class="itemInfo">
<a href="">
</a>
<div class="trademark">
<a href="">
</a><a href="">KTM</a>
</div>
<div class="title">
<a href="">Wild Cross 24</a>
</div>
<div class="campaignContainer">
<div class="priceContainer">
<span class="price">6490</span>
</div>
</div>
<div class="bottom-container"></div>
</div>
</div>
</div>
</div>
<div class="grid-unit">
<div class="grid-unit-inner">
<div class="item">
<div class="thumb">
<div class="badges"></div>
<a href="" class="addfavourite"></a>
<a href="">
<img class="img-responsive lazy" src="https://03.cdn37.se/p6/images/2.2214369/bergamont-grandurance-rd-5-2022.jpeg" alt="">
</a>
</div>
<div class="itemInfo">
<div class="trademark">
<a href="">KTM</a>
</div>
<div class="title">
<a href="">Wild Cross 24</a>
</div>
<div class="campaignContainer">
<div class="priceContainer">
<span class="price">6490</span>
</div>
</div>
<div class="bottom-container"></div>
</div>
</div>
</div>
</div>
<div class="grid-unit">
<div class="grid-unit-inner">
<div class="item">
<div class="thumb">
<div class="badges"></div>
<a href="" class="addfavourite"></a>
<a href="">
<img class="img-responsive lazy" src="https://03.cdn37.se/p6/images/2.2214369/bergamont-grandurance-rd-5-2022.jpeg" alt="">
</a>
</div>
<div class="itemInfo">
<div class="trademark">
<a href="">KTM</a>
</div>
<div class="title">
<a href="">Wild Cross 24</a>
</div>
<div class="campaignContainer">
<div class="priceContainer">
<span class="price">6490</span>
</div>
</div>
<div class="bottom-container"></div>
</div>
</div>
</div>
</div>
<div class="grid-unit">
<div class="grid-unit-inner">
<div class="item">
<div class="thumb">
<div class="badges"></div>
<a href="" class="addfavourite"></a>
<a href="">
<img class="img-responsive lazy" src="https://03.cdn37.se/p6/images/2.2214369/bergamont-grandurance-rd-5-2022.jpeg" alt="">
</a>
</div>
<div class="itemInfo">
<div class="trademark">
<a href="">KTM</a>
</div>
<div class="title">
<a href="">Wild Cross 24</a>
</div>
<div class="campaignContainer">
<div class="priceContainer">
<span class="price">6490</span>
</div>
</div>
<div class="bottom-container"></div>
</div>
</div>
</div>
</div>
<div class="grid-unit">
<div class="grid-unit-inner">
<div class="item">
<div class="thumb">
<div class="badges"></div>
<a href="" class="addfavourite"></a>
<a href="">
<img class="img-responsive lazy" src="https://03.cdn37.se/p6/images/2.2214369/bergamont-grandurance-rd-5-2022.jpeg" alt="">
</a>
</div>
<div class="itemInfo">
<div class="trademark">
<a href="">KTM</a>
</div>
<div class="title">
<a href="">Wild Cross 24</a>
</div>
<div class="campaignContainer">
<div class="priceContainer">
<span class="price">6490</span>
</div>
</div>
<div class="bottom-container"></div>
</div>
</div>
</div>
</div>
<div class="grid-unit">
<div class="grid-unit-inner">
<div class="item">
<div class="thumb">
<div class="badges"></div>
<a href="" class="addfavourite"></a>
<a href="">
<img class="img-responsive lazy" src="https://03.cdn37.se/p6/images/2.2214257/trek-marlin-6-2022.jpeg" alt="">
</a>
</div>
<div class="itemInfo">
<div class="trademark">
<a href="">KTM</a>
</div>
<div class="title">
<a href="">Wild Cross 24</a>
</div>
<div class="campaignContainer">
<div class="priceContainer">
<span class="price">6490</span>
</div>
</div>
<div class="bottom-container"></div>
</div>
</div>
</div>
</div>
<div class="grid-unit">
<div class="grid-unit-inner">
<div class="item">
<div class="thumb">
<div class="badges"></div>
<a href="" class="addfavourite"></a>
<a href="">
<img class="img-responsive lazy" src="https://03.cdn37.se/p6/images/2.2214257/trek-marlin-6-2022.jpeg" alt="">
</a>
</div>
<div class="itemInfo">
<div class="trademark">
<a href="">KTM</a>
</div>
<div class="title">
<a href="">Wild Cross 24</a>
</div>
<div class="campaignContainer">
<div class="priceContainer">
<span class="price">6490</span>
</div>
</div>
<div class="bottom-container"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<a class="carouselnav next" href="#">
</a>
<a class="carouselnav prev" href="#">
</a>
</div>
</div>