プログラムが書けない人でも大丈夫。CSSのみで作ればいいんです。これで黒い画面が怖くてたまらないあなたのホームページにもスライドギャラリーを設置することができます！
というわけで3パターンご紹介しますので、デザインなど好きにアレンジして使ってみてください。
まずひとつめ。
目次
チェックボックス + z-indexプロパティを使用したスライドギャラリー
See the Pen css slide gallery by natsumi (@mayo31) on CodePen.18228
checkboxのchecked属性を利用。
checkedになっているinputのidを見て、labelのz-indexを変更しています。
そしてふたつめ。
a要素 + pointer-eventsプロパティを使用したスライドギャラリー
See the Pen CSSのみでslide by natsumi (@mayo31) on CodePen.18228
a要素のhrefにターゲットのid指定。targetのidを見て表示しています。URLの#で履歴が残るので、ブラウザの戻るボタンでいちいちスライドしてしまいます(´・ω・`)
フォトギャラリーより、ページ物のコンテンツを遷移なしで見せる表現に向いているかもしれません。
というわけでこんなものも用意しました。
CSSのみで各ページをスライドさせるランディングページデモ
See the Pen CSSのみでSlide ランディングページサンプル by natsumi (@mayo31) on CodePen.18228
デザインを工夫すれば1ページで複数のコンテンツを表示するようなLPも作れちゃいますね( *´艸｀)