A method of making carousel images with CSS3

A method of making carousel images with CSS3

Slideshows are often seen on web pages. They have beautiful pictures. Here is a pure CSS3 slideshow.

Here is the style part:

You can understand these lines, right?

<style>
    *{margin:0;padding:0;}
    a{text-decoration:none}
    li{list-style:none;}

The design width should not exceed the total width of the carousel images plus the width of the first image (the width of the first image is added to make the carousel effect visible). Mine is 1500 width and 200 height, and then set overflow to hide (eliminate the display area that is still displayed when moved out of the display area)

 #box{width:1500px;height:200px;margin:0 auto;overflow:hidden;}

1000% is a lazy way of writing. It is used to set the width of ul wider. It looks exaggerated because it needs to be at least twice the width of the total image. Why should it be twice the width of less than one image? Because the image is moving to the left (the direction is set by yourself). If it is moved out, there will be no carousel effect without additional images.

1000% is long enough, so there is no need to calculate the total width of the picture. Of course, if there are enough pictures, you don’t have to set it this way. Just set half of the total width plus the width of less than one picture. The name of the animation to be rotated, and how often it is rotated

 #box ul{height:200px;width:1000%;animation:animal 4s linear infinite;}

Set the float to display all images in one line and the width of the images

 #box ul li{float:left;width:133px;height:200px;}

Set mouse over pause

#box:hover ul{animation-play-state:paused;}

Set the animation name and the direction of the carousel (animation effect)

    @keyframes animal {
        0%{margin-left:0;}
        100%{margin-left:-1463px;}
    }
</style>

Below is the body part

The slideshow is usually clickable, so it is placed in the a tag.

<body>
<div id="box">
<ul>
    <li><a href="#"><img src="images/1.jpg" /></a></li>
    <li><a href="#"><img src="images/2.jpg" /></a></li>
    <li><a href="#"><img src="images/3.jpg" /></a></li>
    <li><a href="#"><img src="images/4.jpg" /></a></li>
    <li><a href="#"><img src="images/5.jpg" /></a></li>
    <li><a href="#"><img src="images/6.jpg" /></a></li>
    <li><a href="#"><img src="images/7.jpg" /></a></li>
    <li><a href="#"><img src="images/8.jpg" /></a></li>
    <li><a href="#"><img src="images/9.jpg" /></a></li>
    <li><a href="#"><img src="images/10.jpg" /></a></li>
    <li><a href="#"><img src="images/11.jpg" /></a></li>
    <li><a href="#"><img src="images/1.jpg" /></a></li>
    <li><a href="#"><img src="images/2.jpg" /></a></li>
    <li><a href="#"><img src="images/3.jpg" /></a></li>
    <li><a href="#"><img src="images/4.jpg" /></a></li>
    <li><a href="#"><img src="images/5.jpg" /></a></li>
    <li><a href="#"><img src="images/6.jpg" /></a></li>
    <li><a href="#"><img src="images/7.jpg" /></a></li>
    <li><a href="#"><img src="images/8.jpg" /></a></li>
    <li><a href="#"><img src="images/9.jpg" /></a></li>
    <li><a href="#"><img src="images/10.jpg" /></a></li>
    <li><a href="#"><img src="images/11.jpg" /></a></li>
    <li><a href="#"><img src="images/1.jpg" /></a></li>
</ul>
</div>
</body>

There is more than one way to implement a carousel. I will share it with you next time!

<<:  MySQL query optimization using custom variables

>>:  How to restore docker container data

Recommend

JavaScript to achieve progress bar effect

This article example shares the specific code of ...

JavaScript selector functions querySelector and querySelectorAll

Table of contents 1. querySelector queries a sing...

A brief discussion on the comparison of varchar, char and text in postgresql database

As shown below: name describe character varying(n...

Detailed explanation of MySQL view management view example [add, delete, modify and query operations]

This article uses an example to describe the mana...

Sample code for using CSS to write a textured gradient background image

The page length in the project is about 2000px or...

How to deploy k8s in docker

K8s k8s is a cluster. There are multiple Namespac...

JS realizes the card dealing animation

This article example shares the specific code of ...

Steps to install MySQL using Docker under Linux

As a tester, you may often need to install some s...

How to set the width attribute to the style of the span tag

If you directly set the width attribute to the sty...

Absolute path URL and relative path URL in html and subdirectory, parent directory, root directory

An absolute URL is used to represent all the conte...

What is dns-prefetch? Front-end optimization: DNS pre-resolution improves page speed

Table of contents Background 1. What is dns-prefe...

Detailed explanation of the difference and usage of quotes and backticks in MySQL

Preface So I wrote this blog. This blog also reco...

Linux general java program startup script code example

Although the frequency of starting the shell is v...

Detailed explanation of Vue3.0 + TypeScript + Vite first experience

Table of contents Project Creation Project Struct...

IE8 Beta 1 has two areas that require your attention

<br />Related articles: Web skills: Multiple...