JSFiddle - React, Tailwind, and code Playground

by JohannesJo

HTML

<div id="gallery-wrapper" class="clearfix">
	<div id="gallery-menu" class="fleft">
		<ul>
			<li>Gallery1</li>
			<li>Gallery2</li>
			<li>Gallery3</li>
		</ul>
	</div>
	<div id="slider">
		<ul>
			<li><img src="assets/img/gallery/sliderimg1.jpg" alt="sliderimg1"></li>
			<li><img src="assets/img/gallery/sliderimg2.jpg" alt="sliderimg2"></li>
			<li><img src="assets/img/gallery/sliderimg3.jpg" alt="sliderimg3"></li>
			<li><img src="assets/img/gallery/sliderimg4.jpg" alt="sliderimg4"></li>
		</ul>
	</div>
	<div id="slider-nav">
	<button data-dir="prev">Prev</button>
	<button data-dir="next">Next</button>
	</div>
</div>

CSS

*{padding: 0 ; margin: 0 ;}
li
{
   list-style: none;
}
#gallery-wrapper
{
	border-left:220px solid rgb(243,239,223);
	height: 75%;
}
#gallery-menu
{
	width:220px;
	margin-left: -220px;
	text-align: center;
}
#slider
{
	width: 100%;
	height: 100%;
	overflow: hidden;
}
#slider ul
{
	width: 750%;

}
#slider ul li 
{
	width:100%;
	float:left;
	margin-right: 5px;
}
#slider ul li img
{
	width: 100%;
}

JavaScript

$(function() {
var sliderUL = $("div#slider").children("ul"),
imgs = sliderUL.find("img"),
imgWidth = imgs[0].width+5,
imgsLen = imgs.length,
current = 1 ; //default kurš img ir 
totalImgsWidth = imgsLen * imgWidth ;

$("#slider-nav").find("button").on("click", function(){
var direction = $(this).data("dir"), // uz kuru pusi slaideris iet
loc = imgWidth; 
(direction === "next") ? ++current : --current; //ja direction next tad ++ ja nē tad --

  //pirmā bilde
  if ( current === 0)
  {
    current = imgsLen;
    direction = "next" ; 
  } else if ( current -1 === imgsLen){ // ja uz pēdējā
    current = 1;
    loc = 0; //ja beigās tad nostāda uz 0 marginu
  }
  transition(sliderUL, loc, direction);

});
function transition( container, loc, direction) {
  var unit; // vai nu + vai -, lai zin uz kuru pusi jaiet
  if (direction && loc !== 0)
  {
    unit = ( direction === "next") ? "-=" : "+=" // tas pats kas if
  }
  console.log(unit);
  console.log(loc);
  console.log(direction);
  container.animate({
    "margin-left" : unit ? (unit + loc) : loc 
  })

}
}); // slidera funkcijas beigas