Responsive slide

Developer
Anthony Pothin
Size
2,400 Kb
Views
8,096
  1. Responsive slide Previews
  2. Responsive slide HTML Codes
  3. Responsive slide CSS Codes
  4. Responsive slide JS Codes

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 Previews
IQ Test

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";
Responsive slide - Script Codes
Responsive slide - Script Codes
Home Page Home
Developer Anthony Pothin
Username Thorien
Uploaded January 17, 2023
Rating 3
Size 2,400 Kb
Views 8,096
Do you need developer help for Responsive slide?

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!

Anthony Pothin (Thorien) Script Codes
Name
Magic table
Form - select
Tab bar
Form - form
Multipart data parsing
Form - datetime picker
Demo component
A Pen by Anthony Pothin
Custom scrollbar
Form - checkbox
Create amazing marketing copy with AI!

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!