Card slider Code

Card Slider CSS

/* Customize as you like ... */

/* CARDS */

#cards {
  width: 1000px;
  margin: 0 auto 2.4rem;
  overflow: hidden;
  position: relative;
  border-top: 1px solid #3D3D3D;
  border-bottom: 1px solid #3D3D3D;
  padding: 2.4rem 0;
  font-family: 'Open Sans', Arial, sans-serif;
}

#cards p {
  max-width: none;
  font-size: 1.4rem;
  line-height: 1.8rem;
}

#cards ul {
  overflow: hidden;
  list-style: none;
  width: 1000px;
  height: 100%;
  transition: margin .2s ease-out;
}

#cardHolder {
  position: relative;
}

.card {
  display: inline-block;
  float: left;
  opacity: 0;
  padding: 2.4rem 0;
  width: 1000px;
  transition: margin .2s ease-out;
  transition: opacity .2s ease-out;
}

.card img {
  width: 45%;
  float: left;
  padding-left: 6rem;
}

.card h5, .card p {
  width: 50%;
  max-width: none;
  float: right;
  padding-right: 6rem;
}

.button {
  width: 4rem;
  cursor: pointer;
  opacity: .7;
  position: absolute;
  top: 45%;
}

.button:hover, .button:active {
  opacity: 1;
}

.previous {
  left: 0;
}

.next {
  right: 0;
}

.buttonHide {
  display: none;
}

.active {
  opacity: 1;
}

@media (max-width: 1200px) {
  #cards, .card {
    width: 900px;
  }
}

@media (max-width: 1000px) {
  #cards, .card {
    width: 700px;
  }
}

@media (max-width: 800px) {
  #cards, .card {
    width: 600px;
  }
  .card img {
    width: 100%;
    max-width: 280px;
    float: none;
    margin: 0 auto 2.4rem;
    display: block;
    padding-left: 0;
  }   
  .card h5, .card p {
    width: 100%;
    float: none;
    padding: 0 5rem;
  }
}

@media (max-width: 650px) {
  #cards, .card {
    width: 400px;
  }
}

@media (max-width: 440px) {
  #cards, .card {
    width: 300px;
  }
}

Card slider HTML

<!-- note, you'll need your own button images for the buttons, or you could use html buttons if you want -->

<div id="cards">
						<ul id="cardList">
							<li class="card active" id="card-1">
								<img class="customClassName" src="images/defaultImage.jpg" alt="#" />
								<h5>Card title here</h5>
								<p>Card content here.</p>
							</li>
							<li class="card active" id="card-12">
								<img class="customClassName" src="images/defaultImage.jpg" alt="#" />
								<h5>Card title here</h5>
								<p>Card content here.</p>
							</li>
							<li class="card active" id="card-3">
								<img class="customClassName" src="images/defaultImage.jpg" alt="#" />
								<h5>Card title here</h5>
								<p>Card content here.</p>
							</li>
							<li class="card active" id="card-4">
								<img class="customClassName" src="images/defaultImage.jpg" alt="#" />
								<h5>Card title here</h5>
								<p>Card content here.</p>
							</li>
							<li class="card active" id="card-5">
								<img class="licensePlate" src="images/defaultImage.jpg" alt="#" />
								<h5>Card title here</h5>
								<p>Card content here.</p>
							</li>
							<li class="card active" id="card-6">
								<img class="customClassName" src="images/defaultImage.jpg" alt="#" />
								<h5>Card title here</h5>
								<p>Card content here.</p>
							</li>

						</ul>
						<img class="button previous" src="images/buttonLeft.png" alt="#" />
						<img class="button next" src="images/buttonRight.png" alt="#" />
					</div>

				</div>

gistfile1.js

var cards = []; //create a placeholder for the card array

			$('.card').each(function(key, value) {
				var cardName = $(value).attr('id');
				var idBuilder = $("#" + cardName);
				cards.push(idBuilder);
			})

			//Setting up jquery pointers 
			var $cards = $('#cards') //set up a pointer to the cards container
			var $cardList = $("#cardList"); //set up a pointer to the cards list ul
			var $card = $('.card'); //set up a pointer to the cards
			var $nextButton = $('.next'); //set pointer to next button
			var $previousButton = $('.previous'); //set pointer to previous button

			var cardCounter = 0; // setting a counter of the array
			var currentCard = cards[cardCounter];
			var totalCards = cards.length; //get the total number of cards
			var cardWidth = $cards.width(); //grabbing the width of the card
			var listMargin = 0

			$cardList.css('width', totalCards * cardWidth); //setting the width of the list to be equal to the width of a card times total number of cards
			//clicking of the next button 
			function advanceCard() {
				listMargin -= cardWidth; //change list margin variable to be equal to less one card width
				$(cardList).css('marginLeft', listMargin)  // move the list that distance
				cardCounter ++; //change the card counter
				currentCard = cards[cardCounter]; //change the current card
				$card.removeClass('active'); //remove active class from cards to make opacity fade to 0
				currentCard.addClass('active'); //add active class to current card to make opacity fade to 1
				buttonRemover();
			}

			//clicking the previous button
			function previousCard() {
				listMargin += cardWidth; //change list margin variable to be equal to one more card width
				$(cardList).css('marginLeft', listMargin) //move the list that distance
				cardCounter --; //change the card counter
				currentCard = cards[cardCounter]; //change the current card
				$card.removeClass('active'); //remove active class from cards to make opacity fade to 0
				currentCard.addClass('active'); //add active class to current card to make opacity fade to 1
				buttonRemover();
			}

			function buttonRemover() {
				if (cardCounter === cards.length - 1) {  
					$nextButton.addClass('buttonHide'); //if it's the last slide, remove the next button
				} else if ( $previousButton.hasClass('buttonHide') ) {
					$previousButton.toggleClass('buttonHide'); //if it's not the first slide, show the previous button
				} else if (cardCounter === 0) {
					$previousButton.addClass('buttonHide'); // if it's the first slide, remove the previous button
				} else if ( $nextButton.hasClass('buttonHide') ) {
					$nextButton.toggleClass('buttonHide'); //if it's not the last slide, show the next button
				}
			}

			$nextButton.click(advanceCard);
			$previousButton.click(previousCard)

			$('#cardList').on("swipeleft", function() {
				advanceCard();
			});
			$('#cardList').on("swiperight", function() {
				previousCard();
			});

			$(window).resize(function() {
				cardWidth = $cards.width();
				$cardList.css('width', totalCards * cardWidth);
				listMargin = 0 - cardWidth * cardCounter;
				$(cardList).css('marginLeft', listMargin);
			});

			buttonRemover();