Image(r) transform and for loop I'm stuck with the .first() element and why the for-loop code won't work. 

&lt;div id="header-slider"&gt;
  &lt;ul&gt;        
    {% set image = entry.bannerSlider.first() %}
    {% set transformedImage = craft.imager.transformImage(image, 
      { width: 1420, height: 550, position: image.focalPoint,  effects: { grayscale: true, gamma: 1.5}, }) %}
    {% for image in entry.bannerSlider %}
      &lt;li data-transition="" data-masterspeed="500"&gt;
        &lt;img src="{{ transformedImage.url }}"/&gt;
      &lt;/li&gt;
    {% endfor %}
  &lt;/ul&gt;
&lt;/div&gt;


If I remove the .first() element the code breaks ("An unknown image object was used"), but, as this code populates a slider, I need all the images loaded, hence my attempt with the for-loop.

I think I am mixing up different Models, but need someone to point it out, please...
When using the for loop you don't need to set image as it is set in the for loop. You will also need to define transformedImage on every iteration, so move it within the for loop.

Give the below a go, it should do what you are after.

&lt;div id="header-slider"&gt;
  &lt;ul&gt;
    {% for image in entry.bannerSlider %}
      {% set transformedImage = craft.imager.transformImage(image, { width: 1420, height: 550, position: image.focalPoint,  effects: { grayscale: true, gamma: 1.5}, }) %}
      &lt;li data-transition="" data-masterspeed="500"&gt;
        &lt;img src="{{ transformedImage.url }}"/&gt;
      &lt;/li&gt;
    {% endfor %}
  &lt;/ul&gt;
&lt;/div&gt;