0

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.

  • The main issue for this, is the "height". I have the same question not long ago. Hope you can find the answer to your question here drupal.stackexchange.com/questions/126819/… – CocoSkin Oct 9 '14 at 15:57
  • Using image original size may not be a good idea. You need all image output to have the same width and height. – CocoSkin Oct 9 '14 at 16:05
0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.