Carousel transition end before displaying all content - javascript

I'm currently making a carousel that scrolls logos but I have a problem.
If the number of logos is too high, the animation ends before all the logos are displayed.
Is there a way to make all the logos appear before resetting the animation?
Here's an example of my carousel (here it works well because the number of images is small, but if I add more, it's a problem).
#keyframes scroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(calc(-250px * 7))
}
}
.slide-track {
animation: scroll 50s linear infinite;
animation-fill-mode: forwards;
display: flex;
width: calc(250px * 14);
}
Here is a working example in Codepen.
Codepen example


If your slides count is not going to change dynamically, and you are not to use javascript, I recommend you to use your slides count and also the container width in your calculations in order to make the animation work as desired:
$slides-count: 16;
$slide-width: 250px;
$container-width: 960px;
#keyframes scroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(calc($container-width - ($slide-width * $slides-count)))
}
}
.slide-track {
animation: scroll 50s linear infinite;
animation-fill-mode: forwards;
display: flex;
width: calc($slides-count * $slide-width);
}


If the number of logos is too high, the animation ends before all the logos are displayed.
according to your code, you'v make sure of tow factors :
adding more logos needs to add it in fallback
for example your slides in HTML structure goes like this:
img1,img2,img3,img4,img1,img2,img3,img4
so to add more logos should be added twice:
img1,img2,img3,img4,img5,img1,img2,img3,img4,img5
Since we added more logo items we have to increase Slide animation number to match how many logos displaying:
#keyframes scroll {
0% { transform: translateX(0); }
100% { transform: translateX(calc(-250px * 7 👈👈))}
}
demo example [in this demo I added 17 logo items]:
body {
-webkit-box-align: center;
align-items: center;
background: #E3E3E3;
display: -webkit-box;
display: flex;
height: 100vh;
-webkit-box-pack: center;
justify-content: center;
}
#-webkit-keyframes scroll {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
100% {
-webkit-transform: translateX(calc(-250px * 17));
transform: translateX(calc(-250px * 17));
}
}
#keyframes scroll {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
100% {
-webkit-transform: translateX(calc(-250px * 17));
transform: translateX(calc(-250px * 17));
}
}
.slider {
background: white;
box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.125);
height: 100px;
margin: auto;
overflow: hidden;
position: relative;
width: 960px;
}
.slider::before, .slider::after {
background: -webkit-gradient(linear, left top, right top, from(white), to(rgba(255, 255, 255, 0)));
background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%);
content: "";
height: 100px;
position: absolute;
width: 200px;
z-index: 2;
}
.slider::after {
right: 0;
top: 0;
-webkit-transform: rotateZ(180deg);
transform: rotateZ(180deg);
}
.slider::before {
left: 0;
top: 0;
}
.slider .slide-track {
-webkit-animation: scroll 10s linear infinite;
animation: scroll 10s linear infinite;
display: -webkit-box;
display: flex;
width: calc(250px * 14);
}
.slider .slide {
height: 100px;
width: 250px;
}
<div class="slider">
<div class="slide-track">
<div class="slide">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/1.png" height="100" width="250" alt="" />
</div>
<div class="slide">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/1.png" height="100" width="250" alt="" />
</div>
<div class="slide">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/1.png" height="100" width="250" alt="" />
</div>
<div class="slide">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/1.png" height="100" width="250" alt="" />
</div>
<div class="slide">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/1.png" height="100" width="250" alt="" />
</div>
<div class="slide">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/1.png" height="100" width="250" alt="" />
</div>
<div class="slide">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/1.png" height="100" width="250" alt="" />
</div>
<div class="slide">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/1.png" height="100" width="250" alt="" />
</div>
<div class="slide">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/1.png" height="100" width="250" alt="" />
</div>
<div class="slide">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/1.png" height="100" width="250" alt="" />
</div>
<div class="slide">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/2.png" height="100" width="250" alt="" />
</div>
<div class="slide">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/3.png" height="100" width="250" alt="" />
</div>
<div class="slide">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/4.png" height="100" width="250" alt="" />
</div>
<div class="slide">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/5.png" height="100" width="250" alt="" />
</div>
<div class="slide">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/6.png" height="100" width="250" alt="" />
</div>
<div class="slide">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/7.png" height="100" width="250" alt="" />
</div>
<div class="slide">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/1.png" height="100" width="250" alt="" />
</div>
<div class="slide">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/1.png" height="100" width="250" alt="" />
</div>
<div class="slide">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/1.png" height="100" width="250" alt="" />
</div>
<div class="slide">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/1.png" height="100" width="250" alt="" />
</div>
<div class="slide">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/1.png" height="100" width="250" alt="" />
</div>
<div class="slide">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/1.png" height="100" width="250" alt="" />
</div> <div class="slide">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/1.png" height="100" width="250" alt="" />
</div> <div class="slide">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/1.png" height="100" width="250" alt="" />
</div>
<div class="slide">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/1.png" height="100" width="250" alt="" />
</div>
<div class="slide">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/2.png" height="100" width="250" alt="" />
</div>
<div class="slide">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/3.png" height="100" width="250" alt="" />
</div>
<div class="slide">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/4.png" height="100" width="250" alt="" />
</div>
<div class="slide">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/5.png" height="100" width="250" alt="" />
</div>
<div class="slide">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/6.png" height="100" width="250" alt="" />
</div>
<div class="slide">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/7.png" height="100" width="250" alt="" />
</div>
</div>
</div>
This is SASS version :
body {
align-items: center;
background: #E3E3E3;
display: flex;
height: 100vh;
justify-content: center;
}
#mixin white-gradient {
background: linear-gradient(to right, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
}
$animationSpeed: 10s;
// Animation
#keyframes scroll {
0% { transform: translateX(0); }
100% { transform: translateX(calc(-250px * 17))}
}
// Styling
.slider {
background: white;
box-shadow: 0 10px 20px -5px rgba(0, 0, 0, .125);
height: 100px;
margin: auto;
overflow:hidden;
position: relative;
width: 960px;
&::before,
&::after {
#include white-gradient;
content: "";
height: 100px;
position: absolute;
width: 200px;
z-index: 2;
}
&::after {
right: 0;
top: 0;
transform: rotateZ(180deg);
}
&::before {
left: 0;
top: 0;
}
.slide-track {
animation: scroll $animationSpeed linear infinite;
display: flex;
width: calc(250px * 14);
}
.slide {
height: 100px;
width: 250px;
}
}

Related

Image positioning in image gallery

I'm trying to keep leaderboard/photographer image always right top position even in responsive.
Here is my code
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial;
}
img {
position: relative;
overflow: hidden;
top: 0;
left: 0;
opacity: 1;
background-color: rgba(0, 0, 0, 0.5);
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.row {
display: -ms-flexbox;
/* IE10 */
display: flex;
-ms-flex-wrap: wrap;
/* IE10 */
flex-wrap: wrap;
padding: 0 20px;
}
.column {
-ms-flex: 25%;
/* IE10 */
flex: 25%;
max-width: 25%;
padding: 10px;
}
.column img {
margin-top: 20px;
vertical-align: middle;
}
#overlay:hover {
overflow: hidden;
top: 0;
left: 0;
opacity: 0.7;
background-color: rgba(0, 0, 0, 0.5);
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
#media screen and (max-width: 800px) {
.column {
-ms-flex: 50%;
flex: 50%;
max-width: 50%;
}
}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
#media screen and (max-width: 600px) {
.column {
-ms-flex: 100%;
flex: 100%;
max-width: 100%;
}
}
<html>
<body>
<div class="row">
<div class="column">
<img src="https://www.w3schools.com/w3images/wedding.jpg" id="overlay" style="width:100%">
<img src="https://www.w3schools.com/w3images/rocks.jpg" id="overlay" style="width:100%">
<img src="https://www.w3schools.com/w3images/falls2.jpg" id="overlay" style="width:100%">
<img src="https://www.w3schools.com/w3images/paris.jpg" id="overlay" style="width:100%">
<img src="https://www.w3schools.com/w3images/nature.jpg" id="overlay" style="width:100%">
<img src="https://www.w3schools.com/w3images/mist.jpg" id="overlay" style="width:100%">
<img src="https://www.w3schools.com/w3images/paris.jpg" id="overlay" style="width:100%">
</div>
<div class="column">
<img src="https://www.w3schools.com/w3images/underwater.jpg" id="overlay" style="width:100%">
<img src="https://www.w3schools.com/w3images/ocean.jpg" id="overlay" style="width:100%">
<img src="https://www.w3schools.com/w3images/wedding.jpg" id="overlay" style="width:100%">
<img src="https://www.w3schools.com/w3images/mountainskies.jpg" id="overlay" style="width:100%">
<img src="https://www.w3schools.com/w3images/rocks.jpg" id="overlay" style="width:100%">
<img src="https://www.w3schools.com/w3images/underwater.jpg" id="overlay" style="width:100%">
</div>
<div class="column">
<img src="https://www.w3schools.com/w3images/wedding.jpg" id="overlay" style="width:100%">
<img src="https://www.w3schools.com/w3images/rocks.jpg" id="overlay" style="width:100%">
<img src="https://www.w3schools.com/w3images/falls2.jpg" id="overlay" style="width:100%">
<img src="https://www.w3schools.com/w3images/paris.jpg" id="overlay" style="width:100%">
<img src="https://www.w3schools.com/w3images/nature.jpg" id="overlay" style="width:100%">
<img src="https://www.w3schools.com/w3images/mist.jpg" id="overlay" style="width:100%">
<img src="https://www.w3schools.com/w3images/paris.jpg" id="overlay" style="width:100%">
</div>
<div class="column">
<a class="js-leaderboard" href="#"><img src="https://i.imgur.com/C5vLv9p.png" id="overlay" style="width:100%"></a>
<img src="https://www.w3schools.com/w3images/ocean.jpg" id="overlay" style="width:100%">
<img src="https://www.w3schools.com/w3images/wedding.jpg" id="overlay" style="width:100%">
<img src="https://www.w3schools.com/w3images/mountainskies.jpg" id="overlay" style="width:100%">
<img src="https://www.w3schools.com/w3images/rocks.jpg" id="overlay" style="width:100%">
<img src="https://www.w3schools.com/w3images/underwater.jpg" id="overlay" style="width:100%">
</div>
</div>
</div>
</body>
</html>
If you see a pexels website, a leaderboard always keeps positioning the same on the right top. Can I do this? moreover, I have added a class js-leaderboard for this image.

This can be done using order property of flex-items. I have re-ordered the columns in small screens.
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial;
}
img {
position: relative;
overflow: hidden;
top: 0;
left: 0;
opacity: 1;
background-color: rgba(0, 0, 0, 0.5);
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.row {
display: -ms-flexbox;
/* IE10 */
display: flex;
-ms-flex-wrap: wrap;
/* IE10 */
flex-wrap: wrap;
padding: 0 20px;
}
.column {
-ms-flex: 25%;
/* IE10 */
flex: 25%;
max-width: 25%;
padding: 10px;
}
.column img {
margin-top: 20px;
vertical-align: middle;
}
#overlay:hover {
overflow: hidden;
top: 0;
left: 0;
opacity: 0.7;
background-color: rgba(0, 0, 0, 0.5);
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
#media screen and (max-width: 800px) {
.column {
-ms-flex: 50%;
flex: 50%;
max-width: 50%;
order: 3;
}
.row > .column:first-child{
order: 1;
}
.right-top-col{
order: 2;
}
}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
#media screen and (max-width: 600px) {
.column {
-ms-flex: 100%;
flex: 100%;
max-width: 100%;
}
}
<html>
<body>
<div class="row">
<div class="column">
<img src="https://www.w3schools.com/w3images/wedding.jpg" id="overlay" style="width:100%">
<img src="https://www.w3schools.com/w3images/rocks.jpg" id="overlay" style="width:100%">
<img src="https://www.w3schools.com/w3images/falls2.jpg" id="overlay" style="width:100%">
<img src="https://www.w3schools.com/w3images/paris.jpg" id="overlay" style="width:100%">
<img src="https://www.w3schools.com/w3images/nature.jpg" id="overlay" style="width:100%">
<img src="https://www.w3schools.com/w3images/mist.jpg" id="overlay" style="width:100%">
<img src="https://www.w3schools.com/w3images/paris.jpg" id="overlay" style="width:100%">
</div>
<div class="column">
<img src="https://www.w3schools.com/w3images/underwater.jpg" id="overlay" style="width:100%">
<img src="https://www.w3schools.com/w3images/ocean.jpg" id="overlay" style="width:100%">
<img src="https://www.w3schools.com/w3images/wedding.jpg" id="overlay" style="width:100%">
<img src="https://www.w3schools.com/w3images/mountainskies.jpg" id="overlay" style="width:100%">
<img src="https://www.w3schools.com/w3images/rocks.jpg" id="overlay" style="width:100%">
<img src="https://www.w3schools.com/w3images/underwater.jpg" id="overlay" style="width:100%">
</div>
<div class="column">
<img src="https://www.w3schools.com/w3images/wedding.jpg" id="overlay" style="width:100%">
<img src="https://www.w3schools.com/w3images/rocks.jpg" id="overlay" style="width:100%">
<img src="https://www.w3schools.com/w3images/falls2.jpg" id="overlay" style="width:100%">
<img src="https://www.w3schools.com/w3images/paris.jpg" id="overlay" style="width:100%">
<img src="https://www.w3schools.com/w3images/nature.jpg" id="overlay" style="width:100%">
<img src="https://www.w3schools.com/w3images/mist.jpg" id="overlay" style="width:100%">
<img src="https://www.w3schools.com/w3images/paris.jpg" id="overlay" style="width:100%">
</div>
<div class="right-top-col column">
<a class="js-leaderboard" href="#"><img src="https://i.imgur.com/C5vLv9p.png" id="overlay" style="width:100%"></a>
<img src="https://www.w3schools.com/w3images/ocean.jpg" id="overlay" style="width:100%">
<img src="https://www.w3schools.com/w3images/wedding.jpg" id="overlay" style="width:100%">
<img src="https://www.w3schools.com/w3images/mountainskies.jpg" id="overlay" style="width:100%">
<img src="https://www.w3schools.com/w3images/rocks.jpg" id="overlay" style="width:100%">
<img src="https://www.w3schools.com/w3images/underwater.jpg" id="overlay" style="width:100%">
</div>
</div>
</div>
</body>
</html>

Left right button for slider like Bootstrap carousel

I Want to slide my images right and left on click. I use jquery for that. but problem is that when I continue to click on right the div goes right and blank space display. I tried but it not fixes. I'm a newbie in jquery.
<!DOCTYPE html><html class=''>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style class="cp-pen-styles">
.row_outer {
*overflow-x: auto;
width: 100%;
}
.row__inner {
-webkit-transition: 450ms -webkit-transform;
transition: 450ms -webkit-transform;
transition: 450ms transform;
transition: 450ms transform, 450ms -webkit-transform;
font-size: 0;
white-space: nowrap;
margin: 70.3125px 0;
padding-bottom: 10px;
}
.tile {
position: relative;
display: inline-block;
width: 326px;
height: 192px;
margin-right: 10px;
font-size: 20px;
cursor: pointer;
-webkit-transition: 450ms all;
transition: 450ms all;
-webkit-transform-origin: center left;
transform-origin: center left;
}
.tile__img {
width: 326px;
height: 192px;
-o-object-fit: cover;
object-fit: cover;
}
.tile__details {
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 0;
font-size: 10px;
opacity: 0;
background: -webkit-linear-gradient(bottom, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 100%);
background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 100%);
-webkit-transition: 450ms opacity;
transition: 450ms opacity;
}
.tile__details:after,
.tile__details:before {
content: '';
position: absolute;
top: 50%;
left: 50%;
display: #000;
}
.tile__details:after {
margin-top: -25px;
margin-left: -25px;
width: 50px;
height: 50px;
border: 3px solid #ecf0f1;
line-height: 50px;
text-align: center;
border-radius: 100%;
background: rgba(0,0,0,0.5);
z-index: 1;
}
.tile__details:before {
content: 'â–¶';
left: 0;
width: 100%;
font-size: 30px;
margin-left: 7px;
margin-top: -18px;
text-align: center;
z-index: 2;
color: #fff;
}
.tile:hover .tile__details {
opacity: 1;
}
.tile__title {
position: absolute;
bottom: 0;
padding: 10px;
color: #fff;
}
.row__inner:hover {
-webkit-transform: translate3d(-72.5px, 0, 0);
transform: translate3d(-72.5px, 0, 0);
}
.row__inner:hover .tile {
opacity: 0.3;
}
.row__inner:hover .tile:hover {
-webkit-transform: scale(1.5);
transform: scale(1.5);
opacity: 1;
}
.tile:hover ~ .tile {
-webkit-transform: translate3d(215px, 0, 0);
transform: translate3d(215px, 0, 0);
}
.buttons{
position: absolute;
width: 100%;
margin-right: 10px;
font-size: 20px;
margin-top: -190px;
}
.buttons button{
height: 100%;
padding: 7px 20px;
color: #fa8f33;
border: 1px solid
}
.left{
float: left;
}
.right{
float: right;
}
/* Sweep To Right */
.hvr-sweep-to-right {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px transparent;
position: relative;
-webkit-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.hvr-sweep-to-right:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #fa8f33;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.hvr-sweep-to-right:hover, .hvr-sweep-to-right:focus, .hvr-sweep-to-right:active {
color: white;
}
.hvr-sweep-to-right:hover:before, .hvr-sweep-to-right:focus:before, .hvr-sweep-to-right:active:before {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
/* Sweep To Left */
.hvr-sweep-to-left {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px transparent;
position: relative;
-webkit-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.hvr-sweep-to-left:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #fa8f33;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.hvr-sweep-to-left:hover, .hvr-sweep-to-left:focus, .hvr-sweep-to-left:active {
color: white;
}
.hvr-sweep-to-left:hover:before, .hvr-sweep-to-left:focus:before, .hvr-sweep-to-left:active:before {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
</style></head><body>
<div class="contain">
<div class="row_outer">
<div class="row__inner">
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-1.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
Top Gear
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img " src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-2.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
Top Gear
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img " src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-3.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
Top Gear
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-4.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
Top Gear
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-5.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
Top Gear
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-6.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
Top Gear
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-7.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
Top Gear
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-8.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
Top Gear
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-9.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
Top Gear
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-10.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
Top Gear
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-11.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
Top Gear
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-12.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
Top Gear
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-13.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
Top Gear
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-14.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
Top Gear
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-15.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
Top Gear
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-16.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
Top Gear
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-17.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
Top Gear
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-18.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
Top Gear
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-19.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
Top Gear
</div>
</div>
</div>
</div>
</div>
</div>
<div class="buttons">
<button class="left hvr-sweep-to-left " id="left"><span><i class="fa fa-angle-double-left" aria-hidden="true"></i>
</span></button>
<button href="" class="right hvr-sweep-to-right " id="right"><span><i class="fa fa-angle-double-right" aria-hidden="true"></i>
</span></button>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$( "#right" ).click(function() {
$( ".tile" ).animate({ "left": "+=365px" }, "1000" );
});
$( "#left" ).click(function(){
$( ".tile" ).animate({ "left": "-=365px" }, "1000" );
});
</script>
</body></html>

You can check this out jsfiddle link
var slideIndex = 1;
var length = $(".tile").length;
$( "#right" ).click(function() {
if(slideIndex != 1){
$( ".tile" ).animate({ "left": "+=365px" }, "1000" );
slideIndex--;
}
});
$( "#left" ).click(function() {
if(slideIndex >= length-1 ){
}else{
$( ".tile" ).animate({ "left": "-=365px" }, "1000" );
slideIndex++;
}
});

Thanks to Every one who looked into it. I Fix my problem.
This is my Solution :
var $par = $('.row_outer').scrollLeft(546) ;
$('.right, .left').click(function( e ) {
e.preventDefault();
var n = $(this).hasClass("left") ? "+=182" : "-=182";
$par.animate({scrollLeft: n});
});

CSS - How to align photos to scroll across a page with a hover feature?

I am trying to align multiple images across the page with a horizontal flow scrollbar. I also want each image to have have a separate hover image. I can get one or the other but not both together. I am sure it is an easy process but I am new to HTML/CSS.
Here is what I have with hover but without horizontal scrollbar:
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
width: 50%;
}
.image {
opacity: 1;
display: block;
width: 100%;
height: auto;
transition: .5s ease;
backface-visibility: hidden;
}
.middle {
transition: .5s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%)
}
.container:hover .image {
opacity: 0.3;
}
.container:hover .middle {
opacity: 1;
}
</style>
</head>
<body>
<div class="container">
<img src="lb.jpg" alt="" class="image" style="width:100%">
<div class="middle">
<img src="bungalow.jpg" alt."">
</div>
</div>
<div class="container">
<img src="lb2.jpg" alt="" class="image" style="width:100%">
<div class="middle">
<img src="bungalow2.jpg" alt."">
</div>
</div>
<div class="container">
<img src="lb3.jpg" alt="" class="image" style="width:100%">
<div class="middle">
<img src="bungalow3.jpg" alt."">
</div>
</div>
</body>
</html>
Here is what I have with horizontal scrollbar but without hover:
<!DOCTYPE html>
<html>
<head>
<style>
.slide-container {
overflow: auto;
white-space: nowrap;
}
</style>
</head>
<body>
<div class="slide-container">
<img id="slideone" src="lb.jpg" />
<img id="slidetwo" src="lb2.jpg" />
<img id="slidethree" src="lb3.jpg" />
<img id="slidefour" src="lb4.jpg" />
</div>
</body>
</html>
My goal is to combine the two!

Are you looking for all the images to align horizontally with a scroll-bar?. If yes you need to create a wrapper with fixed width and overflow-x: auto
.parent-container {
width: 1000px;
height: 400px;
overflow: auto;
overflow-y: hidden;
margin: 0 auto;
white-space: nowrap
}
https://codepen.io/srajagop/pen/ybmrNP

Basically you need to have a div as a container and one div as a parent for each two images, and give them proper position. I make an example for you, hopefully this is what you are looking for :
UPDATED
HTML :
<div class="imgHolder">
<div class="parentImage">
<img src="http://lorempixel.com/400/200/sports/1" alt="" class="image1"/>
<img src="http://lorempixel.com/400/200/sports/2" alt="" class="image2"/>
</div>
<div class="parentImage">
<img src="http://lorempixel.com/400/200/sports/3" alt="" class="image1"/>
<img src="http://lorempixel.com/400/200/food/1" alt="" class="image2"/>
</div>
CSS :
.imgHolder{
overflow:scroll;
height:230px;
width:400px;
display:inline-flex;
}
.imgHolder img {
width:400px;
height:200px;
}
.parentImage{
position: relative;
top: 0;
left: 0;
}
.parentImage > .image1{
position: relative;
top: 0;
left: 0;
}
.parentImage > .image2{
position: absolute;
top: 0px;
left: 0px;
opacity:0;
padding:5px 10px 5px 10px;
width:95%;
}
.parentImage:hover > .image1{
opacity:0.3;
}
.parentImage:hover > .image2{
opacity:1;
}
https://jsfiddle.net/emilvr/f9xd75uv/2/

Div that doesnt cover its content

I have really strange problem.
I have got webpage, that load from ajax second page into Content Div.
The main problem, is that Content div doesn't care about covering all items in him.
There is Code:
.Main_Loaded {
display: flex;
flex-direction: column;
min-width: 99%;
height: auto;
position: absolute;
bottom: 90px;
background-color: grey;
height: auto;
align-self: center;
justify-content: center;
text-align: center;
vertical-align: middle;
z-index: 2;
animation: Colour_Change_Grey;
animation-iteration-count: 1;
animation-duration: 5s;
transition: all 1s;
border-radius: 15px;
}
.Main_Loaded .Title {
margin-top: 30px;
height: 15%;
}
.Main_Loaded .Title span {
font: Serfi;
font-size: 16px;
animation: Show_up;
animation-iteration-count: 1;
animation-duration: 3s;
}
.Main_Loaded .Content {
margin-bottom: 20px;
height: 80%;
display: flex;
flex-direction: row;
}
.Main_Loaded .Content #Image {
min-height: 700px;
width: 45%;
overflow: hidden;
border: 3px solid black;
animation: Show_up;
animation-duration: 3s;
}
.Main_Loaded .Content #Image img {
animation: Show_up;
animation-duration: 0.5s;
animation-iteration-count: 1;
animation-delay: 2s;
}
.Main_Loaded .Content #Info {
animation: Show_up;
animation-duration: 3s;
border: 3px solid white;
width: 55%;
}
<div class="Main_Loaded">
<div class="Title">
<span>
Nasza oferta
</span>
</div>
<div class="Content">
<div id="Image">
<div class="owl-carousel">
<img class="img" class="owl-lazy" src="img/1.jpg" />
<img class="img" class="owl-lazy" src="img/2.jpg" />
<img class="img" class="owl-lazy" src="img/3.jpg" />
<img class="img" class="owl-lazy" src="img/4.jpg" />
<img class="img" class="owl-lazy" src="img/5.jpg" />
<img class="img" class="owl-lazy" src="img/6.jpg" />
<img class="img" class="owl-lazy" src="img/7.jpg" />
<img class="img" class="owl-lazy" src="img/8.jpg" />
<img class="img" class="owl-lazy" src="img/9.jpg" />
<img class="img" class="owl-lazy" src="img/10.jpg" />
<img class="img" class="owl-lazy" src="img/11.jpg" />
<img class="img" class="owl-lazy" src="img/12.jpg" />
<img class="img" class="owl-lazy" src="img/13.jpg" />
<img class="img" class="owl-lazy" src="img/14.jpg" />
<img class="img" class="owl-lazy" src="img/15.jpg" />
<img class="img" class="owl-lazy" src="img/16.jpg" />
<img class="img" class="owl-lazy" src="img/17.jpg" />
<img class="img" class="owl-lazy" src="img/18.jpg" />
<img class="img" class="owl-lazy" src="img/19.jpg" />
<img class="img" class="owl-lazy" src="img/20.jpg" />
<img class="img" class="owl-lazy" src="img/22.jpg" />
<img class="img" class="owl-lazy" src="img/21.jpg" />
</div>
</div>
<div id="Info">
dfsdfdsfdsdsadasdasfgjdfklgndfgjbdklfjgnhdklfjghklj
</div>
</div>
</div>
And there is page, to see error.[DELETED]

The Problem is JQuery AJAX.
After copy content into one file, and left code as is, the scripts start working :)

Netflix style image continuous carousels with mouse-over with Bootstrap support

Can someone suggest any Twitter Bootstrap supported jquery plugins that can provide Netflix style continuously scrolling image carousel with mouse-over?
I have already explored the carousel provided in Bootstrap JS library but it requires click of button and is not continuously scrolling, but instead just scrolls the full set of images under an item.
Any info of such cool plugins is greatly appreciated

Though not bootstrap/jquery based, but even better (pure css!), I came across one which is a decent place to start at and extend
HTML:
<div class="contain">
<h1>Pure CSS Netflix Video Carousel</h1>
<p>
Inspired by Eli White's article Performant CSS Animations: Netflix Case Study, his example pen, and Matt Taylor's CSS-only version.
</p>
<div class="row">
<div class="row__inner">
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-1.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
Top Gear
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-2.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
Top Gear
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-3.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
Top Gear
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-4.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
Top Gear
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-5.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
Top Gear
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-6.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
Top Gear
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-7.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
Top Gear
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-8.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
Top Gear
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-9.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
Top Gear
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-10.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
Top Gear
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-11.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
Top Gear
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-12.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
Top Gear
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-13.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
Top Gear
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-14.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
Top Gear
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-15.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
Top Gear
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-16.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
Top Gear
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-17.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
Top Gear
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-18.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
Top Gear
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-19.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
Top Gear
</div>
</div>
</div>
</div>
</div>
</div>
CSS:
body,
html {
padding: 0 10px;
margin: 0;
background: #0e0f11;
color: #ecf0f1;
font-family: 'Open Sans', sans-serif;
min-height: 100vh;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
}
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
h1,
p {
text-align: center;
}
p {
width: 100%;
max-width: 500px;
margin: auto;
}
a:link,
a:hover,
a:active,
a:visited {
-webkit-transition: color 150ms;
transition: color 150ms;
color: #95a5a6;
text-decoration: none;
}
a:hover {
color: #7f8c8d;
text-decoration: underline;
}
.contain {
width: 100%;
}
.row {
overflow: scroll;
width: 100%;
}
.row__inner {
-webkit-transition: 450ms -webkit-transform;
transition: 450ms -webkit-transform;
transition: 450ms transform;
transition: 450ms transform, 450ms -webkit-transform;
font-size: 0;
white-space: nowrap;
margin: 70.3125px 0;
padding-bottom: 10px;
}
.tile {
position: relative;
display: inline-block;
width: 250px;
height: 140.625px;
margin-right: 10px;
font-size: 20px;
cursor: pointer;
-webkit-transition: 450ms all;
transition: 450ms all;
-webkit-transform-origin: center left;
transform-origin: center left;
}
.tile__img {
width: 250px;
height: 140.625px;
-o-object-fit: cover;
object-fit: cover;
}
.tile__details {
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 0;
font-size: 10px;
opacity: 0;
background: -webkit-gradient(linear, left bottom, left top, from(rgba(0,0,0,0.9)), to(rgba(0,0,0,0)));
background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 100%);
-webkit-transition: 450ms opacity;
transition: 450ms opacity;
}
.tile__details:after,
.tile__details:before {
content: '';
position: absolute;
top: 50%;
left: 50%;
display: #000;
}
.tile__details:after {
margin-top: -25px;
margin-left: -25px;
width: 50px;
height: 50px;
border: 3px solid #ecf0f1;
line-height: 50px;
text-align: center;
border-radius: 100%;
background: rgba(0,0,0,0.5);
z-index: 1;
}
.tile__details:before {
content: 'â–¶';
left: 0;
width: 100%;
font-size: 30px;
margin-left: 7px;
margin-top: -18px;
text-align: center;
z-index: 2;
}
.tile:hover .tile__details {
opacity: 1;
}
.tile__title {
position: absolute;
bottom: 0;
padding: 10px;
}
.row__inner:hover {
-webkit-transform: translate3d(-62.5px, 0, 0);
transform: translate3d(-62.5px, 0, 0);
}
.row__inner:hover .tile {
opacity: 0.3;
}
.row__inner:hover .tile:hover {
-webkit-transform: scale(1.5);
transform: scale(1.5);
opacity: 1;
}
.tile:hover ~ .tile {
-webkit-transform: translate3d(125px, 0, 0);
transform: translate3d(125px, 0, 0);
}

Categories

Resources