可能なのはjavascriptのないcss3のみを作成する、またはネイティブJavaScriptでミニコードを作成することです。 は私がhttp://owlgraphic.com/owlcarouselまたはhttp://flickity.metafizzy.co/Css3スライダー複数の画像
jsfiddleリンクq4d9m/170などの1つのに表示されるアイテムのためのテーラ多くの変種/のようなスライダーを作成したいが、私は、ビューポート内の3つの項目をしたいです。あなたはFilament Group
A CSSスナップインポイントに基づくカルーセル（および軽量ポリフィル）
（アイテムの量が最も広い、ブラウザの幅を持つ時に表示）はい、 可能です。ここではいくつかのリンク/チュートリアルがあります
http://thecodeplayer.com/walkthrough/css3-image-slider-with-stylized-thumbnails http://benschwarz.github.io/gallery-css/
コードは、私が直接codepenリンクを投稿することができないことを – zloctb
からSnapperを試みることができる
http://codepen.io/drygiel/pen/rtpnE http://codepen.io/johnmotyljr/full/cDpEH/ なし –
それは、単純なラベル/ラジオ入力ハックを使用することにより可能です。 ラベルをクリックするだけです。もう少し作業すれば、十分に使えるギャラリーにすることができます。
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>で表示される項目の量を思わ最も広いブラウザ幅を持つ時間は、3つ以上のアイテムを持っているときは3にする必要があります – zloctb
私は一度に3つの画像を表示できるようにコードを少し編集しました –
https://codepen.io/naomilea/pen/XjbXVE –
いいえいいえいいえ.....私たちが見るとPREVおよびNEXTボタン – zloctb
男なければならない3枚の画像は、それだけでCSS3を経由して働くことができる方法の例のthats。 jqueryの –