Skip to content

febeeh/Image-Slider

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

21 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Slider

Documentation 📖 :

USAGE 📝 :

HTML

  • Adding Images:
<div class="slider_container">
     <div class="slider_row">
          <div class="row_images slideme">
               <img class="slide-to-down-slider" src="images/1.jpg" alt="slider image">
               <h2 class="fadein-slider">TITLE HERE</h2>
               <p class="slide-to-top-slider">Text Here</p>
          </div>
          .
          .
          .
     </div>
</div>

  • Adding Button:
<a class="left-slide">❮</a>
<a class="right-slide">❯</a>
  • Final Code
<div class="slider_container">
    <div class="slider_row">
        <div class="row_images slideme">
            <img class="slide-to-down-slider" src="images/1.jpg" alt="slider image">
            <h2 class="fadein-slider">TITLE HERE</h2>
            <p class="slide-to-top-slider">Text Here</p>
        </div>
        <div class="row_images slideme">
            <img class="slide-to-down-slider" src="images/2.jpg" alt="slider image">
            <h2 class="fadein-slider">TITLE HERE</h2>
            <p class="slide-to-top-slider">Text Here</p>
        </div>
        <div class="row_images slideme">
            <img class="slide-to-down-slider" src="images/3.jpg" alt="slider image">
            <h2 class="fadein-slider">TITLE HERE</h2>
            <p class="slide-to-top-slider">Text Here</p>
        </div>
        <div class="row_images slideme">
            <img class="slide-to-down-slider" src="images/4.jpg" alt="slider image">
            <h2 class="fadein-slider">TITLE HERE</h2>
            <p class="slide-to-top-slider">Text Here</p>
        </div>
        <div class="row_images slideme">
            <img class="slide-to-down-slider" src="images/5.jpg" alt="slider image">
            <h2 class="fadein-slider">TITLE HERE</h2>
            <p class="slide-to-top-slider">Text Here</p>
        </div>
        <div class="row_images slideme">
            <img class="slide-to-down-slider" src="images/3.jpg" alt="slider image">
            <h2 class="fadein-slider">TITLE HERE</h2>
            <p class="slide-to-top-slider">Text Here</p>
        </div>
        <div class="row_images slideme">
            <img class="slide-to-down-slider" src="images/4.jpg" alt="slider image">
            <h2 class="fadein-slider">TITLE HERE</h2>
            <p class="slide-to-top-slider">Text Here</p>
        </div>
        <div class="row_images slideme">
            <img class="slide-to-down-slider" src="images/5.jpg" alt="slider image">
            <h2 class="fadein-slider">TITLE HERE</h2>
            <p class="slide-to-top-slider">Text Here</p>
        </div>
        <div class="row_images slideme">
            <img class="slide-to-down-slider" src="images/3.jpg" alt="slider image">
            <h2 class="fadein-slider">TITLE HERE</h2>
            <p class="slide-to-top-slider">Text Here</p>
        </div>
        <div class="row_images slideme">
            <img class="slide-to-down-slider" src="images/4.jpg" alt="slider image">
            <h2 class="fadein-slider">TITLE HERE</h2>
            <p class="slide-to-top-slider">Text Here</p>
        </div>
        <div class="row_images slideme">
            <img class="slide-to-down-slider" src="images/5.jpg" alt="slider image">
            <h2 class="fadein-slider">TITLE HERE</h2>
            <p class="slide-to-top-slider">Text Here</p>
        </div>
        <div class="row_images slideme">
            <img class="slide-to-down-slider" src="images/2.jpg" alt="slider image">
            <h2 class="fadein-slider">TITLE HERE</h2>
            <p class="slide-to-top-slider">Text Here</p>
        </div>
    </div>

    <a class="left-slide">❮</a>
    <a class="right-slide">❯</a>
</div>

Download The Complete File And Test It Out 😉