![]() Having multiple Carousels is probably not a good idea (both Chris and Saj agree on this). Perhaps optimize it on the MD screen! That would probably reduce the necessary resolution quite a bit.Ĭheck all the Images to be responsive! - No I had not done this! Thanks Chris. I might be able to reduce the 1024x768, but they look pretty good, and I don't want to loose much quality if I can avoid it. Optimize your image for the LG and make it as small as possible keeping quality. The best bet is optimized for web images, don't hidden anything and don't have multiple carousels.ĭear Chris and Saj, I just learned a whole lot about Carousel, handling images, and how they are rendered in Carousel. Just so you know it doesn't work in the BSS app though you have to view it working in the preview mode. I was able to try this out with a sample code. Appears to work in FF/Chrome/Edge, IE11 it does not work and with Edge the dev tools emulation stinks so it works but the emulation is horrible so it's hard to really see what it does on the mobile device. ![]() You would have to convert your carousel to Custom Code for it to work. Each image would need a class and then based on the media queries update that classes src with the bigger/smaller image. You could write a script that checks media queries and updates the img src with the appropriate size image you want. Your best bet is the optimize route to get the smallest possible file size while keeping as much quality.Ĭhris is right, you should enable the responsive option for the image. Multiple carousels probably not a good idea either. It has no knowledge whether or not one is hidden over another. The script that runs the carousel counts the elements that have the class=item and so those are still part of the scrolling and nav indicators. The blank slides are because you have hidden the slide, you can't do that. I lost the previous Trial website for some reason. Set the hiding of the LG, MD & SM displays and do a similar thing to the other carousel.Īre there any thoughts or experience about these approaches? Change all images to the 330x248 smaller version.Ģ. ![]() The other alternative is to somehow copy a double under a and turn on and off the displays, but this is not possible, as a right click on in the OVERVIEW shows.Īnother alternative is to simply Duplicate the entire Thenġ. and on the Cell phone it is jumpy and when you go backwards there is a section where there is NO IMAGE, but if you hit back or forward the images are restored. Then set the first 1024x768 to be hidden at XS display and set the second 330x248 to be hidden at the LG, MD & SM displays. I need to figure out or find out the best way to inject these into the Carousel so that things work right! I've already tried this: Now I've made a set of photos at 330x248 jpg compressed to 65% again and they are 10kb-30bk which is much better. They range in size from 100-200kb and they are Jpegs compressed to 65% which is about the practical limit keeping the quality up for the bigger displays. Right now the 1024x768 images are taking too long on a cell phone. I am trying to get smaller image that download faster at the Mobile XS size display. There are a number of approaches to this, and the best one is probably dependent on inner workings of Bootstrap and the Carousel component, which I do not know about at this point. You can see the breakpoints for v5.1.I've used Gimp to shrink all those 1024×768 images being used for the larger displays down to 330×248 for the smaller (Mobile XS) site responsive carousel, so that it won’t be as slow downloading photos. For the final version release of Bootstrap 3 (v3.4.1) the following media queries were used which corresponds with the documentation that outlines the responsive classes that are available.
0 Comments
Leave a Reply. |