A Pen by Attila Bakos

Thumbnail
This awesome code was written by abakos, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright abakos ©
  • HTML
  • CSS
  • JavaScript
    							<div class="img-carousel">
								<div>
									<img src="//farm6.static.flickr.com/5224/5658667829_2bb7d42a9c_m.jpg" />
								</div>
								<div>
									<img src="//farm6.static.flickr.com/5230/5638093881_a791e4f819_m.jpg" />
								</div>
							</div>

/*Downloaded from https://www.codeseek.co/abakos/a-pen-by-attila-bakos-JOgPjB */
    .img-carousel {
    margin: 50px auto;
    position: relative;
    width: 240px;
    height: 240px;
    padding: 10px;
    box-shadow: 0 0 20px rgba(0,0,0,0.4);

	> div {
		position: absolute;
		top: 10px;
		left: 10px;
		right: 10px;
		bottom: 10px;
	}
}



/*Downloaded from https://www.codeseek.co/abakos/a-pen-by-attila-bakos-JOgPjB */
    	// Image carousel on homepage
	$(".img-carousel > div:gt(0)").hide();

	setInterval(function() {
		$('.img-carousel > div:first')
			.fadeOut()
			.next()
			.fadeIn()
			.end()
			.appendTo('.img-carousel');
	}, 1000);

Comments