Develop Reference

Javascript interfering with CSS Transition

I've recently started work on a basic landing-page website. Part of the page is a basic image slider with both the auto-nav and the manual nav being powered by JS. I got everything working but for one thing: I just can't figure out how to get the smooth transition between images - as seen in this example - to work. I figured out the problem after reading some related questions on Stackoverflow: To make the Slideshow work I'm using slides[i].style.display = "none"; and slides[slideIndex-1].style.display = "block"; to update the css code handling the 'display' element - this over rights the 'transition: 2s' css code one would need for the simple slide animation as seen in the video.
As I'm terribly new to Web development I could not wrap my head around possible solutions posted here on Stackoverflow and would really appreciate anyone that could help me out with an answer to my specific problem or an alternative way to solve it.
Cheers,
Jerome
var slideIndex = 1;
showSlides(slideIndex);
// Next/previous controls
function plusSlides(n) {
showSlides(slideIndex += n);
}
// Thumbnail image controls
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("item");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = slides.length
}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " active";
}
//automatic
var slideIndexAuto = 0;
showSlidesAuto();
function showSlidesAuto() {
var i;
var slides = document.getElementsByClassName("item");
var dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
dots[i].className = dots[i].className.replace(" active", "");
}
slideIndexAuto++;
if (slideIndexAuto > slides.length) {
slideIndexAuto = 1
}
slides[slideIndexAuto - 1].style.display = "block";
dots[slideIndexAuto - 1].className += " active";
setTimeout(showSlidesAuto, 5000);
}
.slider {
width: 65%;
max-width: 940px;
height: 500px;
border-radius: 0.25rem;
position: relative;
overflow: hidden;
}
.slider .left-slide,
.slider .right-slide {
position: absolute;
height: 40px;
width: 40px;
background-color: #444444;
border-radius: 50%;
color: #ffffff;
font-size: 20px;
top: 50%;
cursor: pointer;
margin-top: -20px;
text-align: center;
line-height: 40px;
}
.slider .left-slide:hover,
.slider .right-slide:hover {
box-shadow: 0px 0px 10px black;
background-color: #29a8e2;
}
.slider .left-slide {
left: 30px;
}
.slider .right-slide {
right: 30px;
}
.slider .slider-items .item img {
width: 100%;
height: 500px;
display: block;
}
.slider .slider-items .item {
position: relative;
transition: 4s;
}
.slider .slider-items .item .caption {
position: absolute;
width: 100%;
height: 100%;
bottom: 0px;
left: 0px;
background-color: rgba(0, 0, 0, .5);
}
<div class="slider">
<div class="slider-items">
<div class="item fade">
<img src="/images/cs-slider-high.jpg" />
<div class="caption">
<p class="caption-text">COMING</p>
<p class="caption-text">OKTOBER 10th</p>
</div>
</div>
<div class="item fade">
<img src="/images/building-slider.jpg" />
<div class="caption">
<p class="caption-text-2">Blackstoneroad 109</br>
</p>
</div>
</div>
<div class="item fade">
<img src="/images/kontact-slider.jpg" />
<div class="caption">
<p class="caption-text-3">Coffee<br>Drinks<br>Food<br>& More</p>
</div>
</div>
<div class="item fade">
<img src="/images/seminar-slider.jpg" />
<div class="caption">
<p class="caption-text-3">Seminar Rooms<br>Inspiration<br>Shopping<br>& More</p>
</div>
</div>
</div>
<!-- Next and previous buttons -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<!-- The dots/circles -->
<div class="align-text-center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>

How is this: http://jsfiddle.net/lharby/qox05y96/
For simplification I have stripped out the dot animation (although that code is closer to the effect you want).
Here is the simplified JS:
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("item");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = slides.length
}
for (i = 0; i < slides.length; i++) {
slides[i].classList.remove('active'); // this is updated
}
slides[slideIndex - 1].className += " active";
}
//automatic
var slideIndexAuto = 0;
showSlidesAuto();
function showSlidesAuto() {
var i;
var slides = document.getElementsByClassName("item");
var dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].classList.remove('active'); // this is updated
}
slideIndexAuto++;
if (slideIndexAuto > slides.length) {
slideIndexAuto = 1
}
slides[slideIndexAuto - 1].classList.add('active'); // this is updated
setTimeout(showSlidesAuto, 4000);
}
This means we also have to change the css. display none/block is harder to animate with css transitions. So I have used opacity: 0/1 and visibility: hidden/visible. However one other trade off is that that the item elements cannot be positioned relatively this would stack them on top of one another (or side by side) usually for an animated slideshow you would use position absolute for each slide, but I realise that causes you another issue.
CSS:
.slider .slider-items .item {
visibility: hidden;
opacity: 0;
transition: 4s;
}
.slider .slider-items .item.active {
visibility: visible;
opacity: 1;
transition: 4s;
}
At least now all of the css is handled within the css and the js purely adds or removes a class name which I feel makes it a bit easier to update.

There are priorities as far as what CSS deems should happen.
Take a look at this and let me know if it changes anything for you. If not I'll try and run the code and fix your errors. I want to let you know in advance, I am a pure JS developer. When I need CSS or HTML I create it in JS. I want you to try first, thus it will make you a better developer.
https://www.thebookdesigner.com/2017/02/styling-priorities-css-for-ebooks-3/

Home Page Banner Slideshow Not Functioning

I'm trying to have an image slideshow with change captions on a home page I'm working on. I was using w3schools as the tutorial and I have it working on there, but when I put the code into my text editor nothing happens; nothing is rendering. I'm using Atom and running the code in its html preview screen and have the file open in my browser. I'm using external CSS and JavaScript files and using css-grid for the layout.
Here's my HTML:
<div class="slideshow-container">
<div class="mySlides fade">
<img src="headerpark.jpg" style="width:100%">
<div class="text">Caption One</div>
</div>
<div class="mySlides fade">
<img src="headerpark2.jpg" style="width:100%">
<div class="text">Caption Two</div>
</div>
<div class="mySlides fade">
<img src="headerpark3.jpg" style="width:100%">
<div class="text">Caption Three</div>
</div>
</div>
My CSS:
.mySlides {display: none}
.slideshow-container {
grid-area: banner;
height: auto;
max-height: 100vh;
position: relative;
justify-self: stretch;
}
.slideshow-container img {
vertical-align: middle;
}
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
And lastly my JavaScript:
var slideIndex = 0;
showSlides(slideIndex);
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 1}
slides[slideIndex-1].style.display = "block";
setTimeout(showSlides, 5000);
}

Your code looks fine. Try copying it into an online IDE such as codepen.io and see if it works. It may just be your browser (emulator?).

It was trying to set block on the first slide before the slides collection existed, making sure slides is not undefined before calling that line fixes it.
var slideIndex = 0;
showSlides(slideIndex);
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
console.log(slideIndex);
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 1}
if( typeof slides[slideIndex-1] !== 'undefined') {
slides[slideIndex-1].style.display = "block";
}
setTimeout(showSlides, 5000);
}
Now if you want to get a little fancier, this is a solution from a friend that creates a class so you can do things like instantiate it with options like time, or create a pause. Both solutions work with your code just by replacing the JS
class Slideshow {
constructor({delay = 5000, selector} = {}) {
this.delay = delay
this.index = 0
this.selector = selector
this.timeoutRef = undefined
}
play() {
console.log(this.index)
const slides = document.querySelectorAll('.mySlides')
slides.forEach(slide => slide.style.display = 'none')
slides.item(this.index).style.display = 'block'
this.index = this.index >= slides.length - 1 ? 0 : this.index + 1
this.timeoutRef = setTimeout(this.play.bind(this), this.delay)
}
}
const slideshow = new Slideshow({ selector: '.mySlides'})
slideshow.play()

Crossfading Images

I am creating an image 'slider' to embellish a landing page on a site. I created a successful, functional slider, though hope to push this further...
I'm hoping to add in an element that creates crossfading images on click (once a tile is selected from beneath the main image space), such as is detailed on the site here (beneath Demo 6 -Fading between multiple images on click)
I have tried integrating the code on this site into the pre-existing JS I have added (within the HTML), though it appears to interfere with the existing elements. The JSFiddle for the current code is here.
#charset "utf-8";
/* CSS Document */
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
.main-slide {
height: 250px;
width: 750px;
margin: auto;
}
.selection-panel {
opacity: 0.6;
filter: alpha(opacity=60);
}
.selection-panel:hover {
opacity:1.0;
filter: alpha(opacity=100);
}
.selection-panel-off {
opacity: 1.0;
filter: alpha(opacity=100);
}
.margins {
margin-top: 16px!important;
margin-bottom: 16px!important;
}
.image-spacing,.image-spacing>.single-col {
padding: 0 8px;
}
.single-col {
float: left;
width: 100%;
}
.single-col.third {
width: 33.33333%;
}
.image-spacing::after,.image-spacing::before {
content: "";
display: table;
clear: both;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Homepage Baner Module</title>
<link rel="stylesheet" href="formatting.css" type="text/css" media="screen">
<style>
.mySlides {display:none}
.demo {cursor:pointer}
</style>
</head>
<body>
<div class="main-image" style="max-width:750px">
<img class="mySlides" src="https://dummyimage.com/750x250/ff5100/fff" height="250px" width="100%">
<img class="mySlides" src="https://dummyimage.com/750x250/00ff51/fff" height="250px" width="100%">
<img class="mySlides" src="https://dummyimage.com/750x250/0055ff/fff" height="250px" width="100%">
<div class="margins image-spacing">
<div class="single-col third">
<img class="demo selection-panel" src="https://dummyimage.com/750x250/ff5100/fff" style="width:100%" onclick="currentDiv(1)">
</div>
<div class="single-col third">
<img class="demo selection-panel" src="https://dummyimage.com/750x250/00ff51/fff" style="width:100%" onclick="currentDiv(2)">
</div>
<div class="single-col third">
<img class="demo selection-panel" src="https://dummyimage.com/750x250/0055ff/fff" style="width:100%" onclick="currentDiv(3)">
</div>
</div>
</div>
<script>
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function currentDiv(n) {
showDivs(slideIndex = n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" selection-panel-off", "");
}
x[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " selection-panel-off";
}
</script>
</body>
</html>

Here's one way to do this. This example assumes your images will all fit in the same size container nicely. If not, you may want to switch to background images. First, we'll put all the .mySlides in their own container element:
<div class="slides-container">
<img class="mySlides initopacity" src="https://dummyimage.com/750x250/ff5100/fff" height="250px" width="100%">
<img class="mySlides" src="https://dummyimage.com/750x250/00ff51/fff" height="250px" width="100%">
<img class="mySlides" src="https://dummyimage.com/750x250/0055ff/fff" height="250px" width="100%">
</div>
Then we'll position those slides absolutely, relative to the container:
.slides-container{
width: 750px;
height: 250px;
position: relative;
overflow: hidden;
}
.mySlides {
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
This way, they're all on top of each other. Now, you'll notice, they all have the opacity of 0, but the first .mySlide element has a class called .initopacity. That one we'll keep visible on load:
.initopacity {
opacity: 1;
}
Now, all we need is a way to change the opacity on each slide upon click. We'll use some transitions for that:
.fadeout {
opacity: 0;
transition: opacity 1s linear;
}
.fadein {
opacity: 1;
transition-delay: 1s;
transition-property: opacity;
transition-duration: 1s;
}
So now, our showDivs function just adds and removes classes, instead of changing the display properties:
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length}
for (i = 0; i < x.length; i++) {
/* x[i].style.display = "none"; */
x[0].classList.remove('initopacity');
x[i].classList.remove('fadein');
x[i].classList.add('fadeout');
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" selection-panel-off", "");
}
x[slideIndex-1].classList.remove('fadeout')
x[slideIndex-1].classList.add('fadein')
/* x[slideIndex-1].style.display = "block"; */
dots[slideIndex-1].className += " selection-panel-off";
}
See fiddle: https://jsfiddle.net/pt5bLxv2/87/

Run animation when element is visible - custom javascript

I am creating a website with few animation, below is the piece of javascript and css which is revealing image from left to right
var i = 0;
var interval = setInterval(function () {
$('.mask').width(i + "%");
i++;
if (i == 101) {
clearInterval(interval);
}
}, 20);
.mask {
background:white;
max-width: 640px;
z-index:1;
height: 426px;
position: relative;
overflow: hidden;
}
.img {
width: 100%;
position: absolute;
top: 0;
left: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mask">
<div class="img">
<img src="https://beebom-redkapmedia.netdna-ssl.com/wp-content/uploads/2016/01/Reverse-Image-Search-Engines-Apps-And-Its-Uses-2016.jpg" />
</div>
</div>
and then an javascript which reveals image from right to left.
var i = 0;
var interval = setInterval(function () {
$('.mask3').css({ left: -i + "%" });
i++;
if (i === 0) {
clearInterval(interval);
}
}, 20);
.wrapper {
width: 640px;
height: 430px;
position: relative;
}
.mask3 {
position: absolute;
top: 0;
left: 0;
background:white;
width: 100%;
height: 100%;
z-index:1;
}
.img {
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index:0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="mask3">
</div>
<div class="img">
<img src="https://beebom-redkapmedia.netdna-ssl.com/wp-content/uploads/2016/01/Reverse-Image-Search-Engines-Apps-And-Its-Uses-2016.jpg" />
</div>
</div>
Now I am trying to load this animation only when div is being displayed, or user scroll down to specific div, and then the animation shall roll back.
I tried few of the scripts, but all of them guided to use if else statement although I am not able to pick anything which is working, can someone please help me out on this one.

This is a very rough answer, but you can do this if you want. You will still need to work on your animation function more to make it hide and then display based on how you want it to be.
var elem = $('.img'); //use a better identifier like an id.
var counter = 0
elem.hide();
function myAnimation() {
elem.show();
var i = 0;
var interval = setInterval(function () {
$('.mask').width(i + "%");
i++;
if (i == 101) {
clearInterval(interval);
}
}, 20);
counter++;
}
$(window).scroll(function(){
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elemTop = $(elem).offset().top;
var elemBottom = elemTop + $(elem).height();
if ((elemBottom <= docViewBottom) && (elemTop >= docViewTop) && counter < 1) {
myAnimation();
}
});
The counter is basically to animate it once, because you will trigger this animation on every scroll.

Javascript Slider doesn't work correctly with transition end

I don't know why people's are not answering this question.I'm making a horizontal infinite loop slider. What approach i'm using is making a ul container which has 3 images, for example if there are 3 images then clone the first image and place it to the end of the slider, same with last image make clone and place it before the first image. So now total images are 5. Default slider translation always start from first image not from clone one. Here is an example. What i'm facing is, I want to reset the slider after slider comes to the last clone image with same continuous loop like a carousel slider. I try using addEventListener with the event name transitionend but that event doesn't perform correctly and showing unsatisfied behavior. Is there a way to fix this?
(function () {
var resetTranslation = "translate3d(-300px,0px,0px)";
var elm = document.querySelector('.Working');
elm.style.transform = resetTranslation;
var arr = document.querySelectorAll('.Working li');
var clonefirst,
clonelast,
width = 300;
index = 2;
clonefirst = arr[0].cloneNode(true);
clonelast = arr[arr.length - 1].cloneNode(true);
elm.insertBefore(clonelast, arr[0]);
arr[arr.length - 1].parentNode.insertBefore(clonefirst, arr[arr.length - 1].nextSibling);
//Update
arr = document.querySelectorAll('.Working li');
elm.style.transition = 'transform 1.5s ease';
setInterval(function () {
elm.style.transform = 'translate3d(-' + index * width + 'px,0px,0px)';
if (index == arr.length - 1) {
elm.addEventListener('transitionend', function () {
elm.style.transform = resetTranslation;
});
index = 1;
}
index++;
}, 4000)
})();
*{
box-sizing: border-box;
}
.wrapper{
position: relative;
overflow: hidden;
height: 320px;
width: 300px;
}
.Working{
list-style: none;
margin: 0;
padding: 0;
position: relative;
width: 3125%;
}
.Working li{
position: relative;
float: left;
}
img{
max-width: 100%;
display: block;
}
.SubContainer:after{
display: table;
clear: both;
content: "";
}
<div class="wrapper">
<ul class="SubContainer Working">
<li> <img class="" src="http://i.imgur.com/HqQb9V9.jpg" /></li>
<li><img class="" src="http://i.imgur.com/PMBBc07.jpg" /></li>
<li><img class="" src="http://i.imgur.com/GRrGSxe.jpg" /></li>
</ul>
</div>

I've messed around with your code to hack in a fix: https://jsfiddle.net/rap8o3q0/
The changed part:
var currentItem = 1;
setInterval(function () {
var getWidth = window.innerWidth;
if(len === currentItem){
i = 1;
currentItem = 1;
} else {
currentItem++;
i++;
}
var val = 'translate3d(-' + (i-1) * getWidth + 'px,0px,0px)';
UnorderedListElement.style.transform = val;
}, 3000);

Your transition end event is not immediately fire because last transition doesn't computed when last clone image appear. You can easily achieve this thing by using setTimeout function and pass number of milliseconds to wait, after that reset the translation. I don't know it's an efficient solution but i think its easily done by using this function.
Now I'm fixing your code with this.
(function () {
var elm = document.querySelector('.Working');
var arr = document.querySelectorAll('.Working li');
var clonefirst,
clonelast,
width = 300;
index = 2;
clonefirst = arr[0].cloneNode(true);
clonelast = arr[arr.length - 1].cloneNode(true);
elm.insertBefore(clonelast, arr[0]);
arr[arr.length - 1].parentNode.insertBefore(clonefirst, arr[arr.length - 1].nextSibling);
//Update
arr = document.querySelectorAll('.Working li');
setInterval(function () {
$(elm).css({
'transform': 'translate3d(-' + (index * width) + 'px,0px,0px)',
'transition': 'transform 1.5s ease'
});
if (index == arr.length - 1) {
setTimeout(function () {
$(elm).css({'transform': 'translate3d(-300px,0px,0px)', 'transition': 'none'});
index = 1;
}, 1400);
}
index++;
}, 2000)
})();
* {
box-sizing: border-box;
}
.wrapper {
position: relative;
overflow: hidden;
height: 320px;
width: 300px;
margin-top: 8px;
}
.Working {
list-style: none;
margin: 0;
padding: 0;
position: relative;
transform: translateX(-300px);
width: 3125%;
}
.Working li {
position: relative;
float: left;
}
img {
max-width: 100%;
display: block;
}
.SubContainer:after {
display: table;
clear: both;
content: "";
}
#checkboxer:checked + .wrapper {
overflow: visible;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="checkboxer">Remove Overflow Hidden</label>
<input type="checkbox" id="checkboxer" name="checkboxer"/>
<div class="wrapper">
<ul class="SubContainer Working">
<li> <img class="" src="http://i.imgur.com/HqQb9V9.jpg" /></li>
<li><img class="" src="http://i.imgur.com/PMBBc07.jpg" /></li>
<li><img class="" src="http://i.imgur.com/GRrGSxe.jpg" /></li>
</ul>
</div>

To come back your slider in its first position, you need to trigger a transition end event after the last (3th) translation, That works only one time.
$(UnorderedListElement).one("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend", function ()
{
{
$(UnorderedListElement).css('transform', 'translate3d(0, 0, 0)');
}
});
But you need to make it to translate immediately. In link below you can see my slider that is very similar to yours, but works by absolute positioning and change the left property instead of transform.
Slider
Last thing: It is not a good idea to slide the hole of the image container. You must slide your images separately. In your way there is an obvious problem: When the page is sliding out the last image, there is not the next image to push it!

You can update your setInterval as
setInterval(function() {
var getWidth = window.innerWidth;
var val = 'translate3d(-' + i * getWidth + 'px,0px,0px)';
UnorderedListElement.style.transform = val;
i++;
if (i == 3) { //assuming three images here
i = 0
}
}, 3000)
var DomChanger;
(function() {
var listItem = document.querySelectorAll('.ah-slider li');
var len = listItem.length;
var getImage = document.querySelector('.ah-slider li img');
var UnorderedListElement = document.querySelector('.ah-slider');
var outerDiv = document.querySelector('.Slider');
UnorderedListElement.setAttribute('style', 'width:' + (len * 1000 + 215) + '%');
var i = 1;
DomChanger = function() {
for (var i = 0; i < len; ++i) {
listItem[i].setAttribute('style', 'width:' + window.innerWidth + 'px');
}
outerDiv.setAttribute('style', 'height:' + getImage.clientHeight + 'px');
};
setInterval(function() {
var getWidth = window.innerWidth;
var val = 'translate3d(-' + i * getWidth + 'px,0px,0px)';
UnorderedListElement.style.transform = val;
i++;
if (i == 3) {
i = 0
}
}, 3000)
})();
window.onload = function() {
DomChanger();
};
window.onresize = function() {
DomChanger();
};
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
background-color: #fff;
}
.Slider {
width: 100%;
margin: 50px 0 0;
position: relative;
overflow: hidden;
}
.ah-slider {
padding: 0;
margin: 0;
list-style: none;
position: relative;
transition: transform .5s ease;
}
.ah-slider li {
position: relative;
float: left;
}
.ah-slider li img {
max-width: 100%;
display: block;
}
.clearFix:after {
content: "";
display: table;
clear: both;
}
<div class="Slider">
<ul class="ah-slider clearFix">
<li>
<img class="" src="http://i.imgur.com/L9Zi1UR.jpg" title="" />
</li>
<li>
<img class="" src="http://i.imgur.com/FEcEwFs.jpg" title="" />
</li>
<li><img class="" src=http://i.imgur.com/hURSKNa.jpg" title="" /></li>
</ul>
</div>