javascript - 将导航选项卡更改为轮播

Question

我们有一个导航选项卡，每个选项卡都有一个图像网格 .

随着屏幕尺寸的变化，我们希望能够删除除第一个选项卡之外的所有选项卡。并在轮播 View 中的第一个选项卡中显示图像。

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

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>