遞增「滾動」容器左/右用純CSS點擊

我想創建一個純粹的CSS解決方案，將增量滾動一組元素的權利或留下一些固定值點擊一個href鏈接。我有基本的工作，我可以滾動向右或向左點擊相應的按鈕，但隨後的點擊只在初始位置之間切換。我無法多次向左或向右遞增。遞增「滾動」容器左/右用純CSS點擊

請記住，目標是純粹的CSS，因爲我想要呈現工作POC或顯示JavaScript將被要求，因爲這不能用純CSS完成。

http://plnkr.co/edit/itGDeyE8sfXtEbhBlycJ?p=preview

HTML

<head> 
    <link rel="stylesheet" href="style.css"> 
    <script src="script.js"></script> 
    </head> 

    <body> 

    <a id="left" href="#left">&lt;</a> 
    <a id="right" href="#right">&gt;</a> 

    <div class="f-slideshow"> 
     <div class="items"> 
     <span>1</span> 
     <span>2</span> 
     <span>3</span> 
     <span>4</span> 
     <span>5</span> 
     <span>6</span> 
     <span>7</span> 
     <span>8</span> 
     </div> 
    </div> 

    </body> 

</html>

CSS

.f-slideshow{ 
    position:relative; 
    max-width:100px; 
    overflow:hidden; 
    display:inline-block; 
} 

.f-slideshow .items{ 
    display:inline-table; 
    overflow:hidden; 
    width:100%; 
    background:#999; 
    position:relative; 
    box-sizing: border-box; 
    -webkit-transition: -webkit-transform 0.6s ease-in-out; 
    transition: transform 0.6s ease-in-out; 
} 

.f-slideshow span{ 
    margin:3px; 
    padding:5px; 
    background:#ddd; 
    border-radius:3px; 
} 

#right { 
    position: relative; 
    left: 125px; 
} 

#right:target ~ .f-slideshow .items{ 
    transform: translateX(-50px); 
} 

#left:target ~ .f-slideshow .items{ 
    transform: translateX(0px); 
}

來源

2015-07-01 mccainz

你可以添加額外的HTML？ –

是的，但只要右側或左側滾動仍然是隻有兩個元素的領域（我不能有N個錨定標籤來定位N個物品） – mccainz

這樣的事情？ http://webdesign.tutsplus.com/tutorials/how-to-create-an-anything-slider-with-just-css--cms-24278 –

每個滾動位置創建新主播：

HTML

<a class="pos" id="pos1"></a> 
<a class="pos" id="pos2"></a> 
<a class="pos" id="pos3"></a> 
<a class="pos" id="pos4"></a>

CSS

#pos1:target ~ .f-slideshow .items {transform: translateX( 0px);} 
#pos2:target ~ .f-slideshow .items {transform: translateX( -50px);} 
#pos3:target ~ .f-slideshow .items {transform: translateX(-100px);} 
#pos4:target ~ .f-slideshow .items {transform: translateX(-150px);}

使用了左右按鍵的多個錨，但設置它們的位置絕對因此只有一個出現的時間。

將它們指向每個「位置」錨點。

使用z-index: 1;爲先左後右一按鈕：

HTML

<a class="left" id="left1" href="#pos1">&lt;</a> 
<a class="left" id="left2" href="#pos2">&lt;</a> 
<a class="left" id="left3" href="#pos3">&lt;</a> 
<a class="right" id="right1" href="#pos2">&gt;</a> 
<a class="right" id="right2" href="#pos3">&gt;</a> 
<a class="right" id="right3" href="#pos4">&gt;</a>

CSS

.left, .right { 
    position: absolute; 
} 

.right { 
    left: 135px; 
} 

#left1, #right1 { 
    z-index: 1; 
}

更改相應的左或右按鈕的3210，取決於滾動的位置：

CSS

#pos1:target ~ #left1, #pos1:target ~ #right1, 
#pos2:target ~ #left1, #pos2:target ~ #right2, 
#pos3:target ~ #left2, #pos3:target ~ #right3, 
#pos4:target ~ #left3, #pos4:target ~ #right3 { 
    z-index: 1; 
}

Plunker

來源

2015-07-01 22:29:35

看起來很漂亮！非常好，它利用多個錨而不暴露用戶有多個錨。這是完全可以接受的。 – mccainz

遞增「滾動」容器左/右用純CSS點擊

回答

相關問題