Responsive CSS Carousel

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. <title>Sourcecodester Responsive CSS</title>
  4. <meta charset="utf-8" />
  5. <meta name="viewport" content="width=device-width">
  6. <link rel="stylesheet" type="text/css" href="css/style.css">
  7. <link href="css/bootstrap.css" rel="stylesheet">
  8. <link href="css/jumbotron.css" rel="stylesheet">
  9. </head>
  10. <div class="navbar navbar-inverse navbar-fixed-top">
  11. <div class="container">
  12. <div class="navbar-header">
  13. <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
  14. <span class="icon-bar"></span>
  15. <span class="icon-bar"></span>
  16. <span class="icon-bar"></span>
  17. </button>
  18. <a class="navbar-brand" href="index.html"><img src="img/logo.jpg" height="50px"></a>
  19. </div>
  20. <div class="navbar-collapse collapse">
  21. <form class="navbar-form navbar-right">
  22. <ul class="nav navbar-nav">
  23. <li>
  24. <a href="index.html">Home</a>
  25. </li>
  26. <li>
  27. <a href="#">About</a>
  28. </li>
  29. <li>
  30. <a href="#">Contact Us</a>
  31. </li>
  32. </ul>
  33. </form>
  34. </div>
  35. </div>
  36. </div>
  37. <article id=slider>
  38. <input checked type=radio name=slider id=slide1 />
  39. <input type=radio name=slider id=slide2 />
  40. <input type=radio name=slider id=slide3 />
  41. <input type=radio name=slider id=slide4 />
  42. <input type=radio name=slider id=slide5 />
  43. <div id=slides>
  44. <div id=overflow>
  45. <div class=inner>
  46. <article>
  47. <div class=info><h3>Sourcecodester Logo</h3> by <a href="http://www.sourcecodester.com/">Sourcecodester</a></div>
  48. <img src="img/10367724_824850674210417_575443073525047109_n.png" />
  49. </article>
  50.  
  51. <article>
  52. <div class=info><h3>Sourcecodester</h3> by <a href="http://www.sourcecodester.com/">Sourcecodester</a></div>
  53. <img src="img/13230127_1274225859272894_3348317877723364719_n.png" />
  54. </article>
  55.  
  56. <article>
  57. <div class=info><h3>Sourcecodester</h3> by <a href="http://www.sourcecodester.com/">Sourcecodester</a></div>
  58. <img src="img/13718634_1314527168576096_5619003041878477459_n.png" />
  59. </article>
  60.  
  61. <article>
  62. <div class=info><h3>Sourcecodester</h3> by <a href="http://www.sourcecodester.com/">Sourcecodester</a></div>
  63. <img src="img/13445304_1289906617704818_6149110806156711140_n.jpg" />
  64. </article>
  65.  
  66. <article>
  67. <div class=info><h3>Sourcecodester</h3> by <a href="http://www.sourcecodester.com/">Sourcecodester</a></div>
  68. <img src="img/74112_168684229827068_6781623_n.jpg" />
  69. </article>
  70. </div>
  71. </div>
  72. </div>
  73. <div id=controls>
  74. <label for=slide1></label>
  75. <label for=slide2></label>
  76. <label for=slide3></label>
  77. <label for=slide4></label>
  78. <label for=slide5></label>
  79. </div>
  80. <div id=active>
  81. <label for=slide1></label>
  82. <label for=slide2></label>
  83. <label for=slide3></label>
  84. <label for=slide4></label>
  85. <label for=slide5></label>
  86. </div>
  87. </article>
  88. <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
  89. <div class="content">
  90. <div class="floating-box"><a><img src="img/74112_168684229827068_6781623_n.jpg" width="275px" height="150px"></a></div>
  91. <div class="floating-box"><a><img src="img/13445304_1289906617704818_6149110806156711140_n.jpg" width="275px" height="150px"></a></div>
  92. <div class="floating-box"><a><img src="img/13718634_1314527168576096_5619003041878477459_n.png" width="275px" height="150px"></a></div>
  93. <div class="floating-box"><a><img src="img/13230127_1274225859272894_3348317877723364719_n.png" width="275px" height="150px"></a></div>
  94. </div>
  95. <div class="item-list">
  96. <ul class="pager"><li class="pager-current first">1</li>
  97. <li class="pager-item"><a title="Go to page 2" href="#">2</a></li>
  98. <li class="pager-item"><a title="Go to page 3" href="#">3</a></li>
  99. <li class="pager-item"><a title="Go to page 4" href="#">4</a></li>
  100. <li class="pager-item"><a title="Go to page 5" href="#">5</a></li>
  101. <li class="pager-item"><a title="Go to page 6" href="#">6</a></li>
  102. <li class="pager-item"><a title="Go to page 7" href="#">7</a></li>
  103. <li class="pager-item"><a title="Go to page 8" href="#">8</a></li>
  104. <li class="pager-item"><a title="Go to page 9" href="#">9</a></li>
  105. <li class="pager-ellipsis"></li>
  106. <li class="pager-next"><a title="Go to next page" href="#">next ›</a></li>
  107. <li class="pager-last last"><a title="Go to last page" href="#">last »</a></li>
  108. </ul>
  109. </div>
  110. </body>
  111. </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.

Add new comment