SlidR Base
            
              
              <link rel='stylesheet' href='css/SlidR.css' type='text/css'>

              <article id="portfolio" class="SLDCenter">

              <input checked="" type="radio" name="slidr" id="sld1">
              <input type="radio" name="slidr" id="sld2">
              <input type="radio" name="slidr" id="sld3">
              <input type="radio" name="slidr" id="sld4">

              <div id="slds">
                <div class="sldbox">
                  <div class="sldinner">
                    <div>
                      <div class="sldtext"><h4>Hey !</h4></div>
                        <img src="/img/img0.jpg" alt="1">
                      </div>
                    <div>>
                      <div class="sldtext"><h4>Ho !</h4></div>
                        <img src="/img/img1.jpg" alt="2">
                      </div>
                    <div>
                      <div class="sldtext"><h4>I'm SlidR</h4></div>
                        <img src="/img/img2.jpg" alt="3">
                      </div>
                    <div>
                      <div class="sldtext"><h4>Enjoy !</h4></div>
                        <img src="/img/img3.jpg" alt="4">
                      </div>
                  </div>
                </div>
              </div>
            </article>

            
          
(note that bottom elements are not included in this part of code)

Hey !

1

Ho !

2

I'm Slidr

3

Enjoy !

soleil
SlidR - Controls Only
            
              /* Add the following code to SlidR Base */

              <div id="sldcntrls">
                <label for="sld1"></label>
                <label for="sld2"></label>
                <label for="sld3"></label>
                <label for="sld4"></label>
              </div>
            
          

Hey !

1

Ho !

2

I'm Slidr

3

Enjoy !

soleil
SlidR - State Bar Only
            
              /* Add the following code to SlidR Base */

              <div id="sldbar">
                <label for="sld1"></label>
                <label for="sld2"></label>
                <label for="sld3"></label>
                <label for="sld4"></label>
              </div>
            
          
(note that you can clic on a dot to switch)

Hey !

1

Ho !

2

I'm Slidr

3

Enjoy !

soleil
SlidR - How it Works
            
              #sld1:checked ~ #slds .sldinner { margin-left:0; }
              #sld2:checked ~ #slds .sldinner { margin-left:-100%; }
              #sld3:checked ~ #slds .sldinner { margin-left:-200%; }
              #sld4:checked ~ #slds .sldinner { margin-left:-300%; }

              #slds .sldinner {
                /* steps * 100% */
                width: 400%;
                line-height: 0;
              }

              #slds > .sldbox > .sldinner > div {
                /* 100% / steps */
                width: 25%;
                float: left;
              }

            
          
SlidR creates a big element, in wich every pictures are separated of the viewport width.
Then, it initialises a big element, sized of n times screen width (where n is the number of elements).
After, it shows only 100/n percent of the big element created, which make us able to add a "slider" effect.
The controls are here to translate by 100/n percent the big element, and the transition give this smooth effect.
Copyright (c) 2017 Phoenix. All Rights Reserved.