uikit
Version:
UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces.
643 lines (610 loc) • 49.2 kB
HTML
<html lang="en-gb" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Image - UIkit tests</title>
<script src="js/test.js"></script>
</head>
<body>
<div class="uk-container">
<h1>Image</h1>
<div class="uk-height-large uk-background-cover uk-margin-medium uk-flex uk-flex-center uk-flex-middle uk-light" data-src="https://images.unsplash.com/photo-1495321308589-43affb814eee?fit=crop&w=1200&h=450&q=80" uk-img="loading: eager">
<h1>Background Image Loading Eager</h1>
</div>
<h2>Loading Lazy Attribute</h2>
<div class="uk-child-width-1-2@m" uk-grid>
<div>
<img src="https://images.unsplash.com/photo-1476820865390-c52aeebb9891?fit=crop&w=900&h=600&q=80" width="900" height="600" alt="" loading="lazy">
<p class="uk-margin-small-top">Image</p>
</div>
<div>
<picture>
<source srcset="https://images.unsplash.com/photo-1487958449943-2429e8be8625?fit=crop&w=580&h=386&q=80 580w,
https://images.unsplash.com/photo-1487958449943-2429e8be8625?fit=crop&w=900&h=600&q=80 900w"
media="(min-width: 1200px)">
<img src="https://images.unsplash.com/photo-1435575653489-b0873ec954e2?fit=crop&w=900&h=600&q=80"
srcset="https://images.unsplash.com/photo-1435575653489-b0873ec954e2?fit=crop&w=580&h=386&q=80 580w,
https://images.unsplash.com/photo-1435575653489-b0873ec954e2?fit=crop&w=900&h=600&q=80 900w"
sizes="(min-width: 960px) 580px, 100vw"
width="900" height="600" alt="" loading="lazy">
</picture>
<p class="uk-margin-small-top">Picture with Srcset</p>
</div>
</div>
<div class="uk-child-width-1-2@s uk-child-width-1-3@m" uk-grid>
<div>
<img src="https://images.unsplash.com/photo-1517842536804-bf6629e2c291?fit=crop&w=373&h=249&q=80"
srcset="https://images.unsplash.com/photo-1517842536804-bf6629e2c291?fit=crop&w=373&h=249&q=80 373w,
https://images.unsplash.com/photo-1517842536804-bf6629e2c291?fit=crop&w=746&h=498&q=80 746w"
sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
width="746" height="498" alt="" loading="lazy">
</div>
<div>
<img src="https://images.unsplash.com/photo-1488190211105-8b0e65b80b4e?fit=crop&w=373&h=249&q=80"
srcset="https://images.unsplash.com/photo-1488190211105-8b0e65b80b4e?fit=crop&w=373&h=249&q=80 373w,
https://images.unsplash.com/photo-1488190211105-8b0e65b80b4e?fit=crop&w=746&h=498&q=80 746w"
sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
width="746" height="498" alt="" loading="lazy">
</div>
<div>
<img src="https://images.unsplash.com/photo-1645042770830-b698d978c49a?fit=crop&w=373&h=249&q=80"
srcset="https://images.unsplash.com/photo-1645042770830-b698d978c49a?fit=crop&w=373&h=249&q=80 373w,
https://images.unsplash.com/photo-1645042770830-b698d978c49a?fit=crop&w=746&h=498&q=80 746w"
sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
width="746" height="498" alt="" loading="lazy">
</div>
<div>
<img src="https://images.unsplash.com/photo-1645022576935-fc012945f8e7?fit=crop&w=373&h=249&q=80"
srcset="https://images.unsplash.com/photo-1645022576935-fc012945f8e7?fit=crop&w=373&h=249&q=80 373w,
https://images.unsplash.com/photo-1645022576935-fc012945f8e7?fit=crop&w=746&h=498&q=80 746w"
sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
width="746" height="498" alt="" loading="lazy">
</div>
<div>
<img src="https://images.unsplash.com/photo-1562315434-3e2de605346e?fit=crop&w=373&h=249&q=80"
srcset="https://images.unsplash.com/photo-1562315434-3e2de605346e?fit=crop&w=373&h=249&q=80 373w,
https://images.unsplash.com/photo-1562315434-3e2de605346e?fit=crop&w=746&h=498&q=80 746w"
sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
width="746" height="498" alt="" loading="lazy">
</div>
<div>
<img src="https://images.unsplash.com/photo-1644489263914-eef937e00343?fit=crop&w=373&h=249&q=80"
srcset="https://images.unsplash.com/photo-1644489263914-eef937e00343?fit=crop&w=373&h=249&q=80 373w,
https://images.unsplash.com/photo-1644489263914-eef937e00343?fit=crop&w=746&h=498&q=80 746w"
sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
width="746" height="498" alt="" loading="lazy">
</div>
<div>
<img src="https://images.unsplash.com/photo-1644990978896-c86bd2e5fd2e?fit=crop&w=373&h=249&q=80"
srcset="https://images.unsplash.com/photo-1644990978896-c86bd2e5fd2e?fit=crop&w=373&h=249&q=80 373w,
https://images.unsplash.com/photo-1644990978896-c86bd2e5fd2e?fit=crop&w=746&h=498&q=80 746w"
sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
width="746" height="498" alt="" loading="lazy">
</div>
<div>
<img src="https://images.unsplash.com/photo-1642628658566-1db49cadf78c?fit=crop&w=373&h=249&q=80"
srcset="https://images.unsplash.com/photo-1642628658566-1db49cadf78c?fit=crop&w=373&h=249&q=80 373w,
https://images.unsplash.com/photo-1642628658566-1db49cadf78c?fit=crop&w=746&h=498&q=80 746w"
sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
width="746" height="498" alt="" loading="lazy">
</div>
<div>
<img src="https://images.unsplash.com/photo-1508138119323-5452bd81d53d?fit=crop&w=373&h=249&q=80"
srcset="https://images.unsplash.com/photo-1508138119323-5452bd81d53d?fit=crop&w=373&h=249&q=80 373w,
https://images.unsplash.com/photo-1508138119323-5452bd81d53d?fit=crop&w=746&h=498&q=80 746w"
sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
width="746" height="498" alt="" loading="lazy">
</div>
<div>
<img src="https://images.unsplash.com/photo-1643610493325-89876f661588?fit=crop&w=373&h=249&q=80"
srcset="https://images.unsplash.com/photo-1643610493325-89876f661588?fit=crop&w=373&h=249&q=80 373w,
https://images.unsplash.com/photo-1643610493325-89876f661588?fit=crop&w=746&h=498&q=80 746w"
sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
width="746" height="498" alt="" loading="lazy">
</div>
<div>
<img src="https://images.unsplash.com/photo-1638518716535-955899d18a19?fit=crop&w=373&h=249&q=80"
srcset="https://images.unsplash.com/photo-1638518716535-955899d18a19?fit=crop&w=373&h=249&q=80 373w,
https://images.unsplash.com/photo-1638518716535-955899d18a19?fit=crop&w=746&h=498&q=80 746w"
sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
width="746" height="498" alt="" loading="lazy">
</div>
<div>
<img src="https://images.unsplash.com/photo-1566221522142-ebbf26f78096?fit=crop&w=373&h=249&q=80"
srcset="https://images.unsplash.com/photo-1566221522142-ebbf26f78096?fit=crop&w=373&h=249&q=80 373w,
https://images.unsplash.com/photo-1566221522142-ebbf26f78096?fit=crop&w=746&h=498&q=80 746w"
sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
width="746" height="498" alt="" loading="lazy">
</div>
<div>
<img src="https://images.unsplash.com/photo-1643967894891-cbaa3714584a?fit=crop&w=373&h=249&q=80"
srcset="https://images.unsplash.com/photo-1643967894891-cbaa3714584a?fit=crop&w=373&h=249&q=80 373w,
https://images.unsplash.com/photo-1643967894891-cbaa3714584a?fit=crop&w=746&h=498&q=80 746w"
sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
width="746" height="498" alt="" loading="lazy">
</div>
<div>
<img src="https://images.unsplash.com/photo-1535191059345-c16453b851b2?fit=crop&w=373&h=249&q=80"
srcset="https://images.unsplash.com/photo-1535191059345-c16453b851b2?fit=crop&w=373&h=249&q=80 373w,
https://images.unsplash.com/photo-1535191059345-c16453b851b2?fit=crop&w=746&h=498&q=80 746w"
sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
width="746" height="498" alt="" loading="lazy">
</div>
<div>
<img src="https://images.unsplash.com/photo-1629757509637-7c99379d6d26?fit=crop&w=373&h=249&q=80"
srcset="https://images.unsplash.com/photo-1629757509637-7c99379d6d26?fit=crop&w=373&h=249&q=80 373w,
https://images.unsplash.com/photo-1629757509637-7c99379d6d26?fit=crop&w=746&h=498&q=80 746w"
sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
width="746" height="498" alt="" loading="lazy">
</div>
<div>
<img src="https://images.unsplash.com/photo-1645572608840-8f32e4bcb084?fit=crop&w=373&h=249&q=80"
srcset="https://images.unsplash.com/photo-1645572608840-8f32e4bcb084?fit=crop&w=373&h=249&q=80 373w,
https://images.unsplash.com/photo-1645572608840-8f32e4bcb084?fit=crop&w=746&h=498&q=80 746w"
sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
width="746" height="498" alt="" loading="lazy">
</div>
<div>
<img src="https://images.unsplash.com/photo-1645403816136-fc4b964a3776?fit=crop&w=373&h=249&q=80"
srcset="https://images.unsplash.com/photo-1645403816136-fc4b964a3776?fit=crop&w=373&h=249&q=80 373w,
https://images.unsplash.com/photo-1645403816136-fc4b964a3776?fit=crop&w=746&h=498&q=80 746w"
sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
width="746" height="498" alt="" loading="lazy">
</div>
<div>
<img src="https://images.unsplash.com/photo-1645363709954-b63ddfcd30e3?fit=crop&w=373&h=249&q=80"
srcset="https://images.unsplash.com/photo-1645363709954-b63ddfcd30e3?fit=crop&w=373&h=249&q=80 373w,
https://images.unsplash.com/photo-1645363709954-b63ddfcd30e3?fit=crop&w=746&h=498&q=80 746w"
sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
width="746" height="498" alt="" loading="lazy">
</div>
<div>
<img src="https://images.unsplash.com/photo-1645363441277-b2be67dcdca0?fit=crop&w=373&h=249&q=80"
srcset="https://images.unsplash.com/photo-1645363441277-b2be67dcdca0?fit=crop&w=373&h=249&q=80 373w,
https://images.unsplash.com/photo-1645363441277-b2be67dcdca0?fit=crop&w=746&h=498&q=80 746w"
sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
width="746" height="498" alt="" loading="lazy">
</div>
<div>
<img src="https://images.unsplash.com/photo-1645352809168-be1d1ef6d31c?fit=crop&w=373&h=249&q=80"
srcset="https://images.unsplash.com/photo-1645352809168-be1d1ef6d31c?fit=crop&w=373&h=249&q=80 373w,
https://images.unsplash.com/photo-1645352809168-be1d1ef6d31c?fit=crop&w=746&h=498&q=80 746w"
sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
width="746" height="498" alt="" loading="lazy">
</div>
<div>
<img src="https://images.unsplash.com/photo-1643231164357-11790926b995?fit=crop&w=373&h=249&q=80"
srcset="https://images.unsplash.com/photo-1643231164357-11790926b995?fit=crop&w=373&h=249&q=80 373w,
https://images.unsplash.com/photo-1643231164357-11790926b995?fit=crop&w=746&h=498&q=80 746w"
sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
width="746" height="498" alt="" loading="lazy">
</div>
<div>
<img src="https://images.unsplash.com/photo-1642702550383-3436f1b3d6ca?fit=crop&w=373&h=249&q=80"
srcset="https://images.unsplash.com/photo-1642702550383-3436f1b3d6ca?fit=crop&w=373&h=249&q=80 373w,
https://images.unsplash.com/photo-1642702550383-3436f1b3d6ca?fit=crop&w=746&h=498&q=80 746w"
sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
width="746" height="498" alt="" loading="lazy">
</div>
<div>
<img src="https://images.unsplash.com/photo-1642773156765-6f5e392dec03?fit=crop&w=373&h=249&q=80"
srcset="https://images.unsplash.com/photo-1642773156765-6f5e392dec03?fit=crop&w=373&h=249&q=80 373w,
https://images.unsplash.com/photo-1642773156765-6f5e392dec03?fit=crop&w=746&h=498&q=80 746w"
sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
width="746" height="498" alt="" loading="lazy">
</div>
<div>
<img src="https://images.unsplash.com/photo-1645570072967-82ceaea33b81?fit=crop&w=373&h=249&q=80"
srcset="https://images.unsplash.com/photo-1645570072967-82ceaea33b81?fit=crop&w=373&h=249&q=80 373w,
https://images.unsplash.com/photo-1645570072967-82ceaea33b81?fit=crop&w=746&h=498&q=80 746w"
sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
width="746" height="498" alt="" loading="lazy">
</div>
<div>
<img src="https://images.unsplash.com/photo-1497636577773-f1231844b336?fit=crop&w=373&h=249&q=80"
srcset="https://images.unsplash.com/photo-1497636577773-f1231844b336?fit=crop&w=373&h=249&q=80 373w,
https://images.unsplash.com/photo-1497636577773-f1231844b336?fit=crop&w=746&h=498&q=80 746w"
sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
width="746" height="498" alt="" loading="lazy">
</div>
<div>
<img src="https://images.unsplash.com/photo-1517336714731-489689fd1ca8?fit=crop&w=373&h=249&q=80"
srcset="https://images.unsplash.com/photo-1517336714731-489689fd1ca8?fit=crop&w=373&h=249&q=80 373w,
https://images.unsplash.com/photo-1517336714731-489689fd1ca8?fit=crop&w=746&h=498&q=80 746w"
sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
width="746" height="498" alt="" loading="lazy">
</div>
<div>
<img src="https://images.unsplash.com/photo-1511300636408-a63a89df3482?fit=crop&w=373&h=249&q=80"
srcset="https://images.unsplash.com/photo-1511300636408-a63a89df3482?fit=crop&w=373&h=249&q=80 373w,
https://images.unsplash.com/photo-1511300636408-a63a89df3482?fit=crop&w=746&h=498&q=80 746w"
sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
width="746" height="498" alt="" loading="lazy">
</div>
</div>
<h2>Background Image</h2>
<div class="uk-height-large uk-background-cover uk-margin-medium uk-flex uk-flex-center uk-flex-middle uk-light" data-src="https://images.unsplash.com/photo-1490822180406-880c226c150b?fit=crop&w=1200&h=450&q=80" uk-img>
<h1>Background Image</h1>
</div>
<div class="uk-height-large uk-background-cover uk-margin-medium uk-flex uk-flex-center uk-flex-middle"
data-src="https://images.unsplash.com/photo-1485627941502-d2e6429a8af0?fit=crop&w=1200&h=450&q=80"
data-srcset="https://images.unsplash.com/photo-1485627941502-d2e6429a8af0?fit=crop&w=800&h=300&q=80 800w,
https://images.unsplash.com/photo-1485627941502-d2e6429a8af0?fit=crop&w=1200&h=450&q=80 1200w,
https://images.unsplash.com/photo-1485627941502-d2e6429a8af0?fit=crop&w=2400&h=900&q=80 2400w"
sizes="(min-width: 1200px) 1200px, 100vw" uk-img>
<h1>Background Image with Srcset</h1>
</div>
<div class="uk-height-large uk-background-cover uk-margin-medium uk-flex uk-flex-center uk-flex-middle uk-light"
sources="srcset: https://images.unsplash.com/photo-1487837647815-bbc1f30cd0d2?fit=crop&w=1200&h=450&q=80; media: (min-width: 1200px)"
data-src="https://images.unsplash.com/photo-1546349851-64285be8e9fa?fit=crop&w=1200&h=450&q=8"
uk-img>
<h1>Background Picture</h1>
</div>
<div class="uk-height-large uk-background-cover uk-margin-medium uk-flex uk-flex-center uk-flex-middle uk-light"
sources="srcset: https://images.unsplash.com/photo-1464621922360-27f3bf0eca75?fit=crop&w=800&h=300&q=80 800w,
https://images.unsplash.com/photo-1464621922360-27f3bf0eca75?fit=crop&w=1200&h=450&q=80 1200w,
https://images.unsplash.com/photo-1464621922360-27f3bf0eca75?fit=crop&w=2400&h=900&q=80 2400w; media: (min-width: 1200px)"
data-src="https://images.unsplash.com/photo-1472803828399-39d4ac53c6e5?fit=crop&w=1200&h=450&q=80"
data-srcset="https://images.unsplash.com/photo-1472803828399-39d4ac53c6e5?fit=crop&w=800&h=300&q=80 800w,
https://images.unsplash.com/photo-1472803828399-39d4ac53c6e5?fit=crop&w=1200&h=450&q=80 1200w,
https://images.unsplash.com/photo-1472803828399-39d4ac53c6e5?fit=crop&w=2400&h=900&q=80 2400w"
sizes="(min-width: 1200px) 1200px, 100vw" uk-img>
<h1>Background Picture with Srcset</h1>
</div>
<div class="uk-height-large uk-background-cover uk-margin-medium uk-flex uk-flex-center uk-flex-middle"
sources="[{"srcset": "images/image-type.avif",
"type": "image\/avif"
},
{"srcset": "images/image-type.webp",
"type": "image\/webp"
}]"
data-src="images/image-type.jpg"
uk-img>
<h1>Background Picture with Multiple Sources</h1>
</div>
<h2>uk-img with Image element (Deprecated)</h2>
<div class="uk-child-width-1-2@m" uk-grid>
<div>
<img data-src="https://images.unsplash.com/photo-1522201949034-507737bce479?fit=crop&w=900&h=600&q=80" width="900" height="600" alt="" uk-img>
<p class="uk-margin-small-top">Image</p>
</div>
<div>
<picture>
<source data-srcset="https://images.unsplash.com/photo-1447933601403-0c6688de566e?fit=crop&w=580&h=386&q=80 580w,
https://images.unsplash.com/photo-1447933601403-0c6688de566e?fit=crop&w=900&h=600&q=80 900w"
media="(min-width: 1200px)">
<img data-src="https://images.unsplash.com/photo-1503481766315-7a586b20f66d?fit=crop&w=900&h=600&q=80"
data-srcset="https://images.unsplash.com/photo-1503481766315-7a586b20f66d?fit=crop&w=580&h=386&q=80 580w,
https://images.unsplash.com/photo-1503481766315-7a586b20f66d?fit=crop&w=900&h=600&q=80 900w"
sizes="(min-width: 960px) 580px, 100vw"
width="900" height="600" alt="" uk-img>
</picture>
<p class="uk-margin-small-top">Picture with Srcset</p>
</div>
</div>
<div class="uk-child-width-1-2@s uk-child-width-1-3@m" uk-grid>
<div>
<img data-src="https://images.unsplash.com/photo-1523359247812-29dde5ac53a0?fit=crop&w=373&h=249&q=80"
data-srcset="https://images.unsplash.com/photo-1523359247812-29dde5ac53a0?fit=crop&w=373&h=249&q=80 373w,
https://images.unsplash.com/photo-1523359247812-29dde5ac53a0?fit=crop&w=746&h=498&q=80 746w"
sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
width="746" height="498" alt="" uk-img>
</div>
<div>
<img data-src="https://images.unsplash.com/photo-1522201949034-507737bce479?fit=crop&w=373&h=249&q=80"
data-srcset="https://images.unsplash.com/photo-1522201949034-507737bce479?fit=crop&w=373&h=249&q=80 373w,
https://images.unsplash.com/photo-1522201949034-507737bce479?fit=crop&w=746&h=498&q=80 746w"
sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
width="746" height="498" alt="" uk-img>
</div>
<div>
<img data-src="https://images.unsplash.com/photo-1522205445560-4630427027e3?fit=crop&w=373&h=249&q=80"
data-srcset="https://images.unsplash.com/photo-1522205445560-4630427027e3?fit=crop&w=373&h=249&q=80 373w,
https://images.unsplash.com/photo-1522205445560-4630427027e3?fit=crop&w=746&h=498&q=80 746w"
sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
width="746" height="498" alt="" uk-img>
</div>
<div>
<img data-src="https://images.unsplash.com/photo-1519635667140-f5e8fd6c617f?fit=crop&w=373&h=249&q=80"
data-srcset="https://images.unsplash.com/photo-1519635667140-f5e8fd6c617f?fit=crop&w=373&h=249&q=80 373w,
https://images.unsplash.com/photo-1519635667140-f5e8fd6c617f?fit=crop&w=746&h=498&q=80 746w"
sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
width="746" height="498" alt="" uk-img>
</div>
<div>
<img data-src="https://images.unsplash.com/photo-1516054237813-0df813b7f496?fit=crop&w=373&h=249&q=80"
data-srcset="https://images.unsplash.com/photo-1516054237813-0df813b7f496?fit=crop&w=373&h=249&q=80 373w,
https://images.unsplash.com/photo-1516054237813-0df813b7f496?fit=crop&w=746&h=498&q=80 746w"
sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
width="746" height="498" alt="" uk-img>
</div>
<div>
<img data-src="https://images.unsplash.com/photo-1487447054015-16918f0e7999?fit=crop&w=373&h=249&q=80"
data-srcset="https://images.unsplash.com/photo-1487447054015-16918f0e7999?fit=crop&w=373&h=249&q=80 373w,
https://images.unsplash.com/photo-1487447054015-16918f0e7999?fit=crop&w=746&h=498&q=80 746w"
sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
width="746" height="498" alt="" uk-img>
</div>
<div>
<img data-src="https://images.unsplash.com/photo-1449247526693-aa049327be54?fit=crop&w=373&h=249&q=80"
data-srcset="https://images.unsplash.com/photo-1449247526693-aa049327be54?fit=crop&w=373&h=249&q=80 373w,
https://images.unsplash.com/photo-1449247526693-aa049327be54?fit=crop&w=746&h=498&q=80 746w"
sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
width="746" height="498" alt="" uk-img>
</div>
<div>
<img data-src="https://images.unsplash.com/photo-1522205419828-f5b336fc3931?fit=crop&w=373&h=249&q=80"
data-srcset="https://images.unsplash.com/photo-1522205419828-f5b336fc3931?fit=crop&w=373&h=249&q=80 373w,
https://images.unsplash.com/photo-1522205419828-f5b336fc3931?fit=crop&w=746&h=498&q=80 746w"
sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
width="746" height="498" alt="" uk-img>
</div>
<div>
<img data-src="https://images.unsplash.com/photo-1522204538344-922f76ecc041?fit=crop&w=373&h=249&q=80"
data-srcset="https://images.unsplash.com/photo-1522204538344-922f76ecc041?fit=crop&w=373&h=249&q=80 373w,
https://images.unsplash.com/photo-1522204538344-922f76ecc041?fit=crop&w=746&h=498&q=80 746w"
sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
width="746" height="498" alt="" uk-img>
</div>
<div>
<img data-src="https://images.unsplash.com/photo-1491947153227-33d59da6c448?fit=crop&w=373&h=249&q=80"
data-srcset="https://images.unsplash.com/photo-1491947153227-33d59da6c448?fit=crop&w=373&h=249&q=80 373w,
https://images.unsplash.com/photo-1491947153227-33d59da6c448?fit=crop&w=746&h=498&q=80 746w"
sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
width="746" height="498" alt="" uk-img>
</div>
<div>
<img data-src="https://images.unsplash.com/photo-1515378960530-7c0da6231fb1?fit=crop&w=373&h=249&q=80"
data-srcset="https://images.unsplash.com/photo-1515378960530-7c0da6231fb1?fit=crop&w=373&h=249&q=80 373w,
https://images.unsplash.com/photo-1515378960530-7c0da6231fb1?fit=crop&w=746&h=498&q=80 746w"
sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
width="746" height="498" alt="" uk-img>
</div>
<div>
<img data-src="https://images.unsplash.com/photo-1502021680532-838cfc650323?fit=crop&w=373&h=249&q=80"
data-srcset="https://images.unsplash.com/photo-1502021680532-838cfc650323?fit=crop&w=373&h=249&q=80 373w,
https://images.unsplash.com/photo-1502021680532-838cfc650323?fit=crop&w=746&h=498&q=80 746w"
sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
width="746" height="498" alt="" uk-img>
</div>
<div>
<img data-src="https://images.unsplash.com/photo-1508138221679-760a23a2285b?fit=crop&w=373&h=249&q=80"
data-srcset="https://images.unsplash.com/photo-1508138221679-760a23a2285b?fit=crop&w=373&h=249&q=80 373w,
https://images.unsplash.com/photo-1508138221679-760a23a2285b?fit=crop&w=746&h=498&q=80 746w"
sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
width="746" height="498" alt="" uk-img>
</div>
<div>
<img data-src="https://images.unsplash.com/photo-1487611459768-bd414656ea10?fit=crop&w=373&h=249&q=80"
data-srcset="https://images.unsplash.com/photo-1487611459768-bd414656ea10?fit=crop&w=373&h=249&q=80 373w,
https://images.unsplash.com/photo-1487611459768-bd414656ea10?fit=crop&w=746&h=498&q=80 746w"
sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
width="746" height="498" alt="" uk-img>
</div>
<div>
<img data-src="https://images.unsplash.com/photo-1501854140801-50d01698950b?fit=crop&w=373&h=249&q=80"
data-srcset="https://images.unsplash.com/photo-1501854140801-50d01698950b?fit=crop&w=373&h=249&q=80 373w,
https://images.unsplash.com/photo-1501854140801-50d01698950b?fit=crop&w=746&h=498&q=80 746w"
sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
width="746" height="498" alt="" uk-img>
</div>
<div>
<img data-src="https://images.unsplash.com/photo-1455612693675-112974d4880b?fit=crop&w=373&h=249&q=80"
data-srcset="https://images.unsplash.com/photo-1455612693675-112974d4880b?fit=crop&w=373&h=249&q=80 373w,
https://images.unsplash.com/photo-1455612693675-112974d4880b?fit=crop&w=746&h=498&q=80 746w"
sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
width="746" height="498" alt="" uk-img>
</div>
<div>
<img data-src="https://images.unsplash.com/photo-1515853327920-2567e0b122f7?fit=crop&w=373&h=249&q=80"
data-srcset="https://images.unsplash.com/photo-1515853327920-2567e0b122f7?fit=crop&w=373&h=249&q=80 373w,
https://images.unsplash.com/photo-1515853327920-2567e0b122f7?fit=crop&w=746&h=498&q=80 746w"
sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
width="746" height="498" alt="" uk-img>
</div>
<div>
<img data-src="https://images.unsplash.com/photo-1500393734221-584dd6dbf92a?fit=crop&w=373&h=249&q=80"
data-srcset="https://images.unsplash.com/photo-1500393734221-584dd6dbf92a?fit=crop&w=373&h=249&q=80 373w,
https://images.unsplash.com/photo-1500393734221-584dd6dbf92a?fit=crop&w=746&h=498&q=80 746w"
sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
width="746" height="498" alt="" uk-img>
</div>
<div>
<img data-src="https://images.unsplash.com/photo-1506084868230-bb9d95c24759?fit=crop&w=373&h=249&q=80"
data-srcset="https://images.unsplash.com/photo-1506084868230-bb9d95c24759?fit=crop&w=373&h=249&q=80 373w,
https://images.unsplash.com/photo-1506084868230-bb9d95c24759?fit=crop&w=746&h=498&q=80 746w"
sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
width="746" height="498" alt="" uk-img>
</div>
<div>
<img data-src="https://images.unsplash.com/photo-1501254667263-b4867b4f7482?fit=crop&w=373&h=249&q=80"
data-srcset="https://images.unsplash.com/photo-1501254667263-b4867b4f7482?fit=crop&w=373&h=249&q=80 373w,
https://images.unsplash.com/photo-1501254667263-b4867b4f7482?fit=crop&w=746&h=498&q=80 746w"
sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
width="746" height="498" alt="" uk-img>
</div>
<div>
<img data-src="https://images.unsplash.com/photo-1478024646077-8a9b56e5319c?fit=crop&w=373&h=249&q=80"
data-srcset="https://images.unsplash.com/photo-1478024646077-8a9b56e5319c?fit=crop&w=373&h=249&q=80 373w,
https://images.unsplash.com/photo-1478024646077-8a9b56e5319c?fit=crop&w=746&h=498&q=80 746w"
sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
width="746" height="498" alt="" uk-img>
</div>
<div>
<img data-src="https://images.unsplash.com/photo-1500964757637-c85e8a162699?fit=crop&w=373&h=249&q=80"
data-srcset="https://images.unsplash.com/photo-1500964757637-c85e8a162699?fit=crop&w=373&h=249&q=80 373w,
https://images.unsplash.com/photo-1500964757637-c85e8a162699?fit=crop&w=746&h=498&q=80 746w"
sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
width="746" height="498" alt="" uk-img>
</div>
<div>
<img data-src="https://images.unsplash.com/photo-1488190211105-8b0e65b80b4e?fit=crop&w=373&h=249&q=80"
data-srcset="https://images.unsplash.com/photo-1488190211105-8b0e65b80b4e?fit=crop&w=373&h=249&q=80 373w,
https://images.unsplash.com/photo-1488190211105-8b0e65b80b4e?fit=crop&w=746&h=498&q=80 746w"
sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
width="746" height="498" alt="" uk-img>
</div>
<div>
<img data-src="https://images.unsplash.com/photo-1481386642130-4a31ef3bf00d?fit=crop&w=373&h=249&q=80"
data-srcset="https://images.unsplash.com/photo-1481386642130-4a31ef3bf00d?fit=crop&w=373&h=249&q=80 373w,
https://images.unsplash.com/photo-1481386642130-4a31ef3bf00d?fit=crop&w=746&h=498&q=80 746w"
sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
width="746" height="498" alt="" uk-img>
</div>
<div>
<img data-src="https://images.unsplash.com/photo-1491895200222-0fc4a4c35e18?fit=crop&w=373&h=249&q=80"
data-srcset="https://images.unsplash.com/photo-1491895200222-0fc4a4c35e18?fit=crop&w=373&h=249&q=80 373w,
https://images.unsplash.com/photo-1491895200222-0fc4a4c35e18?fit=crop&w=746&h=498&q=80 746w"
sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
width="746" height="498" alt="" uk-img>
</div>
<div>
<img data-src="https://images.unsplash.com/photo-1448375240586-882707db888b?fit=crop&w=373&h=249&q=80"
data-srcset="https://images.unsplash.com/photo-1448375240586-882707db888b?fit=crop&w=373&h=249&q=80 373w,
https://images.unsplash.com/photo-1448375240586-882707db888b?fit=crop&w=746&h=498&q=80 746w"
sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
width="746" height="498" alt="" uk-img>
</div>
<div>
<img data-src="https://images.unsplash.com/photo-1508971344143-29b17efc1689?fit=crop&w=373&h=249&q=80"
data-srcset="https://images.unsplash.com/photo-1508971344143-29b17efc1689?fit=crop&w=373&h=249&q=80 373w,
https://images.unsplash.com/photo-1508971344143-29b17efc1689?fit=crop&w=746&h=498&q=80 746w"
sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
width="746" height="498" alt="" uk-img>
</div>
</div>
<div class="uk-child-width-1-2@m" uk-grid>
<div>
<div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slideshow="ratio: 3:2; autoplay: false">
<div class="uk-slideshow-items">
<div>
<img data-src="images/photo.jpg" alt="" uk-cover uk-img="target: !.uk-slideshow-items > :last-child, !* +*">
<div class="uk-position-center uk-position-small uk-text-center">
<h2 uk-slideshow-parallax="x: 100,-100">Heading</h2>
<p uk-slideshow-parallax="x: 200,-200">Lorem ipsum dolor sit amet.</p>
</div>
</div>
<div>
<img data-src="images/dark.jpg" alt="" uk-cover uk-img="target: !* -*, !* +*">
<div class="uk-position-center uk-position-small uk-text-center">
<h2 uk-slideshow-parallax="x: 100,-100">Heading</h2>
<p uk-slideshow-parallax="x: 200,-200">Lorem ipsum dolor sit amet.</p>
</div>
</div>
<div>
<img data-src="images/light.jpg" alt="" uk-cover uk-img="target: !* -*, !* +*">
<div class="uk-position-center uk-position-small uk-text-center">
<h2 uk-slideshow-parallax="y: -50,0,0; opacity: 1,1,0">Heading</h2>
<p uk-slideshow-parallax="y: 50,0,0; opacity: 1,1,0">Lorem ipsum dolor sit amet.</p>
</div>
</div>
<div>
<img data-src="images/photo2.jpg" alt="" uk-cover uk-img="target: !* -*, !.uk-slideshow-items > :first-child">
<div class="uk-position-center uk-position-small uk-text-center">
<h2 uk-slideshow-parallax="x: 200,0,0">Heading</h2>
<p uk-slideshow-parallax="x: 0,0,-200">Lorem ipsum dolor sit amet.</p>
</div>
</div>
</div>
<a class="uk-position-center-left uk-position-small uk-hidden-hover" href uk-slidenav-previous uk-slideshow-item="previous"></a>
<a class="uk-position-center-right uk-position-small uk-hidden-hover" href uk-slidenav-next uk-slideshow-item="next"></a>
</div>
</div>
<div>
<div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slider="clsActivated: uk-transition-active">
<div class="uk-slider-items uk-child-width-1-2@s uk-child-width-1-3@m">
<div>
<img data-src="images/slider1.jpg" width="400" height="600" alt="" uk-img="target: !.uk-slider-items">
<div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">1</h1></div>
</div>
<div>
<img data-src="images/slider2.jpg" width="400" height="600" alt="" uk-img="target: !.uk-slider-items">
<div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">2</h1></div>
</div>
<div>
<img data-src="images/slider3.jpg" width="400" height="600" alt="" uk-img="target: !.uk-slider-items">
<div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">3</h1></div>
</div>
<div>
<img data-src="images/slider4.jpg" width="400" height="600" alt="" uk-img="target: !.uk-slider-items">
<div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">4</h1></div>
</div>
<div>
<img data-src="images/slider5.jpg" width="400" height="600" alt="" uk-img="target: !.uk-slider-items">
<div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">5</h1></div>
</div>
<div>
<img data-src="images/slider1.jpg" width="400" height="600" alt="" uk-img="target: !.uk-slider-items">
<div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">6</h1></div>
</div>
<div>
<img data-src="images/slider2.jpg" width="400" height="600" alt="" uk-img="target: !.uk-slider-items">
<div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">7</h1></div>
</div>
<div>
<img data-src="images/slider3.jpg" width="400" height="600" alt="" uk-img="target: !.uk-slider-items">
<div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">8</h1></div>
</div>
<div>
<img data-src="images/slider4.jpg" width="400" height="600" alt="" uk-img="target: !.uk-slider-items">
<div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">9</h1></div>
</div>
<div>
<img data-src="images/slider5.jpg" width="400" height="600" alt="" uk-img="target: !.uk-slider-items">
<div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">10</h1></div>
</div>
</div>
<a class="uk-position-center-left uk-position-small uk-hidden-hover" href uk-slidenav-previous uk-slider-item="previous"></a>
<a class="uk-position-center-right uk-position-small uk-hidden-hover" href uk-slidenav-next uk-slider-item="next"></a>
</div>
</div>
</div>
<h2>JavaScript Options</h2>
<div class="uk-overflow-auto">
<table class="uk-table uk-table-striped">
<thead>
<tr>
<th>Option</th>
<th>Value</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>dataSrc</code></td>
<td>String</td>
<td></td>
<td>The image's `src` attribute.</td>
</tr>
<tr>
<td><code>sources</code></td>
<td>String</td>
<td></td>
<td>The image's sources. This option is used for background images only. The sources attributes be passed in `key: value;` format for a single source. For multiple sources in JSON format.</td>
</tr>
<tr>
<td><code>loading</code></td>
<td>String</td>
<td>lazy</td>
<td>Enable lazy/eager loading. Set to `eager` for images within the first visible viewport.</td>
</tr>
<tr>
<td><code>margin</code></td>
<td>String</td>
<td>50%</td>
<td>The margin increases the viewport's bounding box, before computing an intersection with the image. (Must be px or % units)</td>
</tr>
<tr>
<td><code>target</code></td>
<td>Boolean, String</td>
<td>false</td>
<td>A list of targets who's bounding boxes will be used to compute an intersection with the image. (Defaults to the image itself)</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>