How to make slider preview slow motion-PHP Chinese Network Q&A

Article Topic Learning Download Q&A Programming Dictionary Game Recent Updates

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

How to make slider preview slow motion

P粉715274052 2023-08-17 22:42:11

524

I needed the slider preview to move by the image, but now it moves immediately to the end

I tried creating a preview slider using two buttons (left and right) but when I press the right button it moves to the end whereas I need it to move as per the image Here is the link: https://codepen.io/alexvambato/pen/yLGBxKK

      
 
 
 < ;/li>

P粉715274052

reply all (1)

P粉8514014752023-08-18 15:06:46 1 floor

To build a slider like that, you need to render the image and picture at the same height and width. For example, 100 pixels, then each img should render the image in intensified mode. Once done, you need to write some code in JavaScript like this:

First, you need to define a variable that indicates the position of the slider.

var pos = 0; //This should be a global variable

In move and move functions, you need to increase/decrease the value ofpos. Based on this, you can set the margin value of the slider as follows:

move.setAttribute('style', 'padding:0px; width:max-content; text-align:center;display: flex;margin-bottom: 0px;margin-left: ' pos*100 'px;' )

Of course, the pos value should be limited by image count and negative values.