center thumbs in splidejs image gallery - javascript

I am working on a Thumbnail Slider like here:
https://splidejs.com/tutorials/thumbnail-slider/
on big screens the thumbs are left aligned.
I tried to center them.
see https://codepen.io/caplod/pen/ExboPyP
but then the first one gets cut off on small screens.
#thumb .splide__list {
justify-content: center
}
how can I fix this?

Add code align-items:center;
#thumb .splide__list {
justify-content: center;
align-items:center;
}

Related

CSS Content Does Not Align To Screen Size

so I have a landing jsx page which is currently made up for 2 components, a main page and an About page, these pages have been placed inside a container which uses flexbox to align them vertically. While the content int the About page works as it should (for now its just an svg), when i decrease the vertical screen size, it covers and hides the content that overflows from the main page, when i set overflow to hidden the content is just not visible, but then its not set to hidden the svg from the About page overlaps the content from the main page, when instead i wanted the main page content to resize itself to fit the viewport height of the mobile device. Any suggestions?
.main-slim{
color:#F86666;
background-repeat: no-repeat;
background-size: cover;
width:100vw;height:100vh;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
Here, the main slim className refers to the mobile view for the main page.
.about-mobile-container{
height:100vh;
.line-graphic-scroll{
//position:fixed;
top:0;
left:0;
width:100%;
height:100%;
text-align: center;
//overflow: hidden;
}
svg{
display: inline-block;
height: 100%;
}
}
And here is the full scss file for the About page, which overlaps the main page when the screen height gets small.
return(
<>
<div className='absolute-container'>
<div className='main-slim'>
//content in main slim
</div>
<div className='about-mobile-container'>
//content in about container
</div>
</div>
</>
)
And here is a representation (not the actual code) of the landing.jsx script that renders the two pages. They are contained in the 'absolute-container' and are in a flexbox set to column.
Well, you could use #media query (https://www.w3schools.com/css/css3_mediaqueries.asp) to have a different style for differently-sized devices.

"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>

React Nuka carousel vertical align slides

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

how to get an image to display at the bottom of a div

I have a div 100% of the screen height, top of the DIV is a table...Idea being then white space with a image at the bottom of the DIV. When I add the image it appears directly under the table, as opposed to the bottom of the page. How can I fix this? I have tried many things from searching in google...
display:block
margin:0 auto;
bototm:0px
but no joy, does anyone have any ideas? thanks
Add position: relative to parent div then add position: absolute; bottom:0px; to the image. This works in most cases but your could be different since you haven't posted the full code. Ps you have a typo bottom
Codepen http://codepen.io/noobskie/pen/epEPYw
Flexbox is one way of doing it: http://codepen.io/zvona/pen/BodqBY
HTML:
<div>
<img src='...' />
</div>
CSS:
div {
display: flex;
flex-direction: row;
}
img {
align-self: flex-end;
}

Categories

Resources