Responsive CSS Carousel

Submitted by rinvizle on Friday, July 15, 2016 - 14:07.
This is a simple Responsive Web Page using CSS Carousel. In this tutorial you will learn how to create a responsive web page and has a carousel design that makes the picture or the banner move or having a slideshow of every picture. As I said the Carousel plugin is a component for cycling through elements, like a carousel (slideshow). I will show you the example code and images below.

Sample Code

HTML Page 
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. 	<title>Sourcecodester Responsive CSS</title>
  5. 	<meta charset="utf-8" />
  6. 	<meta name="viewport" content="width=device-width">
  7. 	<link rel="stylesheet" type="text/css" href="css/style.css">
  8. 	<link href="css/bootstrap.css" rel="stylesheet">
  9.     <link href="css/jumbotron.css" rel="stylesheet">
  10. </head>
  11. <body>
  12. <div class="navbar navbar-inverse navbar-fixed-top">
  13.   <div class="container">
  14. 	<div class="navbar-header">
  15. 	  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
  16. 		<span class="icon-bar"></span>
  17. 		<span class="icon-bar"></span>
  18. 		<span class="icon-bar"></span>
  19. 	  </button>
  20. 	  <a class="navbar-brand" href="index.html"><img src="img/logo.jpg" height="50px"></a>
  21. 	</div>
  22. 	<div class="navbar-collapse collapse">
  23. 	  <form class="navbar-form navbar-right">
  24. 		<ul class="nav navbar-nav">
  25. 	   <li>
  26. 		<a href="index.html">Home</a>
  27. 		</li>
  28. 		<li>
  29. 		<a href="#">About</a>
  30. 		</li>
  31. 		<li>
  32. 		<a href="#">Contact Us</a>
  33. 		</li>
  34. 	  </ul>
  35. 	</form>
  36. 	</div>
  37.   </div>
  38. </div>
  39. <article id=slider>
  40. 	<input checked type=radio name=slider id=slide1 />
  41. 	<input type=radio name=slider id=slide2 />
  42. 	<input type=radio name=slider id=slide3 />
  43. 	<input type=radio name=slider id=slide4 />
  44. 	<input type=radio name=slider id=slide5 />
  45. 	<div id=slides>
  46. 		<div id=overflow>
  47. 			<div class=inner>
  48. 				<article>
  49. 					<div class=info><h3>Sourcecodester Logo</h3> by <a href="http://www.sourcecodester.com/">Sourcecodester</a></div>
  50. 		<img src="img/10367724_824850674210417_575443073525047109_n.png" />
  51. 				</article>
  52.  
  53. 				<article>
  54. 					<div class=info><h3>Sourcecodester</h3> by <a href="http://www.sourcecodester.com/">Sourcecodester</a></div>
  55. 					<img src="img/13230127_1274225859272894_3348317877723364719_n.png" />
  56. 				</article>
  57.  
  58. 				<article>
  59. 					<div class=info><h3>Sourcecodester</h3> by <a href="http://www.sourcecodester.com/">Sourcecodester</a></div>
  60. 					<img src="img/13718634_1314527168576096_5619003041878477459_n.png" />
  61. 				</article>
  62.  
  63. 				<article>
  64. 					<div class=info><h3>Sourcecodester</h3> by <a href="http://www.sourcecodester.com/">Sourcecodester</a></div>
  65. 					<img src="img/13445304_1289906617704818_6149110806156711140_n.jpg" />
  66. 				</article>
  67.  
  68. 				<article>
  69. 					<div class=info><h3>Sourcecodester</h3> by <a href="http://www.sourcecodester.com/">Sourcecodester</a></div>
  70. 					<img src="img/74112_168684229827068_6781623_n.jpg" />
  71. 				</article>	
  72. 			</div>
  73. 		</div>
  74. 	</div>
  75. 	<div id=controls>
  76. 		<label for=slide1></label>
  77. 		<label for=slide2></label>
  78. 		<label for=slide3></label>
  79. 		<label for=slide4></label>
  80. 		<label for=slide5></label>
  81. 	</div>
  82. 	<div id=active>
  83. 		<label for=slide1></label>
  84. 		<label for=slide2></label>
  85. 		<label for=slide3></label>
  86. 		<label for=slide4></label>
  87. 		<label for=slide5></label>
  88. 	</div>
  89. </article>
  90. <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
  91. <div class="content">
  92. 	<div class="floating-box"><a><img src="img/74112_168684229827068_6781623_n.jpg" width="275px" height="150px"></a></div>
  93. 	<div class="floating-box"><a><img src="img/13445304_1289906617704818_6149110806156711140_n.jpg" width="275px" height="150px"></a></div>
  94. 	<div class="floating-box"><a><img src="img/13718634_1314527168576096_5619003041878477459_n.png" width="275px" height="150px"></a></div>
  95. 	<div class="floating-box"><a><img src="img/13230127_1274225859272894_3348317877723364719_n.png" width="275px" height="150px"></a></div>
  96. </div>
  97. <div class="item-list">
  98. <ul class="pager"><li class="pager-current first">1</li>
  99. 	<li class="pager-item"><a title="Go to page 2" href="#">2</a></li>
  100. 	<li class="pager-item"><a title="Go to page 3" href="#">3</a></li>
  101. 	<li class="pager-item"><a title="Go to page 4" href="#">4</a></li>
  102. 	<li class="pager-item"><a title="Go to page 5" href="#">5</a></li>
  103. 	<li class="pager-item"><a title="Go to page 6" href="#">6</a></li>
  104. 	<li class="pager-item"><a title="Go to page 7" href="#">7</a></li>
  105. 	<li class="pager-item"><a title="Go to page 8" href="#">8</a></li>
  106. 	<li class="pager-item"><a title="Go to page 9" href="#">9</a></li>
  107. 	<li class="pager-ellipsis">…</li>
  108. 	<li class="pager-next"><a title="Go to next page" href="#">next ›</a></li>
  109. 	<li class="pager-last last"><a title="Go to last page" href="#">last »</a></li>
  110. </ul>
  111. </div>
  112. </body>
  113. </html>
resultThe Carousel Script or The CSS 
  1. label, a {
  2.   cursor: pointer;
  3.   text-decoration: none;
  4. }
  5. * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
  6. label, #active, img { -moz-user-select:none;-webkit-user-select:none; }
  7. #slider {
  8. 	margin: 0 auto;
  9. }
  10. input {
  11. 	display: none;
  12. }
  13. #slide1:checked ~ #slides .inner { margin-left:0; }
  14. #slide2:checked ~ #slides .inner { margin-left:-100%; }
  15. #slide3:checked ~ #slides .inner { margin-left:-200%; }
  16. #slide4:checked ~ #slides .inner { margin-left:-300%; }
  17. #slide5:checked ~ #slides .inner { margin-left:-400%; }
  18. #overflow {
  19. 	width: 100%;
  20. 	overflow: hidden;
  21. 	height: 400px;
  22. }
  23. .floating-box {
  24.     float: left;
  25.     width: 275px;
  26.     height: 150px;
  27.     margin: 11px;
  28.     border: 1px solid #bce8f1;  
  29. }
  30.  
  31. .after-box {
  32.     clear: left;
  33.     border: 3px solid red;      
  34. }
  35. article img {
  36. 	width: 100%;
  37. }
  38. #slides .inner {
  39. 	width: 500%;
  40. }
  41. #slides article {
  42. 	width: 20%;
  43. 	float: left;
  44. }
  45. #controls {
  46. 	margin: -20% 0 0 0;
  47. 	width: 100%;
  48. 	height: 50px;
  49. }
  50. #controls label { 
  51. 	width: 50px;
  52. 	height: 50px;
  53. 	opacity: 0.3;
  54.   &:hover { opacity: 0.8; }
  55. }
  56. #slide1:checked ~ #controls label:nth-child(2), 
  57. #slide2:checked ~ #controls label:nth-child(3), 
  58. #slide3:checked ~ #controls label:nth-child(4), 
  59. #slide4:checked ~ #controls label:nth-child(5), 
  60. #slide5:checked ~ #controls label:nth-child(1) {
  61. 	background: url('../img/next.png') no-repeat;
  62. 	float: right;
  63. 	margin: 0 -70px 0 0;
  64. 	display: block;
  65. }
  66. #slide1:checked ~ #controls label:nth-child(5),
  67. #slide2:checked ~ #controls label:nth-child(1),
  68. #slide3:checked ~ #controls label:nth-child(2),
  69. #slide4:checked ~ #controls label:nth-child(3),
  70. #slide5:checked ~ #controls label:nth-child(4) {
  71. 	background: url('../img/prev.png') no-repeat;
  72. 	float: left;
  73. 	margin: 0 0 0 -70px;
  74. 	display: block;
  75. }
  76. .info {
  77. 	line-height: 20px;
  78. 	margin: 0 0 -150%;
  79. 	position: absolute;
  80. 	padding: 30px 30px;
  81. 	opacity: 0;
  82. 	text-align: left;
  83. }
  84. .info h3 {
  85. 	margin: 0 0 5px;
  86. 	font-size: 22px;
  87. 	font-style: normal;
  88. }
  89. #slides .inner {
  90. 	-webkit-transform: translateZ(0);
  91. 	-webkit-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
  92. 	-moz-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
  93.     -ms-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
  94.      -o-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
  95.         transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
  96. 	-webkit-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); 
  97. 	-moz-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); 
  98.     -ms-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); 
  99.      -o-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); 
  100.         transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
  101. }
  102. #slider {
  103. 	-webkit-transform: translateZ(0);
  104. 	-webkit-transition: all 0.5s ease-out;
  105. 	-moz-transition: all 0.5s ease-out;
  106. 	-o-transition: all 0.5s ease-out;
  107. 	transition: all 0.5s ease-out;
  108. 	margin-top: 32px;
  109. }
  110. #controls label{
  111. 	-webkit-transform: translateZ(0);
  112. 	-webkit-transition: opacity 0.2s ease-out;
  113. 	-moz-transition: opacity 0.2s ease-out;
  114. 	-o-transition: opacity 0.2s ease-out;
  115. 	transition: opacity 0.2s ease-out;
  116. }
  117. #slide1:checked ~ #slides article:nth-child(1) .info,
  118. #slide2:checked ~ #slides article:nth-child(2) .info,
  119. #slide3:checked ~ #slides article:nth-child(3) .info,
  120. #slide4:checked ~ #slides article:nth-child(4) .info,
  121. #slide5:checked ~ #slides article:nth-child(5) .info {
  122. 	opacity: 1;
  123. 	-webkit-transition: all 1s ease-out 0.6s;
  124. 	-moz-transition: all 1s ease-out 0.6s;
  125. 	-o-transition: all 1s ease-out 0.6s;
  126. 	transition: all 1s ease-out 0.6s;
  127. }
  128. .info, #controls, #slides, #active, #active label, .info h3 {
  129. 	-webkit-transform: translateZ(0);
  130. 	-webkit-transition: all 0.5s ease-out;
  131. 	-moz-transition: all 0.5s ease-out;
  132. 	-o-transition: all 0.5s ease-out;
  133. 	transition: all 0.5s ease-out;
  134. }
  135. @media only screen and (max-width: 850px) and (min-width: 450px) {
  136. 	#slider #controls {
  137. 		margin: -25% 0 0 15%;
  138. 		width: 70%;
  139. 		height: 50px;
  140. 	}
  141. 	#slider #controls label {
  142. 		-moz-transform: scale(0.8);
  143. 		-webkit-transform: scale(0.8);
  144. 		-o-transform: scale(0.8);
  145. 		-ms-transform: scale(0.8);
  146. 		transform: scale(0.8);
  147. 	}
  148. }
  149. @media only screen and (max-width: 450px) {
  150. 	#slider #controls {
  151. 		margin: -28% 0 0 24%;
  152. 		width: 50%;
  153. 		height: 50px;
  154. 	}
  155. 	#slider #slides {
  156. 		padding: 1% 0;
  157. 		-webkit-border-radius: 0px;
  158. 		-moz-border-radius: 0px;
  159. 		border-radius: 0px;
  160. 	}
  161. 	#slider #controls label {
  162. 		-moz-transform: scale(0.6);
  163. 		-webkit-transform: scale(0.6);
  164. 		-o-transform: scale(0.6);
  165. 		-ms-transform: scale(0.6);
  166. 		transform: scale(0.6);
  167. 	}
  168. }
  169. @media only screen and (min-width: 850px) {
  170. 	body {
  171. 		padding: 0 80px;
  172. 	}
  173. }
For more tutorials just visit this website @www.sourcecodester.com and don't forget to Like and Share. Enjoy Coding.

Tags

Add new comment

About text formats
  • 429 views