HTML+CSSで横スライドショーを作成した

2017年3月6日 · by Satoko.Y · in other

複数の画像を1列に横に並べ、左右移動ボタンでスライドさせるウインドウを作成したかった。

ググってみると、JavaScriptやJQueryを使用したサンプルは多々あったのですが、筆者まだJavaScriptやJQueryを自在に扱うことができないので、

今回はCSSだけで出来ないかなぁ・・・・と、探してみました。

・・・・ありました！！！

↓↓参考にさせていただいたサイト↓↓
CSSだけでスライドショーはつくれるよ。
http://lopan.jp/css-slideshow/

ほぼほぼここだけ参考にさせていただき作成しました。

/* :::::: gallery :::::: */
/* #gallery内の指定*/
#gallery {
	position: relative;
	width: 1000px;
	height: 210px;
	margin: 0px auto;
	padding: 10px 0;
	background: #27313D;
}
#gallery .slideFrame {
	position: relative;
	height: 210px;
	overflow: hidden;
	margin-bottom: 10px;
}

/* slide images */
#gallery .slideFrame ul {
	position: absolute;
	top: 0;
	left: 90px;
	width: 2000px;
	margin: 0;
}
#gallery .slideFrame ul li {
	float: left;
	width: 350px;
	margin-right: 20px;
}
#gallery .slideFrame ul li:last-child {
	margin-right: 0;
}
#gallery .slideFrame ul li a {
	background: none;
}

/* gallery items */
#gallery ul li,{
	background: transparent;
}
#gallery ul li label{
	background: transparent;
}
#gallery p{
	background: transparent;
}
#gallery p i {
	background:transparent;
    line-height: 1.8em;
}

/* gallery list button */
#gallery ul.nav {
	width: 62px;
	margin: 0 auto;
	padding: 0;
}
#gallery ul.nav li {
	float: left;
	margin-right: 16px;
	background-position: -260px 0;
}
#gallery ul.nav li:last-child {
	margin-right: 0;
}
#gallery ul.nav li label {
	display: block;
	width: 10px;
	height: 10px;
	background-position: -260px -20px;
}
#gallery ul.nav li label:hover { opacity: 0; }

/* slider arrow button */
#gallery p,
#gallery p label {
	position: absolute;
	top: 0;
	margin: 0;
	width: 100px;
	height: 210px;
	cursor: pointer;
}
#gallery .prev {
	left: 0;
}
#gallery .next {
	right: 0;
	background-position: -110px 0;
}
#gallery p i {
	display: block;
	width: 26px;
	height: 26px;
	margin: 140px 0 0 40px;
	background-position: -230px 0;
}
#gallery p:hover i {
	margin: 140px 0 0 32px;
}
#gallery .next i {
	margin-left: 44px;
	background-position: -230px -30px;
}
#gallery .next:hover i {
	margin-left: 52px;
}

/* CSS Programming */
#gallery #switch1:checked ~ .slideFrame ul {
	left: 10px;
}
#gallery #switch2:checked ~ .slideFrame ul {
	left: -400px;
}
#gallery #switch3:checked ~ .slideFrame ul {
	left: -900px;
}
#gallery #switch1:checked ~ .nav li label[for="switch1"],
#gallery #switch2:checked ~ .nav li label[for="switch2"],
#gallery #switch3:checked ~ .nav li label[for="switch3"],
	opacity: 0;
}
#gallery input {
	display: none;
}

#gallery #switch1:checked ~ .prev label:not([for="switch3"]),
#gallery #switch2:checked ~ .prev label:not([for="switch1"]),
#gallery #switch3:checked ~ .prev label:not([for="switch2"]),
#gallery #switch1:checked ~ .next label:not([for="switch2"]),
#gallery #switch2:checked ~ .next label:not([for="switch3"]),
#gallery #switch3:checked ~ .next label:not([for="switch1"]) {
	pointer-events: none;
}

/* transition */
#gallery ul.nav li label {
	transition: all 0.5s ease 0s;
	-webkit-transition: all 0.5s ease 0;
}
#gallery i {
	transition: all 0.3s ease 0s;
	-webkit-transition: all 0.3s ease 0;
}
#gallery .slideFrame ul {
	transition: left 1s cubic-bezier(0.85, 0.03, 0.15, 0.96) 0s;
	-webkit-transition: left 1s cubic-bezier(0.85, 0.03, 0.15, 0.96) 0;
}

/* clearfix */
#gallery ul:before, #gallery ul:after {
	content: ""; display: table;
}
#gallery ul:after {
	clear: both;
}
#gallery ul {
	*zoom: 1;
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

/* :::::: gallery :::::: */

/* #gallery内の指定*/

#gallery {

position: relative;

width: 1000px;

height: 210px;

margin: 0px auto;

padding: 10px 0;

background: #27313D;

}

#gallery .slideFrame {

position: relative;

height: 210px;

overflow: hidden;

margin-bottom: 10px;

}

/* slide images */

#gallery .slideFrame ul {

position: absolute;

top: 0;

left: 90px;

width: 2000px;

margin: 0;

}

#gallery .slideFrame ul li {

float: left;

width: 350px;

margin-right: 20px;

}

#gallery .slideFrame ul li:last-child {

margin-right: 0;

}

#gallery .slideFrame ul li a {

background: none;

}

/* gallery items */

#gallery ul li,{

background: transparent;

}

#gallery ul li label{

background: transparent;

}

#gallery p{

background: transparent;

}

#gallery p i {

background:transparent;

line-height: 1.8em;

}

/* gallery list button */

#gallery ul.nav {

width: 62px;

margin: 0 auto;

padding: 0;

}

#gallery ul.nav li {

float: left;

margin-right: 16px;

background-position: -260px 0;

}

#gallery ul.nav li:last-child {

margin-right: 0;

}

#gallery ul.nav li label {

display: block;

width: 10px;

height: 10px;

background-position: -260px -20px;

}

#gallery ul.nav li label:hover { opacity: 0; }

/* slider arrow button */

#gallery p,

#gallery p label {

position: absolute;

top: 0;

margin: 0;

width: 100px;

height: 210px;

cursor: pointer;

}

#gallery .prev {

left: 0;

}

#gallery .next {

right: 0;

background-position: -110px 0;

}

#gallery p i {

display: block;

width: 26px;

height: 26px;

margin: 140px 0 0 40px;

background-position: -230px 0;

}

#gallery p:hover i {

margin: 140px 0 0 32px;

}

#gallery .next i {

margin-left: 44px;

background-position: -230px -30px;

}

#gallery .next:hover i {

margin-left: 52px;

}

/* CSS Programming */

#gallery #switch1:checked ~ .slideFrame ul {

left: 10px;

}

#gallery #switch2:checked ~ .slideFrame ul {

left: -400px;

}

#gallery #switch3:checked ~ .slideFrame ul {

left: -900px;

}

#gallery #switch1:checked ~ .nav li label[for="switch1"],

#gallery #switch2:checked ~ .nav li label[for="switch2"],

#gallery #switch3:checked ~ .nav li label[for="switch3"],

opacity: 0;

}

#gallery input {

display: none;

}

#gallery #switch1:checked ~ .prev label:not([for="switch3"]),

#gallery #switch2:checked ~ .prev label:not([for="switch1"]),

#gallery #switch3:checked ~ .prev label:not([for="switch2"]),

#gallery #switch1:checked ~ .next label:not([for="switch2"]),

#gallery #switch2:checked ~ .next label:not([for="switch3"]),

#gallery #switch3:checked ~ .next label:not([for="switch1"]) {

pointer-events: none;

}

/* transition */

#gallery ul.nav li label {

transition: all 0.5s ease 0s;

-webkit-transition: all 0.5s ease 0;

}

#gallery i {

transition: all 0.3s ease 0s;

-webkit-transition: all 0.3s ease 0;

}

#gallery .slideFrame ul {

transition: left 1s cubic-bezier(0.85, 0.03, 0.15, 0.96) 0s;

-webkit-transition: left 1s cubic-bezier(0.85, 0.03, 0.15, 0.96) 0;

}

/* clearfix */

#gallery ul:before, #gallery ul:after {

content: ""; display: table;

}

#gallery ul:after {

clear: both;

}

#gallery ul {

*zoom: 1;

}

<div id="gallery">
	<input type="radio" id="switch1" name="gallery" checked="checked">
	<input type="radio" id="switch2" name="gallery">
	<input type="radio" id="switch3" name="gallery">
	<div class="slideFrame">
		<ul>
			<li><a href="" target="_blank"><img src="./a.jpg" alt="" width="520" height="280" /></a></li>
			<li><a href="" target="_blank"><img src="./b.jpg" alt=""  width="520" height="280" /></a></li>
			<li><a href="" target="_blank"><img src="./c.jpg" alt="" width="520" height="280" /></a></li>
			<li><a href="" target="_blank"><img src="./d.jpg" alt=""  width="520" height="280" /></a></li>
			<li><a href="" target="_blank"><img src="./e.jpg" alt=""  width="520" height="280" /></a></li>
		</ul>
	</div>
	<ul class="nav">
		<li><label for="switch1"></label></li>
		<li><label for="switch2"></label></li>
		<li><label for="switch3"></label></li>
	</ul>
	<p class="prev">
		<i> < </i>
		<label for="switch1"></label>
		<label for="switch2"></label>
		<label for="switch3"></label>
	</p>
	<p class="next">
		<i> > </i>
		<label for="switch1"></label>
		<label for="switch2"></label>
		<label for="switch3"></label>
	</p>
</div>