Deprecated Content

Our News & Blog has been around since 2009. Some older articles may be formatted for styles and layouts that have since become deprecated. I've left them up, rather than removing all the old articles. Please excuse the broken links and feel free to comment or email if you're unable to view any of our old articles.

January 12, 2018

Slides, Sans jQuery

New Slider, Slideset & Slideshow Elements

The new Slider component allows you to display multiple content items at once. You can slide through the row of items, smoothly revealing new ones. The Slider was written from scratch, sharing its code base with the Slideshow component. Thanks to this modularity the UIkit JavaScript only got 2KB bigger (gzipped) in file size including the Slider component and all other improvements. We think that's really great! And remember, all this works without jQuery dependency!

It's fully customizable, responsive, and supports swipe and touch navigation as well as mouse drag. Other Slider features include center mode and infinite scrolling. When clicking through the items, the Slider keeps up with your pace, so that no click or swipe is lost. Meanwhile, hardware accelerated animations ensure smooth transitions. You can apply the Grid component to add gutter and use different classes from the Width component to define the size of all items and build the Slider you want. If no width classes are used, each item's width depends on the dimensions of the content itself. Of course, you can also create a Slider that extends to full viewport height. Both the Slideshow and the Slider are able to generate their dotnavs automatically when there is no item specific content in the navigation items. The dotnav of the Slider even recalculates the number of hidden items depending on the Slider's width. By the way, the Slider and the Slideshow now also have RTL support, so both adapt perfectly to websites using right-to-left languages.

Video Component

Apart from the Slider, the uk-video attribute was improved as well. Now videos play and pause when they enter or leave the viewport. Since it's recommended to use videos instead of animated gifs due to their smaller file size, we can now deprecate the uk-gif attribute, which does the same as the video attribute but for gifs.

Scrolling through Sets of Items

The new Slider combines the functionality of the Slider and the Slideset that you know from UIkit 2. You can now choose if you want to loop through single items or sets of visible items. The number of dots in the navigation will also adapt automatically depending on how many items are visible on the specific viewport. The Slider now offers the Slideset functionality, the only difference is that the Slideset offers different animations. For this reason, we have decided not to implement a Slideset component into the UIkit 3 stable release. This puts into question whether a new Slideset is even necessary. What do you think?

  • Views: 946

Tweets @themicrotechs

@themicrotechs

@themicrotechs

We’ve got 2020 Vision! Email us with our secret code “VISION” and all our January contracts receive an additional surprise bonus % off #webdesign #webdeveloper #WordPress #joomla #marketing #socialmediamarketing #advertising
@themicrotechs

@themicrotechs

Let’s talk solutions. Contact us about custom web development, design and marketing services themicrotechs.org/index.php/comp… #webdesign #webdevelopment #joomla #WordPress #uiux #ecommerce #shopify #SEO #TuesdayThoughts #tuesdayvibes
@themicrotechs

@themicrotechs

We’re headed to #LasVegas and bringing some of our Silicon Valley tech to the great state of Nevada. I wonder how many small businesses are powered by #wordpress or #joomla in Vegas alone?
@themicrotechs

@themicrotechs

We aim for the high 80’s, but 99 is a score we’re totally satisfied with. Learn more about premium hosting services on our website tinyurl.com/y4n54rbr #optimized #cdn #Cloudflare #WordPress #Joomla #Webdesigner #pagespeed #Google

On Instagram @themicrotechs

The Microtechs, LLC

The Microtechs, LLC

We’re excited for the New Year and hope you all had a wonderful holiday vacation! Here’s to a bright and busy 2020 #development #webdesign #wordpress #joomla #cms #marketing #advertising #seo #ppc #socialmediamarketing #bayarea #sanfranciscobay
The Microtechs, LLC

The Microtechs, LLC

The San Francisco Bay Area’s leading Developer & Online Marketing service since 2008 is looking for local talent. Photographers, DIY video makers and social media talent: Flex your stats and DM us for details. Photo credit to Razaul Karim 🥇 #instagramers #diy #photographers #youtuber
The Microtechs, LLC

The Microtechs, LLC

Microsites are perfect for marketing small businesses and targeted campaigns. Scrolling single-page or 1–3 page responsive sites custom designed for maximum ROI, acquisition and user focused messaging are perfect promotional tools that drive traffic and get results https://tinyurl.com/microtechsmicrosites
The Microtechs, LLC

The Microtechs, LLC

Simple. Powerful. Custom Web Solutions and Online Marketing since 2008. https://themicrotechs.org
"this is how I always envisioned our website. fantastic job!"

Dave Shapiro, CEO, Cartelligent
Oakland Athletics Logo
Read about the custom system we developed for The Oakland Athletics

CMS Web Design

Custom Joomla & Wordpress
Since 2008
The Microtechs, LLC P.O. Box 13 Antioch, CA 94509
SF Bay Area Web Designer & Developer Since 2008
© 2008-2019 The Microtechs, LLC