Reputation: 89
I'm trying to make an automatic slideshow that has images sliding from the right to the left. I'm doing this using the css animation property and it works fine exept that the images that are in overflow (can't fit into the div) don't show unless they can fit into the div (get out of overflow).
I'm trying to make similar to the one this page http://merceza.ba/.
How should I fix this and are there any suggetions about improving my code?
#slideshow {
position: absolute;
height: 50%;
overflow: hidden;
margin: 50px auto;
padding: 5px;
background: white;
animation: mymove 5s infinite;
display: inline-block;
}
@keyframes mymove {
from {
left: 0px;
}
to {
left: -50%;
}
}
#slideshow img {
height: 100%;
display: inline-block;
}
<div id="slideshow">
<img id="img1" src="http://merceza.ba/assets/Uploads/_resampled/croppedimage960430-104460427800131820417953145028972251922699o.jpg" alt="1" />
<img id="img2" src="http://merceza.ba/assets/Uploads/_resampled/croppedimage960430-1280604010428385624259212436923590074138462n2.jpg" alt="2" />
<img id="img3" src="http://merceza.ba/assets/Uploads/_resampled/croppedimage960430-104314338351551398609326633168164979199746n2.jpg" alt="3" />
</div>
Upvotes: 0
Views: 12733
Reputation: 67778
Here's a solution using your own approach, but adding the first picture once more after the last one, and adjusting the other settings accordingly (container width 400%, anomation from 0 to -300%, image width 25% etc.):
The height of the container has to be adjusted though...
#slideshow {
position: absolute;
height: 70%;
width: 400%;
overflow: hidden;
margin: 50px auto;
padding: 0px;
background: white;
animation: mymove 5s linear infinite;
display: inline-block;
font-size: 0;
}
@keyframes mymove {
from {
left: 0%;
}
to {
left: -300%;
}
}
#slideshow img {
height: auto;
width: 25%;
display: inline;
overflow: visible;
}
<div id="slideshow">
<img id="img1" src="http://merceza.ba/assets/Uploads/_resampled/croppedimage960430-104460427800131820417953145028972251922699o.jpg" alt="1" />
<img id="img2" src="http://merceza.ba/assets/Uploads/_resampled/croppedimage960430-1280604010428385624259212436923590074138462n2.jpg" alt="2" />
<img id="img3" src="http://merceza.ba/assets/Uploads/_resampled/croppedimage960430-104314338351551398609326633168164979199746n2.jpg" alt="3" />
<img id="img4" src="http://merceza.ba/assets/Uploads/_resampled/croppedimage960430-104460427800131820417953145028972251922699o.jpg" alt="4" />
</div>
Upvotes: 0
Reputation: 185
You can use Bootstrap carousel
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Carousel Example</h2>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="http://via.placeholder.com/350x150" alt="Los Angeles" style="width:100%;">
</div>
<div class="item">
<img src="http://via.placeholder.com/350x150" alt="Chicago" style="width:100%;">
</div>
<div class="item">
<img src="http://via.placeholder.com/350x150" alt="New york" style="width:100%;">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</body>
</html>
You can check here https://getbootstrap.com/docs/4.0/components/carousel/
Upvotes: 2