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

Example of how to enable Slow query in MySQL

A method of making carousel images with CSS3

Example of how to enable Slow query in MySQL

In-depth analysis of the Identifier Case Sensitivity problem in MySQL

Understanding Nginx Current Limitation in One Article (Simple Implementation)

How to check where the metadata lock is blocked in MySQL

Teach you how to use AWS server resources for free

Vue2.x responsiveness simple explanation and examples

jQuery achieves seamless scrolling of tables

Running PostgreSQL in Docker and recommending several connection tools

CSS realizes process navigation effect (three methods)

MySQL 8.0.23 Major Updates (New Features)

Recommend

VSCode+CMake+Clang+GCC environment construction tutorial under win10

Detailed process of installing nginx1.9.1 on centos8

Winows Server 2019 Activation Code & Volume License Edition KMS Installation Key GVLK

React's context and props explained

A brief discussion on the issue of element dragging and sorting in table

Markup Language - Print Style Sheets

Detailed code for adding electron to the vue project

Detailed explanation of redis persistence, master-slave synchronization and sentinel under Linux

Specific use of lazy loading and preloading in js

Pure CSS to achieve input box placeholder animation and input verification

The front end creates and modifies CAD graphics details through JavaScript

Analysis of the difference between HTML relative path and absolute path

A brief discussion on the perfect adaptation solution for Vue mobile terminal

Remote development with VSCode and SSH

Detailed explanation of the parsererror error case in JavaScript solution in ajax