Code Document

Slider Gallery

  • Example 1:

  • Code:

    <div id="slider-670e6b0210bc3" class="vslider slider-gallery" style data-vsettings="items:5,tween:vmoveIaUa,stagger:100">
    <ul id="slider-670e6b0210bc3-div" class="vsli-divs vpos-r vgri vl-5 vm-5 vs-1">
    <li class="vsli-div image-item image-326 ">
    <div class="vimg">
    <a class="link-to-figure vlight" data-vlight="slider-670e6b0210bc3" href="https://wphiveframework.com/wp-content/uploads/2017/08/gallery_05.png">
    <figure class="vmedia" data-vmedia="https://wphiveframework.com/wp-content/uploads/2017/08/gallery_05.png"></figure>
    </a>
    </div>
    </li>
    <li class="vsli-div image-item image-325 ">
    <div class="vimg">
    <a class="link-to-figure vlight" data-vlight="slider-670e6b0210bc3" href="https://wphiveframework.com/wp-content/uploads/2017/08/gallery_04.png">
    <figure class="vmedia" data-vmedia="https://wphiveframework.com/wp-content/uploads/2017/08/gallery_04.png"></figure>
    </a>
    </div>
    </li>
    <li class="vsli-div image-item image-324 ">
    <div class="vimg">
    <a class="link-to-figure vlight" data-vlight="slider-670e6b0210bc3" href="https://wphiveframework.com/wp-content/uploads/2017/08/gallery_03.png">
    <figure class="vmedia" data-vmedia="https://wphiveframework.com/wp-content/uploads/2017/08/gallery_03.png"></figure>
    </a>
    </div>
    </li>
    <li class="vsli-div image-item image-323 ">
    <div class="vimg">
    <a class="link-to-figure vlight" data-vlight="slider-670e6b0210bc3" href="https://wphiveframework.com/wp-content/uploads/2017/08/gallery_02.png">
    <figure class="vmedia" data-vmedia="https://wphiveframework.com/wp-content/uploads/2017/08/gallery_02.png"></figure>
    </a>
    </div>
    </li>
    <li class="vsli-div image-item image-322 ">
    <div class="vimg">
    <a class="link-to-figure vlight" data-vlight="slider-670e6b0210bc3" href="https://wphiveframework.com/wp-content/uploads/2017/08/gallery_01.png">
    <figure class="vmedia" data-vmedia="https://wphiveframework.com/wp-content/uploads/2017/08/gallery_01.png"></figure>
    </a>
    </div>
    </li>
    <li class="vsli-div image-item image-321 ">
    <div class="vimg">
    <a class="link-to-figure vlight" data-vlight="slider-670e6b0210bc3" href="https://wphiveframework.com/wp-content/uploads/2017/08/gallery_06.jpg">
    <figure class="vmedia" data-vmedia="https://wphiveframework.com/wp-content/uploads/2017/08/gallery_06.jpg"></figure>
    </a>
    </div>
    </li>
    </ul>
    <ul class="vsli-nav vrow cf" data-vcontrol="slider-670e6b0210bc3">
    <li class="vl-3 vm-3 vs-6 vcol vtex-al">
    <p>
    <a class="vsli-tag varr vl" href="#prev"></a>
    </p>
    </li>
    <li class="vl-3 vm-3 vs-6 vcol vl-r6 vm-r6 vtex-ar">
    <p>
    <a class="vsli-tag varr vr" href="#next"></a>
    </p>
    </li>
    <li class="vl-6 vm-6 vs-12 vcol vl-l3 vm-l3 vtex-ac">
    <ul class="vsli-dots cf"></ul>
    </li>
    </ul>
    </div>

Categories

©
    • Los Angeles

    • CA

    • United States

  • Website

  • Facebook

  • Slider Gallery | Frontend UI Toolkit + Wordpress Framework

  • A wordpress framework used to structure simple Javascript and CSS prototypes. Hive is lite, only includes necessities and encourages custom styling.