Select Page

Category: slider

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 has a bunch of images inside: ... Basic Styles We use display: flex to make sure images go alongside each other with no spaces in between. align-items: center middle aligns them vertically. We make both the images and the container take the width of the container’s parent (the body in our case). .container { display: flex; align-items: center; width: 100%; img { min-width: 100%; /* needed so Firefox doesn't make img shrink to fit */ width: 100%; /* can't take this out either as it breaks Chrome */ } } The fact that both the .container and its child images have the same width makes these images spill out on the right side (as highlighted by the red outline) creating a horizontal scrollbar, but this is precisely what we want: The initial layout (see live demo). Given that not all the images have the same dimensions and aspect ratio,...

Read More

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 polyfill is great for getting started to play with conic-gradient(), as it allows us to use them to build stuff...

Read More

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 combine all that with autoplay. I’m gonna go ahead and say that sliders are complicated enough of a UI...

Read More
www.000webhost.com