Responsive slide
How do I make an responsive slide?
Increase and decrease window size to understand. What is a responsive slide? How do you make a responsive slide? This script and codes were developed by Anthony Pothin on 17 January 2023, Tuesday.
Responsive slide - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Responsive slide</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="slide"> <section id="slide_1"> <header> <span>Title 1</span> </header> <div class="content"> <div>ligne 01</div> <div>ligne 02</div> <div>ligne 03</div> <div>ligne 04</div> <div>ligne 05</div> <div>ligne 06</div> <div>ligne 07</div> <div>ligne 08</div> <div>ligne 09</div> <div>ligne 10</div> <div>ligne 11</div> <div>ligne 12</div> <div>ligne 13</div> <div>ligne 14</div> <div>ligne 15</div> <div>ligne 16</div> <div>ligne 17</div> <div>ligne 18</div> <div>ligne 19</div> <div>ligne 20</div> <div>ligne 21</div> <div>ligne 22</div> <div>ligne 23</div> <div>ligne 24</div> <div>ligne 25</div> <div>ligne 26</div> <div>ligne 27</div> <div>ligne 28</div> <div>ligne 29</div> <div>ligne 30</div> <div>ligne 31</div> <div>ligne 32</div> <div>ligne 33</div> <div>ligne 34</div> <div>ligne 35</div> <div>ligne 36</div> <div>ligne 37</div> <div>ligne 38</div> <div>ligne 39</div> </div> </section> <section id="slide_2"> <header> <span>Title 2</span> <a class="previous_slide" href="#slide_1"></a> </header> <div class="content"> <div>ligne 01</div> <div>ligne 02</div> <div>ligne 03</div> <div>ligne 04</div> <div>ligne 05</div> <div>ligne 06</div> <div>ligne 07</div> <div>ligne 08</div> <div>ligne 09</div> <div>ligne 10</div> <div>ligne 11</div> <div>ligne 12</div> <div>ligne 13</div> <div>ligne 14</div> <div>ligne 15</div> <div>ligne 16</div> <div>ligne 17</div> <div>ligne 18</div> <div>ligne 19</div> <div>ligne 20</div> <div>ligne 21</div> <div>ligne 22</div> <div>ligne 23</div> <div>ligne 24</div> <div>ligne 25</div> <div>ligne 26</div> <div>ligne 27</div> <div>ligne 28</div> <div>ligne 29</div> <div>ligne 30</div> <div>ligne 31</div> <div>ligne 32</div> <div>ligne 33</div> <div>ligne 34</div> <div>ligne 35</div> <div>ligne 36</div> <div>ligne 37</div> <div>ligne 38</div> <div>ligne 39</div> </div> </section> <section id="slide_3"> <header> <span>Title 3</span> <a class="previous_slide" href="#slide_2"></a> </header> <div class="content"> <div>ligne 01</div> </div> </section>
</div> <script src="js/index.js"></script>
</body>
</html>
Responsive slide - Script Codes CSS Codes
html, body { width: 100%; height: 100%;
}
.slide { width: 100%; height: 100%; display: flex; flex-direction: width;
}
.slide > section { border-left: solid 3px #909191; flex-grow: 1; flex-shrink: 0; overflow: hidden; display: flex; flex-direction: column;
}
.slide > section:first-child { border-left-style: none;
}
.slide > section > header > .previous_slide { display: none; width:0; height:0; border:10px solid transparent; border-right:10px solid #fdfdfd; position: absolute; left: 6px; top: 6px;
}
.slide > section .content { overflow-y: auto; flex-grow: 1; flex-shrink: 1; flex-basis: 0px; padding: 10px; color: #4E5050; text-shadow: 1px 1px 0px rgba(255,255,255, .2); background: #e5e5e5;
}
.slide section header { position: relative; min-width: 110px; padding: 0 10px 0 40px; color: #fdfdfd; font: bold 14px/32px Arial, sans-serif; text-decoration: none; text-shadow: 0px 1px 0px rgba(0,0,0, .35); background: #6c6e74; background: -moz-linear-gradient(top, #6c6e74 0%, #4b4d51 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6c6e74), color-stop(100%,#4b4d51)); background: -webkit-linear-gradient(top, #6c6e74 0%,#4b4d51 100%); background: -o-linear-gradient(top, #6c6e74 0%,#4b4d51 100%); background: -ms-linear-gradient(top, #6c6e74 0%,#4b4d51 100%); background: linear-gradient(top, #6c6e74 0%,#4b4d51 100%); box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
}
@media screen and (max-width: 800px) { .slide > section:target { display: flex; border-left-style: none; } .slide > section:target > header > .previous_slide { display: block; } .slide > section { display: none; }
}
Responsive slide - Script Codes JS Codes
self.location.hash="#slide_2";
Developer | Anthony Pothin |
Username | Thorien |
Uploaded | January 17, 2023 |
Rating | 3 |
Size | 2,400 Kb |
Views | 8,096 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Tab bar | 3,423 Kb |
Form - select | 10,146 Kb |
Form - form | 3,487 Kb |
Test moment.js | 1,546 Kb |
A Pen by Anthony Pothin | 4,034 Kb |
Magic table | 8,674 Kb |
Resizable flexible box | 3,381 Kb |
Custom scrollbar | 7,800 Kb |
Custom list picker | 5,009 Kb |
Demo component | 2,725 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Cars going | Netoguimaraes | 1,699 Kb |
Pomodoro Clock | Osycon | 3,705 Kb |
TweenMax transformOrigin Bubble | Nicolund | 2,209 Kb |
React Markdown Previewer | C0d0er | 3,190 Kb |
Shape Outside - Polygon | Stacy | 3,954 Kb |
Under construction | GhostRider | 1,642 Kb |
Expandable Left Side Bar with jQuery animate | Retrofuturistic | 2,483 Kb |
A Pen by Manoz | Manoz | 2,424 Kb |
Review test | Otro_user_gil | 4,054 Kb |
Day 11 - Calendar Card | Arnellebalane | 6,984 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!