JSFiddle - React, Tailwind, and code Playground

by osipovngn

HTML

<body>
<div id='slider'>
<ul>
	<li class='pages' style="background-color:grey">
		<h1>even</h1>
		<a href="#" class="button-start" style="height:100px; width:100px">start game</a>
	</li>
	<li class='pages'>
		<div id='main-space'>
          <div id='upper-space'>
          <div id='left-upper'>
          <img src='img/left1.png' id='left-arrow'>
          </div>
          <div id='right-upper'>
          <p id='score'>34</p>
          </div>
          </div>
          <div id='num-space'><p id='num'>123</p></div>
          </div>
      </li>
	<li class='pages' style="background-color:#bbb">score page</li>
</ul>
</div>

CSS

html, body {
	margin: 0px;
	padding: 0px;
	background-color: green;
	width: 100%;
	height: 100%;
}
@font-face {
	font-family: Comfortaa;
	src: url(fonts/Comfortaa_Regular.ttf);
}
@font-face {
	font-family: ComfortaaThin;
	src: url(fonts/Comfortaa_Thin.ttf);
}
@font-face {
	font-family: QuicksandLight;
	src: url(fonts/Quicksand-Light.otf);
}
@font-face {
	font-family: Josefin;
	src: url(fonts/JosefinSans-Thin.ttf);
}
#slider {
  position: relative;
  overflow: hidden;
  height: 667px;
  width: 375px;
}
#slider ul {
  position: relative;
  margin: 0;
  padding: 0;
  height: 667px;
  width: 1125px;
  list-style: none;
}
#slider ul li {
  float: left;
  margin: 0;
  padding: 0;
  height: 667px;
  width: 375px;
  text-align: center;
  background-color: #eCf0f1;
}
#main-space {
	background-color: #eCf0f1;
	height: 667px;
	width: 375px;
}
#upper-space {
	height: 90px;
	width: 375px;
	background-color: #eCf0f1;
	overflow: hidden;

}
#left-upper {
	background-color: #ecf0f1;
	width: 50%;
	float: left;
	height: 100%;
}
#right-upper {
	background-color: #ecf0f1;
	width: 50%;
	float: right;
	height: 100%;
}
#num-space {
	background-color: inherit;
	width: 250px;
	height: 250px;
	position: static;
	margin-left: 62.5px;
}
#num {
	font-size: 100px;
	font-family: Josefin;
	text-align: center;
	font-weight: 700;
	position: inherit;
	line-height: 225px;
	color: #6c7a89;
}
#score {
	font-size: 35px;
	margin-right: 20px;
	margin-top: 30px;
	font-family: ComfortaaThin;
	text-align: right;
	position: inherit;
	color: #6c7a89;
}
#left-arrow {
	margin-top: 27px;
	margin-left: 20px;
	width: 32px;
	height: 32px;
}

JavaScript

$(document).ready(function() {
    alert('boom')
    var slideCount = $('#slider ul li').length;
    var slideWidth = $('#slider ul li').width();
    var slideHeight = $('#slider ul li').height();
    var sliderUlWidth = slideCount * slideWidth;
    
    $('#slider').css({ width: slideWidth, height: slideHeight });
    
    $('#slider ul').css({ width: sliderUlWidth, marginLeft: - slideWidth });
    
    $('#slider ul li:last-child').prependTo('#slider ul');

    function moveLeft() {
        $('#slider ul').animate({
            left: + slideWidth
        }, 200, function () {
            $('#slider ul li:last-child').prependTo('#slider ul');
            $('#slider ul').css('left', '');
        });
    };

    function moveRight() {
        $('#slider ul').animate({
            left: - slideWidth
        }, 200, function () {
            $('#slider ul li:first-child').appendTo('#slider ul');
            $('#slider ul').css('left', '');
        });
    };

    $('a.button-start').click(function () {
        moveLeft();
    });

    $('a.').click(function () {
        moveRight();
    });

});