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">
  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>
  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>
result The 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
#CSS
Responsive
image slide show

Add new comment

About text formats
  • 565 views