Loading, please wait...

ARTDESIGN SLIDER

EXAMPLES

Overwrite settings

  • Image 1
  • Image 2
  • Image 3
  • Image 4
  • Image 5
<div data-plugin-ad-slider="ad-slider" data-ad-slider-options="Red">
    <ul>
        <li>
            <img src="Path/To/Images/Slider/1.jpg" alt="Image 1">
        </li>
        <li>
            <img src="Path/To/Images/Slider/2.jpg" alt="Image 2">
        </li>
        <li>
            <img src="Path/To/Images/Slider/3.jpg" alt="Image 3">
        </li>
        <li>
            <img src="Path/To/Images/Slider/4.jpg" alt="Image 4">
        </li>
        <li>
            <img src="Path/To/Images/Slider/5.jpg" alt="Image 5">
        </li>
    </ul>
</div>

Frequently overwriting settings

  • Image 1
  • Image 2
  • Image 3
  • Image 4
  • Image 5
<div data-plugin-ad-slider="ad-slider" data-ad-slider-options="Red, WithOutBody">
    <ul>
        <li>
            <img src="Path/To/Images/Slider/1.jpg" alt="Image 1">
        </li>
        <li>
            <img src="Path/To/Images/Slider/2.jpg" alt="Image 2">
        </li>
        <li>
            <img src="Path/To/Images/Slider/3.jpg" alt="Image 3">
        </li>
        <li>
            <img src="Path/To/Images/Slider/4.jpg" alt="Image 4">
        </li>
        <li>
            <img src="Path/To/Images/Slider/5.jpg" alt="Image 5">
        </li>
    </ul>
</div>

Custom transition

  • Image 1
  • Image 2
  • Image 3
  • Image 4
  • Image 5
<div data-plugin-ad-slider="ad-slider">
    <ul>
        <li>
            <img src="Path/To/Images/Slider/1.jpg" alt="Image 1">
        </li>
        <li>
            <img src="Path/To/Images/Slider/2.jpg" alt="Image 2">
        </li>
        <li>
            <img src="Path/To/Images/Slider/3.jpg" alt="Image 3">
        </li>
        <li data-ad-slider-animation-effect="Fade">
            <img src="Path/To/Images/Slider/4.jpg" alt="Image 4">
        </li>
        <li>
            <img src="Path/To/Images/Slider/5.jpg" alt="Image 5">
        </li>
    </ul>
</div>