febeeh/Image-Slider

This Slider Is Developed Using jQuery-Slider.

Documentation 📖 :

• This Slider Is Developed Using jQuery-YGSlider v0.2. Goto jQuery-YGSlider v0.2 And Try To Develop Your Own Ideas.

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 😉