moving image slide show??

[yashar]

Hello,
i would like to add a moving slide show on to my website, you can see an example of it here, https://css-tricks.com/examples/InfiniteCSSSlideshow/

1. i would like to add my own images instead of the one used for the demo, so when the page loads i would like to see my own images come one after another, one leaving from the left, and another come in from the right, and when you go over it by the mouse it gets faster like the one in the example.

2. also i will making a div for the gallery so i would like to add and fit the moving slide show in the div on my website, right now i am having issues with adding my own images, making it appear, move and roll, and some time stop or slow down, and get faster if i go over by the mouse. i understand you don’t have the images or files to look and fix but in order for you to see the code, and help me add this gallery to my website i have pasted the codes below, please let me know as soon as possible, thanks.

CSS
/*
CSS-Tricks Example
by Chris Coyier
https://css-tricks.com
*/

* {
margin: 0;
padding: 0;
}
body {
font: 14px Georgia, serif;
background: #999;
}

h1 {
font: 36px Georgia, Serif;
text-align: center;
padding: 40px;
}
p {
font: 12px Georgia, Serif;
text-align: center;
padding: 40px;
}

#page-wrap {
width: 60%;
max-width: 842px;
background: white;
margin: 100px auto;
position: relative;
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

#page-wrap:before, #page-wrap:after {
content: “”;
position: absolute;
z-index: 1;
top: 0;
bottom: 0;
width: 50px;
background: -webkit-linear-gradient(left, rgba(255,255,255,100), rgba(255,255,255,0));
}
#page-wrap:before {
left: 0;
}
#page-wrap:after {
right: 0;
background: -webkit-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,100));
}

HTML

Infinite CSS Slideshow

AND it speeds up when you hover over it AND it goes color AND it’s fluid width AND it has pretty good performance because it’s using 2D transforms and tricking the browser into using the GPU by saying it’s using 3D transforms. BUT it’s kinda laggy on mobile still. Maybe the image is just too big.

[yashar]

Infinite CSS Slideshow

AND it speeds up when you hover over it AND it goes color AND it’s fluid width AND it has pretty good performance because it’s using 2D transforms and tricking the browser into using the GPU by saying it’s using 3D transforms. BUT it’s kinda laggy on mobile still. Maybe the image is just too big.

[Author]

Posts