Jquery 可在点击时添加li元素的响应式carousal

我正在尝试创建一种显示日期的滑动日历（放大日历视图）。其中三个列表元素显示在carousal上（昨天的日期、今天的日期、明天的日期）。当您单击“下一步”按钮时，它会按顺序滑动（带转换）到下一个日期，当您单击“上一步”按钮时，它会按顺序显示上一个日期

在一个100%的容器中，我将三个列表元素设置为33.2%，因此我不确定每次单击按钮时在何处添加“下一个”和“上一个”列表元素。如果我全部以像素为单位，那会更简单，因为我可以让画布上添加的每个元素并排排列，但我使用的是百分比。此外，由于日期数字每月都不同，我必须通过js添加列表项

var-date=新日期（）；
var day=date.getDate（）；
$（“.p”）.text（第1天）；
$（“.today p”）.text（天）；
元(明日p).文本(第1天);；

*{
保证金：0；
填充：0；
}
.压延机{
宽度：100%；
高度：500px；
边缘顶部：5px；
边框：1px黑色实心；
位置：相对位置；
}
.天{
宽度：33%；
高度：500px；
边框：1px红色实心；
浮动：左；
位置：相对位置；
}
.第p天{
文本对齐：居中；
字号：6em；
}
.下一个{
位置：绝对位置；
排名：0；
右：0；
宽度：25px；
身高：100%；
背景颜色：绿色；
光标：指针；
}
.下一步：悬停{
背景色：红色；
}
上一篇{
位置：绝对位置；
排名：0；
左：0；
宽度：25px；
身高：100%；
背景颜色：绿色；
光标：指针；
}
.prev:悬停{
背景色：红色；
}

我想出来了。我将列表更改为内联块而不是浮点。我还添加了页面加载上的所有列表元素（日期），而不是每次单击都添加一个

var d=新日期（）；
变量月份=d.getMonth（）+1；
var year=d.getFullYear（）；
var day=d.getDate（）；
var getDaysInMonth=函数（月，年）{
返回新日期（年、月、0）。getDate（）；
}
var计数=0；
风险值滑动=33*（第2天）；
对于（x=0；x0）
{
prev+=1；
幻灯片-=33；
$（.1”）.animate（{marginLeft:'-'+slide+'%'}，“fast”）；
}
});
*{
保证金：0；
填充：0；
溢出x：隐藏；
溢出y：隐藏；
}
.压延机{
宽度：100%；
高度：50vh；
边框：1px#FFF实心；
边缘顶部：20px；
位置：相对位置；
空白：nowrap；
字体系列：“Lato”；
颜色：#FFF；
}
.天{
宽度：33%；
高度：50vh；
边框：1px#FFF实心；
显示：内联块；
位置：相对位置；
背景色：#35a541；
}
.第p天{
文本对齐：居中；
字号：6em；
}
.下一个{
位置：绝对位置；
排名：0；
右：0；
宽度：25px；
身高：100%；
背景颜色：绿色；
光标：指针；
}
.下一步：悬停{
背景色：红色；
}
上一篇{
位置：绝对位置；
排名：0；
左：0；
宽度：25px；
身高：100%；
背景颜色：绿色；
光标：指针；
}
.下一步：悬停{
背景色：红色；
}





我想出来了。我将列表更改为内联块而不是浮点。我还添加了页面加载上的所有列表元素（日期），而不是每次单击都添加一个


var d=新日期（）；
变量月份=d.getMonth（）+1；
var year=d.getFullYear（）；
var day=d.getDate（）；
var getDaysInMonth=函数（月，年）{
返回新日期（年、月、0）。getDate（）；
}
var计数=0；
风险值滑动=33*（第2天）；
对于（x=0；x0）
{
prev+=1；
幻灯片-=33；
$（.1”）.animate（{marginLeft:'-'+slide+'%'}，“fast”）；
}
});
*{
保证金：0；
填充：0；
溢出x：隐藏；
溢出y：隐藏；
}
.压延机{
宽度：100%；
高度：50vh；
边框：1px#FFF实心；
边缘顶部：20px；
位置：相对位置；
空白：nowrap；
字体系列：“Lato”；
颜色：#FFF；
}
.天{
宽度：33%；
高度：50vh；
边框：1px#FFF实心；
显示：内联块；
位置：相对位置；
背景色：#35a541；
}
.第p天{
文本对齐：居中；
字号：6em；
}
.下一个{
位置：绝对位置；
排名：0；
右：0；
宽度：25px；
身高：100%；
背景颜色：绿色；
光标：指针；
}
.下一步：悬停{
背景色：红色；
}
上一篇{
位置：绝对位置；
排名：0；
左：0；
宽度：25px；
身高：100%；
背景颜色：绿色；
光标：指针；
}
.下一步：悬停{
背景色：红色；
}