I am trying to build a responsive carousel as present in Mecca website. I am using Bootstrap 4 and using slick plugin to build the carousel.
The look and feel i am trying to achieve is the something like this picture
As i am using boostrap 4, to build this tile, I have written the following code and codepen link is given below
[Codepen](https://codepen.io/bzaidi/pen/MWamJvZ)
I am facing the following problems
This carousel is not responsive. I need to change font-size using media queries on almost every resolution. If I see Mecca website, their carousel is perfectly responsive.
When i float the image left, the rightContent div seems to be taking all the width of parent div which is 290px? Why is that?
Is my approach correct?
How can I achieve responsiveness on all resolutions?
Can you someone help me?
Thanks.
Related
I'm trying to set up a Bootstrap 3 carousel to show 3 images per active slide, I want the next and previous images to be truncated but the centre image full width, similar to this example: https://thescene.com/.
I've played around with this for quite a while but can't seem to get the truncated effect? My initial idea is to have the containing div full width to show all 3 images in full with an overflow:hidden property to get the effect, but the carousel itself needs to be 1280px wide. Codeply is here: http://www.codeply.com/go/6eBfBskTsV
Why not grab one online? This component seems has a partial nearby image effect...
http://www.jssor.com/index.html
The bootstrap carousel is just a simple implementation rather than a universal solution, which means it can be cumbersome to tweak to achieve some complicated presentation. I guess unless you are just practising your skills, you won't like to make one by yourself.
I looked around on the internet, but found no satisfying answer. I am new to using the Bootstrap 3 grid, which I enjoy a lot. However, for an animation on a page I am creating, I would like to shrink a row to some small width and while this animation plays, I want the Bootstrap grid to do its work on this div instead of on the entire viewport. Does anyone know a way to do this? I found the following suggestion by someone who was also wondering about this:
Bootstrap grid system responisve utility in resizable divs
However, I would prefer a CSS solution for this.
I am creating a rails application using bootstrap. In my header, I am creating a carousel that provides links to other pages. My images are of different sizes and the carousel keeps reflecting this. I do not want the carousel to change size based on the images. How can I fix this so all of the images are the same size within the carousel?
Thanks for any help given in advance!
I guess the easiest option would be to resize them all to the same size using well any photo editor or even online.
Google output:
http://www.picresize.com/
Alternatively you could use a gem like carrierwave or paperclip. More complex but if you are going to have images like profile pictures then it might be useful.
Bye
I am using a wordpress version of Supersized. My issue is that I wish to have this nice resizable full-width image gallery but be able to place the content below. An example of how I wish it to perform here; http://www.pedinilondon.co.uk/ They are using the non-wordpress version so are easily able to break it out of the template.
Is it simply a case of CSS or div manipulation or am I running into a brick wall with this? Should I be using a different knd of slideshow to achieve what I want?
Thanks
What you want sounds like fluid images (responsive design), which there seems to be a plug-in for that. http://wordpress.org/extend/plugins/wp-fluid-images/faq/
I'm currently building a site using this framework template: http://cargocollective.com/montessori
My goal is to make the thumbnails scale in size to fill 100% of the screen, just like this site: http://mariohugo.com (resize window to see this in action)
Does anyone know if this can be done by modifying the CSS in any way?
That site is done with JavaScript - if you turn your JavaScript off, you get no images at all. Not very compatible!
You can do something similar with fluid CSS layouts, though it won't be quite as slick as that site.
have a look at twitter bootstrap framework http://twitter.github.com/bootstrap/. It might help you.