Change the no. of images at smaller viewpoints for cycle plugin carousel

Change the no. of images at smaller viewpoints for cycle plugin carousel

I am using this plugin cycle2 and basically have the following working for myself , SEE HERE

I have earlier used this slider called bxslide and basically it gives you an option for min and max slides.

Now see how i have initialized the cycle2 plugin below:

  1. <div class="gallery-wrpr cycle-slideshow"
  2.      data-cycle-fx="carousel"
  3.      data-cycle-timeout='100000'
  4.      data-cycle-slides="li"
  5.      data-cycle-carousel-visible='3'
  6.      data-cycle-carousel-fluid='true'
  7.      data-cycle-next="#g-next"
  8.      data-cycle-prev="#g-prev">
Now i am setting the no of slides using the attribute data-cycle-carousel-visible='3', but for small widths in browsers , can i change the no of slide's ? like i could in bx slider(i can't use this plugin as its inflexible) ? , can anybody tell me how i can get cycle2.js t be responsive at smaller scrensizes ?

As can be seen in the fiddle the its not beng responsive, ideally i would like at modile widths(448px) , there be only 1 image instead of 3 , can that be done?

Thank you.