About how to make carousel images in H5

I’m new to the front-end, let me share the implementation process of the touch screen version of the carousel on the mobile phone. The general functions are as follows: supports cyclic sliding width, which can be set arbitrarily, and does not need to be the same width as the screen. The page can be scrolled vertically, and callbacks can be set to monitor the switching of elements. Pure js, without any third-party library principles. Assume that the width of the child element .item is 375px. Use absolute positioning to place all child elements within the parent element. Set the width of the parent element .carousel to 375px, which is the same width as the child element .item. Add touch events to the parent element .carousel: touchstart, touchmove, touchend. When the finger is pressed, the initial position (clientX) is saved. When the finger slides, the sliding direction is determined by the sliding distance: when the finger slides to the left, the current element and the current element are moved at the same time. If the finger of the element on the right slides to the right, the current element and the element on the left of the current element will be moved simultaneously. When the finger of the element on the left of the current element is lifted, it will be judged by the sliding distance whether to switch to the next page. The movement distance does not exceed 50% of the width of the child element, and the current page will be rolled back. Go to the initial position without switching the current element. If the movement distance exceeds 50% of the width of the child element, switch the current element to the next element

1. An example tutorial of using H5 to implement a carousel (touch screen version)

Introduction: I am new to the front-end and would like to share the implementation process of the touch screen carousel on mobile phones. The general functions are as follows: Supports cyclic sliding width, which can be set arbitrarily. The page does not need to be the same width as the screen. It can be scrolled vertically. Callbacks can be set to monitor the switching of elements. Pure js, without any third-party library principles. Assume that the width of the sub-element .item is 375px, and use absolute positioning to move all Place the child element within the parent element and set the width of the parent element .carousel to 375px, which is the same width as the child element .item. Add a touch event to the parent element .carousel: touchsta...

2. Details on how to use H5 to implement the touch screen version of the carousel

##Introduction: This article mainly introduces how to use H5 to implement a touch-screen version of the carousel. The editor thinks it is quite good, so I will share it with you now and give it as a reference. Let’s follow the editor to take a look

3. Teach you step by step to implement the carousel using jQyery

Introduction: I believe everyone will see the effect of a carousel on major websites, so I can’t help but want to make one myself. I checked the information and saw After understanding the principle of the carousel, I slowly tried to make it. The final effect was barely adequate, but I still want to summarize it. It may be helpful to friends in need. Let’s take a look below.

[Related Q&A Recommendations]:

javascript - js uses setInterval to implement the automatic image carousel function, is the speed getting faster and faster?

xcode - ios picture carousel frame exception

ios - SDScrollview cannot display the carousel when used with Masonry?

javascript - jq carousel problem

The above is the detailed content of About how to make carousel images in H5. For more information, please follow other related articles on the PHP Chinese website!