0

I am trying to create a slider, using javascript and css. I recognize that there are "tons" of them out there, but I am building this to educate myself.

I have attached a video showing the HTML of an example I am trying to recreate. In particular this shows how the MARGIN-LEFT property is being changed, making the images slide to the left. (see the 3rd line from the top)

Does anyone know, or deduce how the MARGIN-LEFT property is being changed in this way?

I have normally just used the CSS transition property to cause the images to slide, but this seems to be doing something else. Click for my video

dsampson
  • 11
  • 1
  • 4
  • you can use javascript to change the css styling of a particular html element. you can animate this change using tools like jQuery – haxxxton Mar 10 '18 at 05:18
  • I know that I can change the css directly with javascript/jquery, but when I do that, the change does not show up in the browser inspector, as it does in the example shown in the video. When I do it, it appears that the changes all happen internally and then the result shows up in the inspector. – dsampson Mar 10 '18 at 13:25
  • i assume you're referring to the 'change over time' aspect of the video. this is when you animate a property from one value to another. jQuery does this using its [`.animate` ](http://api.jquery.com/animate/) method, but there are plenty of other libraries for the gradually changing of a value (sometimes referred to as easing). – haxxxton Mar 11 '18 at 02:36
  • Yes haxxton. In the video you can see the actual MARGIN-LEFT value change over time. I will check this out... but are you saying that jquery's [.animate] method does this? If so, are you familiar with the actual code that produces this effect (meaning, being able to see the values change)? – dsampson Mar 11 '18 at 21:16
  • I have verified that the JQuery .animate method produces this effect. Thanks haxxton. – dsampson Mar 13 '18 at 17:05

0 Answers0