React Nuka carousel vertical align slides - javascript

I have a carousel that has slides with images but the slides is not aligned vertically. I usually use flex-box to align items but it's not possibly now due to the images are in a nested structure now. Is there the a way to vertically align the slides in Nuka?
<div class="container__container" style="flex-wrap: wrap; margin: 1em 0px 1.5em; display: flex; align-items: center; justify-content: center;">
<img src="https://res.cloudinary.com/universal-avenue/image/upload/c_fill,co_rgb:c0c4cb,dpr_auto,e_colorize,f_png,q_auto/v">
</div>
when i apply display: flex instead of display: block to slider-list in the console the images become vertically aligned

Just add the vertical attribute to your Carousel like this:
<Carousel vertical={true}>

Nuka carrousel doesn't provide a vertical version of the carrousel you can use react swipeable it does nevertheless the structure to provide the element is quite different nuka is a way better to implement non static element from a back what you can do if its youre case is to work on nuka open source community and add vertical carrousel or just get along with the horizontal one

Related

"Insert" image horizontally on button click

So here is what I am trying to achieve. I want to have an image centered in the middle of the page, and when a button is clicked, a second image, horizontally aligned with the 1st, will appear next to it (with even spacing between them).
Right now I have the code to get them aligned next to each other working fine.
HTML:
div class="quiz">
<div class="column">
<span id="img1label" class="word"></span>
<img id="img1" class="imgs"/>
</div>
<div class="column">
<span id="img2label" class="word"></span>
<img id="img2" alt="quiz image" class="imgs"/>
</div>
</div>
CSS:
.quiz {
display: flex;
flex-direction: row;
flex-grow: 1;
margin: auto;
}
.column{
display:flex;
justify-content:center;
flex-direction: column;
flex-grow: 1;
}
.imgs{
display:block;
width:50%;
}
.word{
display:block;
width: 100%;
text-align:center;
}
The JS at the moment isn't really much worth showing, right now I have it so that img2 is a pure white image, on button click it just swaps images.
The problems with this:
The initial image is not centered, its put all the way to the left.
The insertion of a new image isn't really an insertion, so nothing changes in layout to adjust the margins to center two new images.
I tried using the image grid tutorial here: https://www.w3schools.com/howto/howto_js_image_grid.asp
But I don't want to resize my actual images. I just want them to move further apart when the number of images being displayed changes. I am not using JQuery right now, and I'd prefer to not have to learn how to use a whole new package for what seems to be a simple problem that I'm struggling with. Any help is appreciated.
How I understand, you should add alignments in your .quiz class
.quiz {
display: flex;
justify-content: center;
align-items: center;
flex-grow: 1;
margin: auto;
}
then your items in this block will be aligned. And if you want to add space between images just add margin on them.

Javascript for altering padding in css

I've encountered a problem while coding my website row by row. For specifying products I have made small slideshows for every one of them, but I have a hard time centering the images vertically due to some pictures are standing and some are laying down. I use "text-align: center" for horisontall centering, but since the pictures heights varies I've been trying to use js.
Here's how far I've come trying to code a script that calculates the top-padding depending on how high the image is:
function padding(nr) {
var heightPX = document.getElementsByClassName("IMG"+nr).clientHeight;
document.getElementById("frame"+nr).style.paddingTop = ((290-s)/2);
}
290 is the maximum height, so 290-s is what's left over, and then divided by 2 for the same space over and under.. You get the idea, this isn't working though.
Help pls
You can center an element vertically using a combination of display: flex; align-items: center; on the parent element. There are other techniques covered here https://www.w3.org/Style/Examples/007/center.en.html
img {
max-height: 50vh;
}
div {
height: 100vh;
background: #333;
display: flex;
justify-content: center;
align-items: center;
}
<div>
<img src="http://kenwheeler.github.io/slick/img/fonz1.png">
</div>

Align center when element width < viewport, align right + scroll when element width > viewport

I'd like to have an element centered inside a viewport as long as it is smaller than the viewport and scrollable + aligned right as long as it is bigger than the viewport. Like this:
First I tried without Javascript, but float and overflow are knocking each other out. Then I tried putting a div with float:right next to the element and setting it's width programatically through Javascript. But the element wouldn't stick to the right when it's smaller than the viewport.
I'm out of ideas now, any suggestions would be very welcome.
I have a solution, which works if it's possible for you to replace the regular spaces inside the text with non-breaking-space entities :
http://codepen.io/anon/pen/vKgydN
Here is the essential part of the settings:
.x1 { /* wrapper for text container */
display: flex;
flex-direction: row-reverse;
overflow: hidden;
}
.x2 { /* text container */
flex: 0 0 auto;
display: inline-block;
align-items: flex-start;
margin: 0 auto;
}
So it's a reverse flex container with only one flex item which is not allowed to grow or shrink, has margin: 0 auto for centering and align-items: flex-start for right alignment when it's becoming narrower than the parent element/viewport.
EDIT/additional remark: I forgot about the scrolling ability, and right now I can't find a solution for it. Nevertheless, I leave this "half answer" here - maybe someone else comes up with the rest....
Meanwhile I have achieved the desired behaviour by utilizing JQuery. It's not perfect and I still wish there would be a solution without Javascript.
Here's what I've done to make it work.
HTML:
<div class="breadcrumb-scroller-container">
<div class="breadcrumb-scroller">
scroller content
</div>
</div>
CSS:
.breadcrumb-scroller-container {
text-align: center;
}
.breadcrumb-scroller {
overflow: auto;
white-space: nowrap;
}
Javascript (JQuery):
$(document).ready(function() {
// scroll left to a maximum of 10000px just to be sure
$(".breadcrumb-scroller").scrollLeft(10000);
});
If you have timing issues with $(document).ready() firing too early and before the scroller has been initialized by the browser, give it a short delay:
$(document).ready(function() {
setTimeout(function() {
$(".breadcrumb-scroller").scrollLeft(10000);
}, 500);
});

css flexbox only works on resize when using ajax

I am using a CSS Flexbox to stack three divs on top each other.
The middle div must grow or shrink depending on the size available.
The top and bottom div will take up the size they have.
When testing this in a fiddle it will work.
However, I am loading the data in the page using ajax and fullPage.js slider.
the result is that the middle div does not fill up the remaining space.
When I resize the window, it will trigger a change in size and everything is well.
So I have been trying to create a work around, thusfar without any success.
What I have done so far:
try to trigger a window resize $(window).trigger('resize');
try to change the CSS height for the flexible box
try to reload data after 500 ms.
setting the flexbox height to a certain height and then setting it to auto again.
and I forgot all the other things I've done so far trying to do some CSS tricks.
Here the CSS / HTML
CSS:
#wrapper {
display: flex;
flex-direction: column;
position: relative;
}
.pageInfo {
flex: 0 0 auto;
}
.pageData {
flex: 1 1 auto;
margin-top: 10px;
}
.sliderBtnBar {
flex: 0 0 auto;
height: 40px;
position: relative;
}
HTML:
<div id="wrapper">
<div class="pageInfo">some text</div>
<div class="pageData">
<div>data</div>
</div>
<div class="sliderBtnBar">btns</div>
</div>
In the wrapper I will load the pageInfo, the pageData and the sliderBtnBar divs on a later time. At that point the Flexbox doesn't work. Loading this when the page loads it will work.
So like I said, I can't find a work around.
Have you seen this before or know how to solve this?
Any idea would be helpfull.
Thanks in advance!

Have images center the width and height using owl carousel and Bootstrap 3

I am trying to achieve a responsive image gallery browsing experience using a combination of bootstrap and owl carousel. I have a fixed header with a fixed height and a fixed footer with a fixed height.
My goal here is to have the images in the slider always end up in the center of the header of footer despite the height of the image. is there a simple way to make some type of dynamic container inbetween the footer and header to accomplish this or maybe some nifty java script to resize the images? (Keeping in mind the solution needs to work on mobile as well)
Here is my jsfiddle example
http://jsfiddle.net/Tenacity/GMu2x/
My mind is thinking of something similar to this
.img .owl-carousel {
width:xx%;
height:xx%;
margin-top:xx%;
margin-bottom:xx%;
margin-left:xx%;
margin-right:xx%;
}
And im thinking the xx's are dynamically caluclated based on screen height and width
If you look at my example i am currently just using a margin-top css attribute to have the images all scroll left to right about 60px from the top which i would of course remove with a better solution from the top but i want to achieve a dead center image all the time when they are viewed.
Thanks in advance
.owl-carousel .owl-item{
height:550px;
width:1200px;
}
.owl-carousel .owl-item img {
height:550px;
width:auto;
}
.bg-holder{
text-align: center;
}
<div class="owl-carousel owl-slider" id="owl-carousel-slider" data-inner-pagination="true" data-white-pagination="true">
<div class="bg-holder">
<!-- your content images goes here -->
</div>
</div>

Categories

Resources