Archive | slider

RSS feed for this section

Simple Swipe With Vanilla JavaScript

I used to think implementing swipe gestures had to be very difficult, but I have recently found myself in a situation where I had to do it and discovered the reality is nowhere near as gloomy as I had imagined.

This article is going to take you, step by step, through the implementation with the least amount of code I could come up with. So, let’s jump right into it!

The HTML Structure

We start off with a .container that …

The post Simple Swipe With Vanilla JavaScript appeared first on CSS-Tricks.

9 Best Testimonial Plugins for WordPress

Are you looking for the best testimonial plugins for your WordPress site? Testimonials add social proof to your website and help build trust among your users. In this article, we have hand-picked the best WordPress testimonial plugins that you can use on your website. 1.… Read More »

The post 9 Best Testimonial Plugins for WordPress appeared first on WPBeginner.

Using Conic Gradients and CSS Variables to Create a Doughnut Chart Output for a Range Input

I recently came across this Pen and my first thought was that it could all be done with just three elements: a wrapper, a range input and an output. On the CSS side, this involves using a conic-gradient() with a stop set to a CSS variable.

The result we want to reproduce.

In mid 2015, Lea Verou unveiled a polyfill for conic-gradient() during a conference talk where she demoed how they can be used for creating pie charts. This …


Using Conic Gradients and CSS Variables to Create a Doughnut Chart Output for a Range Input is a post from CSS-Tricks

Using Conic Gradients and CSS Variables to Create a Doughnut Chart Output for a Range Input

I recently came across this Pen and my first thought was that it could all be done with just three elements: a wrapper, a range input and an output. On the CSS side, this involves using a conic-gradient() with a stop set to a CSS variable.

The result we want to reproduce.

In mid 2015, Lea Verou unveiled a polyfill for conic-gradient() during a conference talk where she demoed how they can be used for creating pie charts. This …


Using Conic Gradients and CSS Variables to Create a Doughnut Chart Output for a Range Input is a post from CSS-Tricks

You can get pretty far in making a slider with just HTML and CSS

A “slider”, as in, a bunch of boxes set in a row that you can navigate between. You know what a slider is. There are loads of features you may want in a slider. Just as one example, you might want the slider to be swiped or scrolled. Or, you might not want that, and to have the slider only respond to click or tappable buttons that navigate to slides. Or you might want both. Or you might want to …


You can get pretty far in making a slider with just HTML and CSS is a post from CSS-Tricks