将导航标签更改为轮播

Question

我们有一个导航标签，每个标签都有一个图像网格。

随着屏幕尺寸的变化，我们希望能够删除所有标签，但第一个标签。并在旋转木马视图中的第一个标签中显示图像。

我尝试使用addClass和removeClass选项，但它变得非常复杂并且效率不高。我觉得应该有一种更简单的方法来管理它。

Answer 1

这里有一些可能对您有帮助的代码：

if (document.documentElement.clientWidth < 320) {
    function mySlider(){
        // Your slider code here
    }
    mySLider();
}

ul li { width:33%; border-right:1px solid red;border-bottom:1px solid red; background:blue; color: white; height:150px; text-align:center; float:left; display:inline-block;}

ul li:nth-child(3n){
border-right:0;
}

@media (max-width:320px){
.slider{width:320px;}
.sliderOverflow{
    width:500000px;
    overflow:hidden;
}
ul li {
    width:320px;
} 
}

<div class="slider">
    <div class="sliderOverflow">
    <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>
        </div>
</div>