How to use JSX to implement Carousel components (front-end componentization)

Before we use JSX to build a component system, let's use an example to learn the implementation principle and logic of the component. Here we will use a carousel component as an example for learning. The English name of the carousel is Carousel, which means a carousel .

The code we implemented in the previous article "Using JSX to Establish Markup Component Style" cannot actually be called a component system. At most, it can serve as a simple encapsulation of DOM, allowing us to customize DOM.

To make this carousel component, we should start with the simplest DOM operation. Use DOM operations to implement the entire carousel function first, and then consider how to design it into a component system step by step.

TIPS : When we start developing a component, we often overthink how a function should be designed, and then implement it in a very complicated way. In fact, a better way is to do the opposite: implement the function first, and then design a component architecture system by analyzing this function.

Because it is a carousel, we of course need to use pictures, so here I have prepared 4 open source pictures from Unsplash. Of course, you can also replace them with your own pictures. First, we put these four pictures into a gallery variable:

let gallery = [
 'https://source.unsplash.com/Y8lCoTRgHPE/1142x640',
 'https://source.unsplash.com/v7daTKlZzaw/1142x640',
 'https://source.unsplash.com/DlkF4-dbCOU/1142x640',
 'https://source.unsplash.com/8SQ6xjkxkCo/1142x640',
];

Our goal is to make these 4 pictures rotate.

Component bottom layer encapsulation

First, we need to encapsulate the code we wrote before so that we can start writing this component.

• Create framework.js in the root directory
• Move createElement , ElementWrapper and TextWrapper to our framework.js file
• Then the createElement method needs to be exported so that we can introduce this basic method of creating elements.
• ElementWrapper and TextWrapper do not need to be exported because they are used internally by createElement.
• Encapsulate the common parts of the Wrapper class
• ElementWrapper and TextWrapper have the same setAttribute , appendChild and mountTo , which are repeated and communal.
• So we can create a Component class and encapsulate these three methods into
• Then let ElementWrapper and TextWrapper inherit Component
• Component adds render() method
•      Add a constructor to the Component class

In this way, we have encapsulated the code of the underlying framework of our component. The code example is as follows:

function createElement(type, attributes, ...children) {
 // Create element let element;
 if (typeof type === 'string') {
 element = new ElementWrapper(type);
 } else {
 element = new type();
 }

 //Hang attributes for (let name in attributes) {
 element.setAttribute(name, attributes[name]);
 }
 //Hang all child elements for (let child of children) {
 if (typeof child === 'string') child = new TextWrapper(child);
 element.appendChild(child);
 }
 //Finally our element is a node// so we can return directly return element;
}

export class Component {
 constructor() {
 }
 // Mount the element's attributes setAttribute(name, attribute) {
 this.root.setAttribute(name, attribute);
 }
 // Mount element child element appendChild(child) {
 child.mountTo(this.root);
 }
 // Mount the current element mountTo(parent) {
 parent.appendChild(this.root);
 }
}

class ElementWrapper extends Component {
 // Constructor // Create DOM node constructor(type) {
 this.root = document.createElement(type);
 }
}

class TextWrapper extends Component {
 // Constructor // Create DOM node constructor(content) {
 this.root = document.createTextNode(content);
 }
}

Implementing Carousel

Next we will continue to transform our main.js First, we need to change Div to Carousel and let it inherit the Component parent class we wrote, so that we can omit the duplication of some methods.

After inheriting Component, we need to import our Component from framework.js .

Here we can officially start developing components, but it would be very troublesome if we need to manually package them with webpack every time. So in order to make it easier for us to debug the code, let's install webpack dev server here to solve this problem.

Execute the following code to install webpack-dev-server :

npm install --save-dev webpack-dev-server webpack-cli 

Seeing the above result, it proves that our installation is successful. We'd better configure the running folder of our webpack server. Here we use the packaged dist as our running directory.

To set this we need to open our webpack.config.js and add the devServer parameter, and give contentBase path to ./dist .

module.exports = {
 entry: './main.js',
 mode: 'development',
 devServer: {
 contentBase: './dist',
 },
 module: {
 rules:
 {
 test: /\.js$/,
 use: {
 loader: 'babel-loader',
 options:
 presets: ['@babel/preset-env'],
 plugins: [['@babel/plugin-transform-react-jsx', { pragma: 'createElement' }]],
 },
 },
 },
 ],
 },
};

Anyone who has used Vue or React knows that to start a local debugging environment server, you only need to execute the npm command. Here we also set a quick start command. Open our package.json and add a line "start": "webpack start" in scripts configuration.

{
 "name": "jsx-component",
 "version": "1.0.0",
 "description": "",
 "main": "index.js",
 "scripts": {
 "test": "echo \"Error: no test specified\" && exit 1",
 "start": "webpack serve"
 },
 "author": "",
 "license": "ISC",
 "devDependencies": {
 "@babel/core": "^7.12.3",
 "@babel/plugin-transform-react-jsx": "^7.12.5",
 "@babel/preset-env": "^7.12.1",
 "babel-loader": "^8.1.0",
 "webpack": "^5.4.0",
 "webpack-cli": "^4.2.0",
 "webpack-dev-server": "^3.11.0"
 },
 "dependencies": {}
}

In this way, we can directly execute the following command to start our local debugging server!

npm start 

After turning this on, when we modify any file, it will be monitored, so that the file will be packaged for us in real time, which is very convenient for us to debug. As shown in the figure above, our real-time local server address is http://localhost:8080 . We can access this project by opening this address directly in the browser.

One point to note here is that we changed the running directory to dist, because our previous main.html was placed in the root directory, so we can't find this HTML file on localhost:8080, so we need to move main.html to the dist directory and change the import path of main.js.

<!-- main.html code -->
<body></body>

<script src="./main.js"></script>

After opening the link, we found that the Carousel component has been mounted successfully, which proves that there is no problem with our code encapsulation.

Next, we will continue to implement our carousel function. First, we need to pass our image data into our Carousel component.

let a = <Carousel src={gallery}/>;

This way our gallery array will be set to our src attribute. But our src attribute is not used for our Carousel element itself. That is to say, we are not directly mounted to this.root as before.

So we need to store the data on this src separately and use it later to generate the image display elements of our carousel. In React, props are used to store element properties, but here we use attributes which is closer to the meaning of properties, to store them.

Because we need to store the incoming attributes in the this.attributes variable, we need to initialize this class attribute in constructor of the Component class.

Then we need to store these attributes in class properties instead of mounting them on element nodes. So we need to redefine our setAttribute method in the component class.

We need to get the value of the src attribute before the component is rendered, so we need to put the render trigger inside mountTo .

class Carousel extends Component {
 // Constructor // Create DOM node constructor() {
 super();
 this.attributes = Object.create(null);
 }
 setAttribute(name, value) {
 this.attributes[name] = value;
 }
 render() {
	console.log(this.attributes);
 return document.createElement('div');
 }
 mountTo() {
 parent.appendChild(this.render());
 }
}

Next, let's take a look at the actual running results to see if we can get the image data.

Next we will display these pictures. Here we need to modify the render method and add the logic of rendering the image here:

• First we need to store the newly created elements
• Loop through our image data and create an img element for each piece of data
• Attach src = image url to each img element
• Mount the image element with the src attribute to our component element this.root
• Finally, let the render method return this.root

class Carousel extends Component {
 // Constructor // Create DOM node constructor() {
 super();
 this.attributes = Object.create(null);
 }
 setAttribute(name, value) {
 this.attributes[name] = value;
 }
 render() {
 this.root = document.createElement('div');

 for (let picture of this.attributes.src) {
 let child = document.createElement('img');
 child.src = picture;
 this.root.appendChild(child);
 }

 return this.root;
 }
 mountTo(parent) {
 parent.appendChild(this.render());
 }
} 

In this way, we can see that our images are displayed correctly on our page.

Typography and animation

First of all, the elements of our images are all img tags, but if we use this tag, it can be dragged when we click and drag. Of course this can be solved, but in order to solve this problem more simply, we replace the img with a div and then use background-image.

By default, div has no width or height, so we need to add a class called carousel to the div layer of the component, then add a CSS style sheet to the HTML, directly select each div under carousel, and then give them appropriate styles.

// main.js
class Carousel extends Component {
 // Constructor // Create DOM node constructor() {
 super();
 this.attributes = Object.create(null);
 }
 setAttribute(name, value) {
 this.attributes[name] = value;
 }
 render() {
 this.root = document.createElement('div');
	this.root.addClassList('carousel'); // Add carousel class

 for (let picture of this.attributes.src) {
 let child = document.createElement('div');
 child.backgroundImage = `url('${picture}')`;
 this.root.appendChild(child);
 }

 return this.root;
 }
 mountTo(parent) {
 parent.appendChild(this.render());
 }
}

<!-- main.html -->
<head>
 <style>
 .carousel > div {
 width: 500px;
 height: 281px;
 background-size: contain;
 }
 </style>
</head>

<body></body>

<script src="./main.js"></script>

Here our width is 500px, but if we set a height of 300px, we will find that the image is repeated at the bottom of the image. This is because the ratio of the image is 1600 x 900 , and the 500 x 300 ratio is inconsistent with the original ratio of the image.

So through proportional calculation, we can get a height like this: 500 ÷ 1900 × 900 = 281. xxx 500\div1900\times900 = 281.xxx 500÷1900×900=281.xxx. So the height corresponding to 500px width is about 281px. In this way, our pictures can be displayed normally in a div.

It is obviously impossible for a carousel to display all the pictures. The carousels we know of display pictures one by one. First we need to make the carousel div elements outside the images have a box with the same width and height as them, and then we set overflow: hidden . This way the other images will extend beyond the box and thus be hidden.

Some students here may ask: "Why not change other pictures to display: hidden or opacity: 0?" Because when our carousel is rotating, you can actually see the current picture and the next picture. So if we use the hidden attribute such as display: hidden, it will be difficult to achieve the following effects.

Then we have another problem. Carousel images generally slide left and right, and rarely slide up and down. However, the images here are arranged from top to bottom by default. So here we need to adjust the layout of the pictures so that they are taken in a row.

Here we can use the normal flow, so we only need to add a display: inline-block to the div to make them line up in a row. However, with only this attribute, if the image exceeds the window width, it will automatically wrap, so we also need to add the attribute white-space: nowrap to their parent to force non-wrapping. And that's it.

<head>
 <style>
 .carousel {
 width: 500px;
 height: 281px;
 white-space: nowrap;
 overflow: hidden;
 }

 .carousel > div {
 width: 500px;
 height: 281px;
 background-size: contain;
 display: inline-block;
 }
 </style>
</head>

<body></body>

<script src="./main.js"></script>

Next, let's implement the automatic carousel effect. Before doing this, let's add some animation properties to these image elements. Here we use transition to control the duration of element animation. Generally speaking, we use 0.5 seconds of ease to play one frame.

Transition generally only uses the ease property, except in some very special cases, where ease-in is used for exit animations and ease-out is used for entry animations. On the same screen, we usually use ease by default, but we will never use linear in most cases. Because ease is the motion curve that best fits human senses.

<head>
 <style>
 .carousel {
 width: 500px;
 height: 281px;
 white-space: nowrap;
 overflow: hidden;
 }

 .carousel > div {
 width: 500px;
 height: 281px;
 background-size: contain;
 display: inline-block;
 transition: ease 0.5s;
 }
 </style>
</head>

<body></body>

<script src="./main.js"></script>

Implement automatic carousel

With the animation effect property, we can add our timer in JavaScript to switch our image every three seconds. We can solve this problem by using setInerval() function.

But how can we make the pictures rotate or move? When thinking about movement in HTML, have you ever thought about what attributes in CSS allow us to move elements?

That's right, use transform , which is specifically used to move elements in CSS. So our logic here is to move the element to the left by its own length every 3 seconds, so that we can move to the beginning of the next picture.

But this only moves one image, so if we need to move a second time, to get to the third image, we have to offset each image by 200%, and so on. So we need a value for the current page number, called current , with a default value of 0. Each time you move, add 1, so the offset value is − 100 × number of pages - 100\times number of pages − 100 × number of pages. In this way, we have completed the multiple movement of the pictures and displayed them one by one.

class Carousel extends Component {
 // Constructor // Create DOM node constructor() {
 super();
 this.attributes = Object.create(null);
 }
 setAttribute(name, value) {
 this.attributes[name] = value;
 }
 render() {
 this.root = document.createElement('div');
 this.root.classList.add('carousel');

 for (let picture of this.attributes.src) {
 let child = document.createElement('div');
 child.style.backgroundImage = `url('${picture}')`;
 this.root.appendChild(child);
 }

 let current = 0;
 setInterval(() => {
 let children = this.root.children;
 ++current;
 for (let child of children) {
 child.style.transform = `translateX(-${100 * current}%)`;
 }
 }, 3000);

 return this.root;
 }
 mountTo(parent) {
 parent.appendChild(this.render());
 }
}

We found a problem here. The carousel will not stop and keeps shifting to the left. And when we need to carousel to the last picture, we need to return to the previous picture.

To solve this problem, we can use a mathematical trick. If we want a number to keep cycling between 1 and N, we just need to make it modulo n . In our element, the length of children is 4, so when our current reaches 4, the remainder of 4 ÷ 4 4\div4 4÷4 is 0, so each time setting current to the remainder of current divided by the length of children can achieve an infinite loop.

Here the current will not exceed 4, and after reaching 4 it will return to 0.

Using this logic to implement our carousel can indeed make our images loop infinitely, but if we run it and take a look, we will find another problem. After we play the last picture, we will quickly slide to the first picture, and we will see a quick rewind effect. This is indeed not so good. What we want is that after reaching the last picture, the first picture is directly connected to the back.

Then let's try to solve this problem together. After observation, we can only see two pictures on the screen at a time. So actually we just need to move these two pictures to the correct position.

So we need to find the current picture we are seeing and the next picture, and then find the next picture every time we move to the next picture and move the next picture to the correct position.

You may still be a little confused at this point, but it doesn’t matter, let’s sort out the logic.

Get the index of the current image and the index of the next image

• First of all, the carousel must start from the first picture, and this picture must be the 0th in our node
• Because we need to prepare the second picture when we see one picture, so we need to find the location of the next picture
• According to what we said above, we can use mathematical techniques to get the position of the next picture: The position of the next picture = (current position + 1) ÷ the number of pictures The position of the next picture = (current position + 1)\div The number of pictures The position of the next picture = (current position + 1) ÷ the remainder of the number of pictures. According to this formula, when we reach the last picture, it will return to 0 and return to the position of the first picture.
  

Calculate the distance the image is moved, and keep an image behind the current image waiting to be moved

• The position of the currently displayed image is definitely correct, so we don't need to calculate it
• But the position of the next picture requires us to move it, so here we need to calculate the distance that this picture needs to be offset
• The distance each image moves one grid is equal to its own length, plus the negative number of moving to the left, so each grid moved to the left is -100%
• The index of the pictures is from 0 to n. If we use their index as the number of pictures away from the current picture, we can use index * -100% to move each picture to the position of the current picture.
• But what we need is to move the image to the next position of the current image first, so the next position is the image distance of index - 1, that is, the distance we need to move is (index - 1) * -100%
• We don’t need any animation effects for the second image to be in place, so we need to disable the animation effects of the image in this process. To do this, we need to clear the transition.
  

The second picture is in place, and you can start the carousel effect

• Because we need at least one frame of image movement time, a 16 millisecond delay is required before executing the carousel effect (because 16 milliseconds is exactly the time of one frame in the browser)
• First, turn on transition in the inline tag again, so that the animation in our CSS will work again, because the next carousel effect needs to have an animation effect
• The first step is to move the current image one step to the right. Previously we said that index * -100% is the formula for moving any image at index position to the current position. If we want to move one more position to the right, we can use (index + 1) * -100% .
• The second step is to move the next image to the current display position. This is done by directly using index * -100%.
• Finally, we need to update our record once, currentIndex = nextIndex , and we're done!

Next we translate the above logic into JavaScript:

class Carousel extends Component {
 // Constructor // Create DOM node constructor() {
 super();
 this.attributes = Object.create(null);
 }
 setAttribute(name, value) {
 this.attributes[name] = value;
 }
 render() {
 this.root = document.createElement('div');
 this.root.classList.add('carousel');

 for (let picture of this.attributes.src) {
 let child = document.createElement('div');
 child.style.backgroundImage = `url('${picture}')`;
 this.root.appendChild(child);
 }

 // Index of the current image
 let currentIndex = 0;
 setInterval(() => {
 let children = this.root.children;
 // Index of the next image
 let nextIndex = (currentIndex + 1) % children.length;

 // The node of the current image let current = children[currentIndex];
 // The node of the next picture let next = children[nextIndex]; 
	
 // Disable image animation next.style.transition = 'none'; 
 // Move the next image to the correct position next.style.transform = `translateX(${-100 * (nextIndex - 1)}%)`;
	
 // Execute the carousel effect, delaying one frame for 16 milliseconds setTimeout(() => {
 // Enable animation in CSS next.style.transition = ''; 
 // Move the current image away from the current position first current.style.transform = `translateX(${-100 * (currentIndex + 1)}%)`;
 // Move the next image to the currently displayed position next.style.transform = `translateX(${-100 * nextIndex}%)`;
		
 // Finally update the index of the current position
 currentIndex = nextIndex;
 }, 16);
 }, 3000);

 return this.root;
 }
 mountTo(parent) {
 parent.appendChild(this.render());
 }
}

If we remove overflow: hidden first, we can clearly see the movement trajectory of all the images:

Implement drag and drop carousel

Generally speaking, in addition to the automatic carousel function, our carousel component can also be dragged with our mouse to rotate. So let's implement this manual carousel function together.

Because there is a certain conflict between automatic carousel and manual carousel, we need to comment out the automatic carousel code we implemented earlier. Then we can use the children (child elements) under this carousel component, that is, the elements of all pictures, to implement our manual drag carousel function.

The drag function mainly involves our picture being dragged, so we need to add mouse listening events to the picture. If we think in terms of the operation steps, we can come up with a set of logic:

We definitely need to move the mouse over the picture first and then click on the picture. So the first event we need to monitor must be mousedown mouse press event. After clicking the mouse, we will start moving our mouse and let our image follow the direction of our mouse movement. At this time we need to listen to mousemove mouse movement event. After we drag the image to the position we want, we will release the mouse button. This is also the time when we need to calculate whether the image can be rotated. This requires us to listen for mouseup mouse release event.

this.root.addEventListener('mousedown', event => {
 console.log('mousedown');
});

this.root.addEventListener('mousemove', event => {
 console.log('mousemove');
});

this.root.addEventListener('mouseup', event => {
 console.log('mouseup');
});

After executing the above code, we will see in the console that when we put the mouse on the image and move it, we will continuously trigger mousemove . But the effect we want is mousemove will only be triggered when we hold down the mouse and move it. Simply moving the mouse on the image should not trigger the event.

Therefore, we need to put the mousemove and mouseup events in the callback function of the mousedown event, so that we can correctly monitor the move and release actions when the mouse is pressed. We also need to consider that when we mouseup, we need to stop the two listening events of mousemove and mouseup, so we need to use a function to store them separately.

this.root.addEventListener('mousedown', event => {
 console.log('mousedown');

 let move = event => {
 console.log('mousemove');
 };

 let up = event => {
 this.root.removeEventListener('mousemove', move);
 this.root.removeEventListener('mouseup', up);
 };

 this.root.addEventListener('mousemove', move);
 this.root.addEventListener('mouseup', up);
});

Here we remove the mousemove and mouseup events when mouseup. This is the basic code that we usually use when dragging.

But we will find another problem. After clicking, dragging and releasing the mouse, if we move the mouse on the image again, our mousemove event will still be triggered.

This is because our mousemove is monitored on root . In fact, our mousedown is already monitored on root , so there is no need to monitor mousemove and mouseup on root .

So we can listen to these two events directly on document . In modern browsers, using document listening has an additional benefit. We can still listen to events even if our mouse moves out of the browser window.

this.root.addEventListener('mousedown', event => {
 console.log('mousedown');

 let move = event => {
 console.log('mousemove');
 };

 let up = event => {
 document.removeEventListener('mousemove', move);
 document.removeEventListener('mouseup', up);
 };

 document.addEventListener('mousemove', move);
 document.addEventListener('mouseup', up);
});

With this complete monitoring mechanism, we can try to implement the movement function of the carousel in mousemove. Let's sort out the logic of this function:

To do this, we first need to know the position of the mouse. Here we can use event parameter in mousemove to capture the coordinates of the mouse. There are actually many mouse coordinates on event , such as offsetX , offsetY , etc. These are coordinates obtained based on different reference systems. Here we recommend using clientX and clientY These coordinates are relative to the renderable area of ​​the entire browser and are not affected by any factors. Many times our components are in the container of the browser, and when we scroll the page, some coordinate systems will change. This way we can easily have some irreconcilable bugs, but clientX and clientY will not have this problem. If we want to know how much our image should move in a certain direction, we need to know the starting coordinates when we click the mouse, and then compare them with the clientX and clientY we obtained. So we need to record a startX and startY , their default values ​​are the corresponding current clientX and clientY. So the distance our mouse moves is the end point coordinates − starting point coordinates end point coordinates − starting point coordinates end point coordinates − starting point coordinates, in our move callback function it is clientX - startX and clientY - startY Our carousel only supports left and right sliding, so in our scenario, the Y axis value is not needed. Then, after we calculate the moving distance, we can add transform to the corresponding dragged element, so that the image will be moved. When we did the automatic carousel before, we added transition animation to the image element. If we have this animation when dragging, there will be a delay effect. So when adding transform to the image, we also need to disable their transition attribute.

this.root.addEventListener('mousedown', event => {
 let children = this.root.children;
 let startX = event.clientX;

 let move = event => {
 let x = event.clientX - startX;
 for (let child of children) {
 child.style.transition = 'none';
 child.style.transform = `translateX(${x}px)`;
 }
 };

 let up = event => {
 document.removeEventListener('mousemove', move);
 document.removeEventListener('mouseup', up);
 };

 document.addEventListener('mousemove', move);
 document.addEventListener('mouseup', up);
});

Well, here we found two problems:

The first time we click and drag, the image's starting position is correct, but when we click again, the image's position is wrong. After we drag the picture, when we release the mouse button, the picture will stay at the position where the dragging ends. However, in a normal carousel component, if we drag the picture beyond a certain position, it will automatically rotate to the next picture.

To solve these two problems, we can calculate like this, because what we are making is a carousel component. According to the general carousel components now, when we drag the image to a position larger than half of the image, it will rotate to the next image. If it is less than half of the position, it will return to the position of the currently dragged image.

According to such a requirement, we need to record a position , which records the current image (starting from 0). If each of our pictures is 500px wide, then the current of the first picture is 0, the offset distance is 0 * 500 = 0, the second picture is 1 * 500 px, the third picture is 2 * 500px, and so on. According to this rule, the offset position of the Nth image is n ∗ 500 n * 500 n∗500.

First, when we mousemove, we need to calculate how far the current image has moved from the starting point. This can be calculated by N * 500, where N is position value of the current image. Then we also need to calculate whether the distance moved by the current image exceeds the length of half the image when mouseup. If it exceeds, we directly transform to the starting point of the next image. The excess judgment here can be used by dividing the distance x moved by the current mouse by長度of each of our images (our component controls the image to be 500px, so we divide x by 500), so that we will get a number between 0 and 1. If this number is equal to or greater than 0.5, then it means that the image is halfway through its length, and you can directly rotate to the next image. If it is less than 0.5, you can move back to the starting position of the current image. The value calculated above can also be combined with our position . If it is greater than or equal to 0.5, it can be rounded to 1, otherwise it is 0. The 1 here means that we can add position to 1, if it is 0 then position will not change. This will directly change the current value, and when transforming, it will automatically calculate according to the new current value, and the carousel effect will be achieved. Because x is the distance that can be moved left and right, that is to say, if we move the mouse to the left, x will be a negative number, and vice versa. Dragging the mouse to the left will move forward, and dragging it to the right will move backward. So when calculating this超出值here, position = position - Math.round(x/500) . For example, if we move the mouse 400px to the left and the current value is 0, then position = 0 - Math.round(400/500) = 0 - -1 = 0 + 1 = 1 , so our current finally becomes 1 . According to the above logic, we need to loop all the child images in the carousel in the mouseup event and set a new transform value for them.

this.root.addEventListener('mousedown', event => {
 let children = this.root.children;
 let startX = event.clientX;

 let move = event => {
 let x = event.clientX - startX;
 for (let child of children) {
 child.style.transition = 'none';
 child.style.transform = `translateX(${x - current * 500}px)`;
 }
 };

 let up = event => {
 let x = event.clientX - startX;
 current = current - Math.round(x / 500);
 for (let child of children) {
 child.style.transition = '';
 child.style.transform = `translateX(${-current * 500}px)`;
 }
 document.removeEventListener('mousemove', move);
 document.removeEventListener('mouseup', up);
 };

 document.addEventListener('mousemove', move);
 document.addEventListener('mouseup', up);
});

Note that we use 500 as the length of the image here. That's because the image component we wrote ourselves has its image fixed to 500px wide. If we need to make a general carousel component, it's best to get the actual width of the element, Element.clientWith() . In this way, our components can change with the users.

Having done this, we can use drag to rotate our pictures, but when we drag to the last picture, we will find that there is a blank space after the last picture, and the first picture is not connected to the last one.

Then we will improve this function. This is actually very similar to our automatic carousel. When we were doing the automatic carousel, we knew that each time we carouseled pictures, we could only see two pictures at most. The probability of seeing three pictures was very small because the width of our carousel was very small relative to our page. This problem would not occur unless the user had enough space to drag to the second picture. But we will not consider this factor here.

We are sure that we will only see two pictures each time we drag, so we can also handle the drag carousel like the automatic carousel. But there is one difference here. When we automatically rotate the pictures, the pictures will only move in one direction, either left or right. But we can manually drag it to the left or right, and the picture can go in any direction. Therefore, we can't directly use the automatic carousel code to implement this function. We need to reprocess the logic of the infinite loop at the beginning and end of the carousel ourselves.

position + Math.round(x/500) current : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : :前一個元素: :下一個元素[-1, 0, 1]當前元素: : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : -1圖片位置= 當前圖片位置+ 偏移: : : : : : : : : : : : : : : : : : : : : : : : : -1 : : : So when we encounter a calculated position that is a negative number, we have to convert it to the position of the last image in this column of images. According to the image data in our example, the current image is at position 0, so the previous image should be our image at position 3. So how can we turn -1 into 3 and 4 into 0 at the end? Here we need to use a little math trick. If we want the head and tail values ​​to flip when they exceed each other, we need to use a formula to find余數of （當前指針+ 數組總長度）/ 數組總長度. The remainder obtained is exactly flipped.

Let's prove that this formula is correct. First, if we encounter current = 0, then the previous picture at position 0 will get the pointer -1. At this time, we use (− 1 + 4) / 4 = 3 / 4 (-1 + 4) / 4 = 3 / 4 (−1+4)/4=3/4. Here, the remainder of 3 divided by 4 is 3, and 3 happens to be the last picture in this array.

Then let's try it. If the current picture is the last picture in the array, in our example it is 3, 3 + 1 = 4. At this time, by converting (4 + 4) / 4 (4 + 4) / 4 (4+4)/4, the remainder is 0 Obviously, the number we get is the position of the first picture in the array.

Through this formula, we can get the pointer position of the previous and next pictures in the array. At this time, we can use this pointer to get their objects in the node and use CSSDOM to change their properties. Here we need to move all elements to the position of the current picture first, and then move the picture to the left or right according to the three offset values ​​of -1, 0, and 1. Finally, we need to add the current mouse drag distance.

We have sorted out the entire logic. Now let's see how to write the mousemove event callback function code:

let move = event => {
 let x = event.clientX - startX;

 let current = position - Math.round(x / 500);

 for (let offset of [-1, 0, 1]) {
 let pos = current + offset;
 // Calculate the index of the image
 pos = (pos + children.length) % children.length;
 console.log('pos', pos);

 children[pos].style.transition = 'none';
 children[pos].style.transform = `translateX(${-pos * 500 + offset * 500 + (x % 500)}px)`;
 }
};

After talking about so many things, the code is only a few lines. Indeed, simple code does not mean that the logic behind it is simple. So the programmers who write the code can also be unfathomable.

Finally, there is a small problem. When we drag, we will find that there is a strange jumping phenomenon between the previous picture and the next picture.

This problem is caused by our Math.round(x / 500) , because we added x % 500 during the transform, but this part of the calculation is not included in our current value calculation, so this part of the offset will be missing when the mouse is dragged.

We only need to change Math.round(x / 500) to (x - x % 500) / 500 to achieve the same integer effect while retaining the original positive and negative values ​​of x .

There are actually quite a few problems here, as we haven't yet changed the logic in the mouseup event. Then let's take a look at how we should implement the logic in up.

What we need to change here is the code of the for loop in children. What we want to achieve is that when we drag the image beyond a certain position, it will automatically rotate to the next image in the corresponding direction. The logic of up is basically the same as that of move, but there are a few things that need to be changed:

First of all, we can remove our transition prohibition and change it to ' ' + x % 500 in the transform is not needed because here the image is when we release the mouse, and we don't need the image to follow the position of our mouse. In the calculation of pos = current + offset , we don't have current in the up callback, so we need to change current to position because there is a z-index hierarchy. We will see that when an image is moved, it flies over our current image, but the element that flies over is actually the element we don't need, and this element that flies over comes from the two elements -1 and 1 in [-1, 0, 1] we used before, so we have to remove the unnecessary ones in the up logic. This means that if we move the mouse to the left, we only need the element of -1, otherwise we only need the element of 1, and the elements on the other side can be removed. First of all, there is no order requirement for of loop, so we can replace the two numbers -1 and 1 with a formula and put it after our 0. But how do we find which side we need? In fact, what we need to calculate is the direction in which the image is moving, so what we need to change is the line of code position = position - Math.round(x / 500) . This direction can be obtained by Math.round(x / 500) - x . This value is relative to the middle of the current element, whether it is more towards the left (negative number) or the right (positive number). In fact, the number is not the most important. What we want is its sign, that is, -1 or 1. So here we can use - Math.sign(Math.round(x / 500) - x) to get the sign of the result. This function will eventually return either -1 or 1, which is exactly what we want. In fact, there is a small bug. When we drag the current picture too short, the calculation of the picture position is incorrect.

This is because of the characteristics of our Match.round(). There is a certain error between 250 (which is exactly half of 500px), which makes it impossible for us to determine in which direction the image should be moved. Therefore, after calculating the value of Match.round, we also need to add + 250 * Match.sign(x) so that our calculation can be combined to figure out which direction the image should be moved.

Finally our code looks like this:

let up = event => {
 let x = event.clientX - startX;
 position = position - Math.round(x / 500);

 for (let offset of [0, -Math.sign(Math.round(x / 500) - x + 250 * Math.sign(x))]) {
 let pos = position + offset;
 // Calculate the index of the image
 pos = (pos + children.length) % children.length;

 children[pos].style.transition = '';
 children[pos].style.transform = `translateX(${-pos * 500 + offset * 500}px)`;
 }

 document.removeEventListener('mousemove', move);
 document.removeEventListener('mouseup', up);
};

After modifying the up function, we have truly completed the manual carousel component.

This is the end of this article about how to use JSX to implement the Carousel component (front-end componentization). For more information about how to use JSX to implement the Carousel component, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!