Building out a flickity carousel to look like this and having some issues w/ spacing on my CodePen.
codepen
looks good but want to make spacing between slides less and also the spacing is fairly equal but not 100% equal between each. For example, it says left 10% for the spacing but if you put a few more vertical photos back to back, see this image for approximate spacing in pixels that are not the same equal widths (pic)
Images should be <img src="x"> versus background image as well for accessibility and adding alt tags too.
Anyone have any hints in the code on how to fix it so the images appear larger, then take up more space (so there's less space between the slides) and also ensure that any image i put in there is equally horizontally spaced between them? Seems very close on the example attached. I tried messing with the padding/widths on 1st one but it gets strange.
Remove height: 100% from the image and only leave width: 100% so all images are going to have the same horizontal space.
And use .ui-thumbnail-img to center the image inside it.
I create a jsfiddle for the solution. https://jsfiddle.net/vzphr3n5/3/
Related
I want the DIV at top of screen, say 100px high.
Horizontal Swiper under it with a calc'ed height 100% - 100px, resizing with window.
A second 'absolute' horizontal Swiper with specific height and width.
I've tried every combination of CSS, HTML and options on the new Swiper declarations for hours. DIV's around the containers. Positioning. I'm out of ideas. And yes, I've read the API over and over. I've dissected their samples. Height adjustments on container, wrapper, slides, content.
Width does not seem to be an issue.
Height games will make the container vanish, or add extra space to bottom, or cease function, or all kinds of funny stuff.
At this point, prove I'm an idiot with boilerplate working code, PLEASE..!
Technically, the goal is any number of Swiper containers that I can position and resize as needed. Seems simple but I'm exhausted. I'd estimate I've tried well over a hundred combos in code over six hours.
An example of the page in question: https://rhstrategic.staging.wpengine.com/team/brandon-blackwell/
I have kind of a specific situation here in which I have a block div that is staying aligned left and using only a 50% width when the screen is sized below 960px (The name block in the red banner part at the top). I tried altering the CSS to make the width 100% but the problem is that the height seems to be being generated dynamically with with width (If I increase the div width to 100% the height doubles as well).
I can't figure out how to separate the height and width and I don't know where or what file these CSS changes are being dynamically generated from. It looks kind of like an HTML5 data object but I'm a bit new to these types of things so I'm not sure how to change it. When it gets down to 650px it seems to behave as I want it to. But between 650-960px it is left aligned.
All I need it to do is when the page goes down to 960px or below, I need that part that is left aligned currently to be full-width across the page and centered. Any ideas?
Just a warning: I'm not 100% sure that this answer will work correctly... My idea is to put this style in the div:
div{
width:100%;
height:50%;
}
Couple of things I would like to suggest:
If you are new to front-end designing, I would recommend you to understand the grid system of a HTML page. Learning Bootstrap will be a perfect start for you.
Now you want to make your website fluid, so take a look at CSS media query. This will help you to achieve responsiveness.
Happy Coding..
I'm currently working on a website which in future will be responsive. The site is primarily made up of images which in turn load into a FancyBox when clicked. v2 of FancyBox is now responsive and so re-sizes the images etc when screen size changes. As part of my design I have two fixed banners which appear at the top and bottom of the page, see image below:
By default there is a margin around the FancyBox so that it's styled nicely. However, with the fixed positioning that I've added to the banners I need to increase the top and bottom margin. I've looked through the JS source but I can't for the life of me find where I should be adding extra margin. There are all sorts of margins on the transitions etc (which I think is where I'm getting confused).
In theory I just need to add "x" amount of pixels to the margin, where x is the height of the banners. As an aside I'm not sure how I would replicate this in a responsive design, as the banners may be slightly shallower on a mobile. Adding the margin would mean there's a slight gap between the image and the banner, where currently the image goes behind the banner. See the following image for what I'd like it to look like:
I'd appreciate any thoughts/examples of where this has been done before.
Thanks in advance, Adam.
try the margin API option
$(".fancybox").fancybox({
margin: [120, 60, 20, 60] // top, right, bottom, left
});
See JSFIDDLE
I've looked at loads of different sliders and haven't found anything that accomplishes what the designer would like. The image below should help explain. Note that there is space above and below the slider for header/footer content.
A. Basically the idea is for the next image (2) to be partially visible on the right using a certain amount of screen space, say 10%.
B. The current image (1) floats to the left and fills the height - it may be a wide or narrow image.
C. The amount of space shown in light gray will depend on the user's available screen space. When the images reach full resolution, then the gap will expand as needed.
D. In reverse, as the available space shrinks the gap will shrink, and
E. After the gap has reached a minimum size, the slides shrink.
F. Then the current slide (1) will start to be clipped from the left & right if needed (wide images).
G. For the animation, the next slide (2), slides over to fill the gap and then bumps the current slide (1) out, leaving a gap before pulling the next image partially in.
Is there a slider that already does something similar, or do I need to modify an existing one? If so, what would be a good starting point? I've tried ones like Flexslider, but the JS resizing interferes with getting two on the screen.
No image posting privs yet, so here it is: http://imgur.com/swYtr
Try this one out....
Cool carousel
Check out the examples given more on the Site....it might help out your Query.
here's another one
http://jsfiddle.net/JCQ6Q/15/
All the best.
Vote up if it helps you. :)
I have a top and a bottom with a line in between to resize(giving more real estate to either the top or the bottom).
Basically a split-screen layout. But I am having a problem getting the bottom portion correct, no matter what I do it always extends beyond the page, and I want the box in the bottom portion to perform exactly as it does in the top portion of the page.
The following demo will show you basically what I am doing as well as my problem:
http://jsfiddle.net/mstefanko/e38bE/67/
I don't have any hard-coded heights(everything is currently set by %'s), but I added them to the fiddle for demonstration of my issue.
Right now the divider that resizes the top and bottom is resizing the top, and I have some code from jQuery UI Resizable alsoResize reverse to reverse resize the bottom. I'm not sure that I even need the extra code, but when I couldn't sort this out, I figured it was worth a shot.
Also, there's a large bottom margin on the top in order to get the jquery ui handle right, this might be causing my problems but playing with it didn't seem to get rid of the issue.
Any help is appreciated, thanks!
Your problem is that you're trying to scrunch several divs of a fixed size into one bigger fixed-size div, but the other divs don't fit. You can't expect the text to resize when you move the resizer handle to make it fit, and the divs have to go somewhere, so they overflow. Here are a few suggestions:
Give the container a css overflow value of auto (so when you resize it and it's too big to fit, it will automatically give you a scrollbar)
Set the overflow value and get rid of the resizer entirely
Give container a css height value of auto or scroll (if size is not an issue)