Live slideshow https://www.baywaycopperalloys.com
The following styling sizes Drupal 8 Views Slideshow slides correctly in all browsers except IE 11. .img-responsive is the selector applied.
.carousel-inner>.item>a>img, .carousel-inner>.item>img, .img-responsive, .thumbnail a>img, .thumbnail>img { display: block; max-width: 100%; height: auto; } The width can be corrected using max-width:100vw but then the container height set by the javascript inline on the elements is incorrect.
How do I get correct 100% widths and auto heights in IE 11 using Views Slideshow?
<div id="views_slideshow_cycle_div_home_slider-block_1_1" class="views_slideshow_cycle_slide views_slideshow_slide views-row-2 views_slideshow_cycle_hidden views-row-even" style="position: absolute; top: 0px; left: 0px; display: block; z-index: 5; opacity: 1; width: 1903px; height: 464px;"> <div class="views-row views-row-1 views-row-even"> <div class="views-field views-field-field-slide-image"> <div class="field-content"> <img src="/sites/bayway/files/2017-02/banner-2.jpg" width="2200" height="536" alt="Bayway Copper Alloys" typeof="foaf:Image" class="img-responsive"> </div> </div> <div class="views-field views-field-field-display-order"> <div class="field-content">2</div> </div> </div> </div> 2 Answers
Answers 1
First remove .form group which contain the whole slider from views (you can use rewrite output or in your template) so controls will be centred
then try this , and tell me if slider controls works
.views_slideshow_main{ height:310px } .view-home-slider .img-responsive { height:300px; max-width: 100vw; } .views-slideshow-controls-bottom{ z-index: 9999999999999; position: relative; } Answers 2
You can apply image style to the images in slideshow. Right now height of images in 556px. This is what is rendering in IE as its takes height auto. If image style is applied, then it will be consistent in all browser.
Also you need to align the slideshow container in center. Right now it is aligned left. With this issue will be resolved for all browsers. 
0 comments:
Post a Comment