A Pen by Ken Shoufer.

jQuery-Basic-Slider-(fade).markdown

jQuery Basic Slider (fade)

A Pen by Ken Shoufer on CodePen.

License.

script.js

var sliderInt = 1;

$(function () {
 	count = $('#slider img').size();

	$('#slider img').hide();
	$('#slider1').fadeIn(1000);
});

function prev () {
	newSlide = sliderInt - 1;
	showSlide(newSlide);
}

function next () {
	newSlide = sliderInt + 1;
	showSlide(newSlide);	
}

function showSlide (id) {

		if (id > count) {
			id = 1;
		}else if (id < 1) {
			id = count;
		}

		$('#slider img').hide();
		$('#slider' + id).fadeIn(1000);
		sliderInt = id;

}

slider.html

<div id="wrapper">
	<div id="slider">
		<img id="slider1" src="http://placehold.it/400x300/ff0000&text=slide1">
		<img id="slider2" src="http://placehold.it/400x300/00ff00&text=slide2">
		<img id="slider3" src="http://placehold.it/400x300/0000ff&text=slide3">
		<img id="slider4" src="http://placehold.it/400x300/333333&text=slide4">
	</div>
	<a href="#" id="left" onclick="prev(); return false;">Prev</a>
	<a href="#" id="right"onclick="next(); return false;">Next</a>
</div>

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.js"></script>

style.css

#wrapper {
	width: 400px;
	height: 300px;
	margin: 0 auto;
}

#slider {
  width: 400px;
  height: 300px;
  overflow: hidden;
  margin: 30px auto 0px;
}

#slider img {
	width: 400px;
	height: 300px;
	float: left;
	display: none;
}

a {
	padding: 5px 10px;
	background-color: #f0f0f0;
	margin-top: 10px;
	text-decoration: none;	
	color: #888;
}

a#left {
	float: left;
}

a#right {
	float: right;
}