Css3滑塊多個圖像

Question

可能創建幻燈片只css3沒有javascript或創建本機JavaScript的小代碼？ 我要像http://owlgraphic.com/owlcarousel或http://flickity.metafizzy.co/

尊者許多變型像的jsfiddle鏈接q4d9m/170一個可見項創建滑塊/但我想在視窗3項。（顯示在與最廣泛的瀏覽器寬度的一次性用品的量）

Answer 1

你可以嘗試Snapper從Filament Group

一個CSS管理單元點數基於旋轉臺（輕便填充工具）

Answer 2

是， 有可能的。這裏有一些鏈接/教程：

http://thecodeplayer.com/walkthrough/css3-image-slider-with-stylized-thumbnails http://benschwarz.github.io/gallery-css/

Answer 3

它通過使用簡單的標籤/無線輸入黑客是可能的。 只需點擊標籤。多一點工作，你可以把它變成一個非常有用的畫廊。

label{ 
 
    cursor: pointer; 
 
} 
 

 
input[type='radio']{ 
 
    display: none; 
 
} 
 

 
.slider{ 
 
    position: relative; 
 
} 
 

 
.slide{ 
 
    position: absolute; 
 
    top: 0; left: 0; 
 
    width: 200px; height: 200px; 
 
    background: no-repeat 50% 50%/cover; 
 
} 
 

 
.slide_1{ 
 
    background-image: url(http://placekitten.com/g/200/300) 
 
} 
 
.slide_2{ 
 
    background-image: url(http://placekitten.com/g/200/400) 
 
} 
 
.slide_3{ 
 
    background-image: url(http://placekitten.com/g/200/150) 
 
} 
 

 
input:checked + .slide{ 
 
    left: 210px; 
 
} 
 

 
input:checked + .slide + input + .slide{ 
 
    left: 420px; 
 
}

<label for="slide_1">label_1</label> 
 
<label for="slide_2">label_2</label> 
 
<label for="slide_3">label_3</label> 
 

 
<div class="slider"> 
 
    <input id="slide_1" type="radio" name="slide-changer" checked/> 
 
    <div class="slide slide_1"></div> 
 
    
 
    <input id="slide_2" type="radio" name="slide-changer" /> 
 
    <div class="slide slide_2"></div> 
 
    
 
    <input id="slide_3" type="radio" name="slide-changer" /> 
 
    <div class="slide slide_3"></div> 
 
</div>

Answer 4

Link-1

Link-2

**或者您可以使用插件NIVO滑塊與jQuery的幾行代碼

要添加導航的滑塊你需要js/jquery。