Views Slideshow with jCycle - Making it 100% flexible repsonsive

Question

Currently I have the following in my views:

• Title
• Image (size original)

I also currently have my image set at width: 100% via my css file. Now, how do I go about configuring the slideshow to take up 100% width to make the slideshow responsive? I installed the json2.js file to enable the advanced features and I see that there is a "fit" and a "width" option.

Do I set "fit" to 1 or true?

As for the width option, it seem to only take px values only. 100% just gets ignored.

Sure I can go and override this via the css file, but i was wondering if there is a more elegant way of doing it via the provided options in views.

Answer 1

An easy way of making the slideshow responsive is by overriding the css something like below:

.views_slideshow_cycle_main {
  width: 100%;
  float: left;
}
.views_slideshow_cycle_main .views-slideshow-cycle-main-frame {
  width: 100% !important;
  height: auto;
}
.views_slideshow_cycle_main .views-slideshow-cycle-main-frame-row {
  width: 100% !important;
  height: auto;
}
.views_slideshow_cycle_main .field-content {
  max-width: 100%;
  width: 100%;
}
.views_slideshow_cycle_main .field-content img {
  max-width: 100%;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
}

The changes you where doing might be getting overriden by default styles as those were taking the precedence.

Reference: views Slideshow for Responsive design

---

Alternate solution: Give a try to Flexislider module: Flex Slider module integrates the Flex Slider library with Drupal and several contributed modules which allows you to build responsive, resizable slideshows. Meaning the slideshows automatically adapt to the size of the browser window or device.

Some features of FlexSlider slideshows include:

• Touch enabled nagivation
• Keyboard navigation
• Configurable slide animations
• Multiple sliders per page