JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title></title>
<link href="http://gordonweiss.dunkleedev2.com/wp-content/themes/GWR_Theme/css/layout.css" media="all" type="text/css" rel="stylesheet">
<script type="text/javascript">
$(function(){
/*var num=1;
var xx=setInterval(function(){
document.getElementById("a").innerHTML+=num+", ";
var lft=parseInt($('#a').css('left'));
$('#a').animate({left:lft+50},200);
num++;
},2000)*/
//Show the paging and activate its first link
jQuery(".paging").show();
jQuery(".paging a:first").addClass("active");
//Get size of the image, how many images there are, then determin the size of the image reel.
var imageWidth = jQuery(".window").width();
var imageSum = jQuery(".image_reel img").size();
var imageReelWidth = imageWidth * imageSum;
//Adjust the image reel to its new size
jQuery(".image_reel").css({'width' : imageReelWidth});
//Paging and Slider Function
rotate = function(){
var triggerID = jQueryactive.attr("rel") - 1; //Get number of times to slide
var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide
jQuery(".paging a").removeClass('active'); //Remove all active class
jQueryactive.addClass('active'); //Add active class (the jQueryactive is declared in the rotateSwitch function)
//Slider Animation
jQuery(".image_reel").animate({
left: -image_reelPosition
}, 500 );
};
//Rotation and Timing Event
rotateSwitch = function(){
...