I want to have a slideshow with next image div that is to be cut in 40-50%.
It means that the next image to be shown has to be cut 40-50% so that it looks like a slideshow.
.slideshow_image_div {
height: 300px;
border: thin black solid;
width: 300px;
overflow: hidden;
}
.slideshow_image_div .slideshow_images {
float: left;
width: 45%;
margin-right: 10px;
}
.slideshow_images img {
max-width: 100%;
max-height: 100%;
}
<div class="slideshow_image_div b">
<div class="slideshow_images">
<img src="http://cl.jroo.me/z3/q/R/R/d/a.aaa-Unique-Nature-Beautiful-smal.jpg" alt="">
</div>
<div class="slideshow_images">
<img src="http://cl.jroo.me/z3/q/R/R/d/a.aaa-Unique-Nature-Beautiful-smal.jpg" alt="">
</div>
<div class="slideshow_images">
<img src="http://cl.jroo.me/z3/q/R/R/d/a.aaa-Unique-Nature-Beautiful-smal.jpg" alt="">
</div>
</div>
If you want the whole slide to appear in the same line, you can give white-space: nowrap and removed float along with giving a display: inline-block and removed the hard-coded height, so that it really looks like a slide container:
.slideshow_image_div {
border: thin black solid;
padding: 5px 0 0 5px;
width: 300px;
overflow: hidden;
white-space: nowrap;
}
.slideshow_image_div .slideshow_images {
display: inline-block;
width: 40%;
margin-right: 5px;
}
.slideshow_images img {
max-width: 100%;
max-height: 100%;
}
<div class="slideshow_image_div b">
<div class="slideshow_images">
<img src="http://cl.jroo.me/z3/q/R/R/d/a.aaa-Unique-Nature-Beautiful-smal.jpg" alt="">
</div>
<div class="slideshow_images">
<img src="http://cl.jroo.me/z3/q/R/R/d/a.aaa-Unique-Nature-Beautiful-smal.jpg" alt="">
</div>
<div class="slideshow_images">
<img src="http://cl.jroo.me/z3/q/R/R/d/a.aaa-Unique-Nature-Beautiful-smal.jpg" alt="">
</div>
</div>
Related
I cant make a button change images
This Is my HTML.
.slider {
&__wrapper {
background-color: #eeeeee;
padding: 0 10%;
margin-top: 2.6%;
}
&__image1 {
width: 100%;
}
&__myslides {
background-color: white;
}
&__image2 {
width: 100%;
display: none;
}
&__image3 {
width: 100%;
display: none;
}
&__buttons {
text-align: center;
background-color: black;
opacity: .5;
}
&__buttons button {
height: 35px;
width: 35px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
cursor: pointer;
margin: 5px;
}
&__buttons button:hover {
opacity: .1;
}
}
<div class="slider">
<div class="container">
<div class="slider__wrapper">
<div class="slider__myslides">
<img src="https://picsum.photos/200/300" alt="robot" class="slider__image1" id="image1" />
</div>
<div class="slider__myslides">
<img src="https://picsum.photos/200/300" alt="space" class="slider__image2" id="image2" />
</div>
<divclass="slider__myslides">
<img src="https://picsum.photos/200/300" alt="space" class="slider__image3" id="image2" />
</div>
<div class="slider__buttons">
<button class="slider__1" id="btn1">1</button>
<button class="slider__2" id="btn2">2</button>
<button class="slider__3" id="btn3">3</button>
</div>
</div>
</div>
</div>
I tried to add class active to transform display none image into Flex. It works.
i can also turn flex into none.
But i can only do it seperatly. I cant make both things happen with just One Burton.
Problem
When I try to use the code (see below), the div is only centered when I use width: 100px;.
<div style="border: solid 1px black; width: 100px; height: 100px; background-color: blue; margin-left: auto; margin-right: auto;">
Since I want to assign a much longer width to the text and set the width to 500px, the div is no longer centered.
<div style="border: solid 1px black; width: 500px; height: 100px; background-color: blue; margin-left: auto; margin-right: auto;">
Problem #2
The svg isn't centered
<div class="col-xl-3 col-lg-3 col-sm-6">
<div class="ud-single-feature wow fadeInUp" data-wow-delay=".25s" >
<div class="ud-feature-icon" >
<i class="lni lni-layers"></i>
</div>
<div class="ud-feature-content" style="position:absolute; width: 100%; text-align: center;">
<h3 class="ud-feature-title" style="text-align: center;">test</h3>
<p class="ud-feature-desc" style="text-align: center;">
test
</p>
<!-- <a href="javascript:void(0)" class="ud-feature-link">
Learn More
</a>-->
</div>
</div>
</div>
Although your question does not define your desired goal, using margin-left or right will not justify the centre point of the page. Instead, consider using position: fixed in order to centre exactly in the page.
This should also mean you can set the dimensions of the div as you like.
<div style="background: blue; width: 100px; height: 100px; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%)">Div should be properly centred in page.</div>
You can set the div as a child of another div like so :
<div style="justify-content: center; align-items: center; display: flex;">
<div style="border: 1px solid black; width: 500px; height: 100px; background-color: blue;">
</div>
</div>
At the moment I have a website with an iframe as the main content and some graphs in a sidebar. However, when the screen size is changed, the layout is messed up.
I was struggling to make the iframe fit in the website as I can't add a percentage value in the html.
This is the html:
.header {
background-color: #fafafa;
text-align: left;
padding-left: 25px;
padding-top: 15px;
}
.row {
display: flex;
}
.column.side {
flex-basis: 25%;
background-color: #fafafa;
}
.column.middle {
flex-basis: 75%;
}
.container {
position: relative;
padding-bottom: 50%;
height: 0;
overflow: hidden;
max-width: 100%;
background-color: #fafafa;
}
.container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<div class="row">
<div class="column middle">
<div class="container">
<iframe src="https://hestia.speckle.works/#/embed/li0TtsHb3F"
frameborder="0"allowfullscreen>
</iframe>
</div>
</div>
<div class="column side">
<div style="height: 500px">
<h6>UNIT <span style="color: #3888db">BREAKDOWN</span></h6>
<canvas id="chart1" height="250px"></canvas>
</div>
</div>
</div>
Hi #jamie you can use media queries for the responsive website in your CSS also use iframe's scrolling="no" attribute for the better user interface.
<iframe src="https://hestia.speckle.works/#/embed/li0TtsHb3F"
frameborder="0" scrolling="no" allowfullscreen>
</iframe>
You need not apply position: absolute; for iframe. Removing it will solve the issue.
.header {
background-color: #fafafa;
text-align: left;
padding-left: 25px;
padding-top: 15px;
}
.row {
display: flex;
}
.column.side {
flex-basis: 25%;
background-color: #fafafa;
}
.column.middle {
flex-basis: 75%;
}
.container {
position: relative;
overflow: hidden;
max-width: 100%;
background-color: #fafafa;
}
.container iframe {
width: 100%;
height: 100%;
}
<div class="row">
<div class="column middle">
<div class="container">
<iframe src="https://hestia.speckle.works/#/embed/li0TtsHb3F" frameborder="0" allowfullscreen>
</iframe>
</div>
</div>
<div class="column side">
<div style="height: 500px">
<h6>UNIT <span style="color: #3888db">BREAKDOWN</span></h6>
<canvas id="chart1" height="250px"></canvas>
</div>
</div>
</div>
I want to make unequal images heights and keep the layout the same on resize without changing the aspect ratio of the image on here is what i want to do :
https://i.ibb.co/nkSXJ4f/Screen-Shot-2019-04-12-at-6-32-32-AM.png
I know this is ease with css grid but i think i can make my code more simple since the layout is not complicated
What i've tried
body {
height: 100%;
}
.card {
margin-right: 20px;
margin-bottom: 2.6668rem;
display: inline-block;
vertical-align: top;
}
.medium {
width: 65%;
margin-right: 5%;
height: 600px;
overflow: hidden;
}
.small {
width: 25%;
height: 300px;
overflow: hidden;
}
img {
width: 100%;
}
<main class="grid">
<a href="" class="card medium">
<figcaption class="caption">project title</figcaption>
<div class="card-image">
<img src="https://images.unsplash.com/photo-1554565166-cafee0896506?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80" alt="">
</div>
</a>
<a href="" class="card small">
<figcaption class="caption">Kettle</figcaption>
<div class="card-image">
<img src="https://images.unsplash.com/photo-1554565166-cafee0896506?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80" alt="">
</div>
</a>
</main>
Try this code
body {
height: 100%;
}
*{
box-sizing:border-box;
}
.card {
margin-right: 20px;
vertical-align: top;
height:100vh;
display: block;
overflow: hidden;
}
.medium {
width: 65%;
margin-right: 5%;
float:left
}
.small {
width: 25%;
float:left
}
.card-image { height:100%; }
.card-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
<main class="grid">
<a href="" class="card medium">
<figcaption class="caption">project title</figcaption>
<div class="card-image">
<img src="https://images.unsplash.com/photo-1554565166-cafee0896506?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80" alt="">
</div>
</a>
<a href="" class="card small">
<figcaption class="caption">Kettle</figcaption>
<div class="card-image">
<img src="https://images.unsplash.com/photo-1554565166-cafee0896506?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80" alt="">
</div>
</a>
</main>
I created this code for a slider. When I hover the thumbnail image it shows me image, but I need to create an automatic slider. How can i do this?
/******************************************************************************************************/
.sliderconteainer {
width: 100%;
position: relative;
border: 2px double silver;
border-radius: 5px;
}
.thmbnail {
width: 25%;
height: 100px;
float: left;
}
.slide {
width: 100%;
height: 300px;
position: absolute;
float: right;
left: 0;
top: 0;
opacity: 0;
}
.slide img {
height: 300px;
width: 100%;
}
.thmbnail img {
width: 100%;
height: 95%;
border: 2px solid #EEEEEE;
border-radius: 5px;
}
.content-placeholder {
width: 100%;
height: 300px;
}
.info {
background-color: black;
z-index: 99;
margin-top: -66px;
position: absolute;
width: 100%;
padding-right: 10px;
opacity: .75;
border-radius: 5px;
}
.info p {
color: #ABB3BD;
font-family: 'B Mitra';
}
.info h5 {
font-family: 'B Titr';
color: #ffffff;
}
.thmbnail:hover .slide {
opacity: 1;
}
.thmbnail:hover .thmbnail img {
border: 2px solid #56656E;
}
#main {
padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="main">
<div class=" sliderconteainer col-md-5 col-sm-5">
<div class="content-placeholder"></div>
<div class="thmbnail">
<div class="slide">
<img src="~/Image/SiteDesign/profile.jpg" class="img-responsive"/>
<div class="info">
<h5>عنوان برای اسلید اول</h5>
<p>توضیحالت اسلاید دوم</p>
</div>
</div>
<img src="~/Image/SiteDesign/profile.jpg"/>
</div>
<div class="thmbnail">
<div class="slide">
<img src="~/Image/Slider/8.jpg"/>
<div class="info">
<h5>عنوان برای اسلید اول</h5>
<p>توضیحالت اسلاید دوم</p>
</div>
</div>
<img src="~/Image/Slider/8.jpg"/>
</div>
<div class="thmbnail">
<div class="slide">
<img src="~/Image/Slider/image-slider-2.jpg"/>
<div class="info">
<h5>عنوان برای اسلید اول</h5>
<p>توضیحالت اسلاید دوم</p>
</div>
</div>
<img src="~/Image/Slider/image-slider-2.jpg"/>
</div>
<div class="thmbnail ">
<div class="slide">
<img src="~/Image/Slider/Megumi-4565.jpg"/>
<div class="info">
<h5>عنوان برای اسلید اول</h5>
<p>توضیحالت اسلاید دوم</p>
</div>
</div>
<img src="~/Image/Slider/Megumi-4565.jpg"/>
</div>
</div>
</div>
If you want to change things automatically, you can use the build-in JavaScript function setInterval(xfunction, xInterval), which calls xFunction, every xInterval
setInterval(function() {
console.log("MOVE IT");
moveLeft();
}, 1000);
As #dennis-koch mentioned, I would also have a look at plugins you may use for a slider.