Skip to main content

Resources

Main Content

FlexSlider With Images Only

Sample Code:

<div class="flexslider">
    <ul class="slides">
        <li><img src="/Portals/1697/images/centennial1.jpg"></li>
        <li><img src="/Portals/1697/images/centennial2.jpg"></li>
        <li><img src="/Portals/1697/images/centennial3.jpg"></li>
        <li><img src="/Portals/1697/images/centennial4.jpg"></li>
    </ul>
</div>

FlexSlider with HTML Inside

  • Slide 1

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

  • Slide 2

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

  • Slide 3

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

  • Slide 4

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Sample Code:

<div class="flexslider">
    <ul class="slides">
        <li>
            <div class="oneHalf">
                <img src="/Portals/1697/images/centennial1.jpg">
            </div>
            <div class="oneHalf gridLast">
                <h3>Slide 1</h3>
                <p>Lorem ipsum dolor...</p>                
            </div>
        </li>
        <li>
            <div class="oneHalf">
                <img src="/Portals/1697/images/centennial2.jpg">
            </div>
            <div class="oneHalf gridLast">
                <h3>Slide 2</h3>
                <p>Lorem ipsum dolor...</p>            
            </div>
        </li>
        <li>
            <div class="oneHalf">
                <img src="/Portals/1697/images/centennial3.jpg">
            </div>
            <div class="oneHalf gridLast">
                <h3>Slide 3</h3>
                <p>Lorem ipsum dolor...</p>
            </div>
        </li>
        <li>
            <div class="oneHalf">
                <img src="/Portals/1697/images/centennial4.jpg">
            </div>
            <div class="oneHalf gridLast">
                <h3>Slide 4</h3>
                <p>Lorem ipsum dolor...</p>
            </div>
        </li>
    </ul>
</div>

FlexSlider Adapts to Parent Container Width (fullwidth)

If you want to replicate the example above, make sure to use images that are large enough

FlexSlider Adapts to Parent Container Width (two col layout)

Two Columns

Back to Top
  • The University of Texas at El Paso.
  • 500 West University Avenue,
  • El Paso, Texas 79968
  • (915) 747-5000