$slider.css({'transform' : 'translateY(' + (-$height * $counter) + 'px)'})

Question

$slider.css({
    'transform' : 'translateY(' + (-$height * $counter) + 'px)'
})   

I have been cracking my head on this code. Can someone please explain/break this to me in details.

Answer 1

This is how i understand this code:

$slider.css({
    'transform' : 'translateY(' + (-$height * $counter) + 'px)'
})

$slider is a DOM Element on which you apply css using javascript.

$height is a variable containing some a numeric value that stands as an height value.

$counter is a variable containing a numeric value. According to it's name, it is a counter value.

The whole code applies the Transform css property to the DOM element referenced by the $slider variable.

if we replaced these variable by their values, we would have:

var $height = 5
var $counter = 3
var $slider = $(".slider")
$slider.css({
     'transform' : 'translateY('+ (-$height*$counter)+ 'px') //equals to 'transform' : 'translateY('+ (-5*3)+ 'px')
})

Answer 2

Its applying style to the element in the variable slider. The style is transform css proprty and its value is translate Y calculated with multiplying negative of variable height and variable counter