I am having a data like,
{
"initial": {
"unit": "GB",
"value": 2
},
"remaining": {
"unit": "GB",
"value": 0.2
},
"type": "Internet",
}
Where the initial value is total gb of mobile data and remaining consists of the remaining data available.
Requirement:
My requirement is like the below image,
I have tried with pure HTML and CSS like here, But issue here is that everything is hard coded .. So if we have some percentage then we need to adjust the css class .sc-percentage accordingly
body { background-color:#555888; font-family:sans-serif; color:#fff; text-align:center }
code { display:inline-block; max-width:600px; padding:80px 0 0; line-height:1.5; font-family:monospace; color:#ccc }
.sc-gauge { width:200px; height:200px; margin:200px auto; }
.sc-background { position:relative; height:100px; margin-bottom:10px; background-color:#fff; border-radius:150px 150px 0 0; overflow:hidden; text-align:center; }
.sc-mask { position:absolute; top:20px; right:20px; left:20px; height:80px; background-color:#555888; border-radius:150px 150px 0 0 }
.sc-percentage { position:absolute; top:100px; left:-200%; width:400%; height:400%; margin-left:100px; background-color:#00aeef; }
.sc-percentage { transform:rotate(25deg); transform-origin:top center; }
.sc-min { float:left; }
.sc-max { float:right; }
.sc-value { position:absolute; top:50%; left:0; width:100%; font-size:48px; font-weight:700 }
<code>
To change the current value of the Gauge, you need to change 88 to something else in HTML section and update the .sc-percentage rotate value from 158deg to something else.
This will be a part of the Simple Chart library.
</code>
<div class="sc-gauge">
<div class="sc-background">
<div class="sc-percentage"></div>
<div class="sc-mask"></div>
<span class="sc-value">0.2</span>
</div>
<span class="sc-min">0</span>
<span class="sc-max">2</span>
</div>
I would like to form a chart exactly as like given in the above image.
I am open to implement any kind of library like chartjs, d3, apex etc.., that supports this feature of having semi circle..
As I am a beginner with this scenario, kindly help me to resolve the feature as I am stuck for very long time with this.
A big thanks in advance..
React component:
const data = {
"initial": {
"unit": "GB",
"value": 2
},
"remaining": {
"unit": "GB",
"value": 0.9
},
"type": "Internet",
};
function SemiCircleChart({min, max, value}){
const angle = (value / max) * 180;
const style = {'--angle': angle + 'deg'};
return (
<div class="sc-gauge">
<div class="sc-background">
<div class="sc-percentage" style={style}></div>
<div class="sc-mask"></div>
<span class="sc-value">{ value }</span>
</div>
<span class="sc-min">{ min }</span>
<span class="sc-max">{ max }</span>
</div>)
}
ReactDOM.render(
<SemiCircleChart
min={0}
max={data.initial.value}
value={data.remaining.value}
/>,
document.querySelector('#app')
);
:root {
--angle: 90deg;
}
body {
background-color: #555888;
font-family: sans-serif;
color: #fff;
text-align: center
}
code {
display: inline-block;
max-width: 600px;
padding: 0;
line-height: 1.5;
font-family: monospace;
color: #ccc
}
.sc-gauge {
width: 200px;
height: auto;
margin: 20px auto;
}
.sc-background {
position: relative;
height: 100px;
margin-bottom: 10px;
background-color: #fff;
border-radius: 150px 150px 0 0;
overflow: hidden;
text-align: center;
}
.sc-mask {
position: absolute;
top: 20px;
right: 20px;
left: 20px;
height: 80px;
background-color: #555888;
border-radius: 150px 150px 0 0
}
.sc-percentage {
position: absolute;
top: 100px;
left: -200%;
width: 400%;
height: 400%;
margin-left: 100px;
background-color: #00aeef;
}
.sc-percentage {
transform: rotate(var(--angle));
transform-origin: top center;
}
.sc-min {
float: left;
}
.sc-max {
float: right;
}
.sc-value {
position: absolute;
top: 50%;
left: 0;
width: 100%;
font-size: 48px;
font-weight: 700
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<code>
This will be a part of the Simple Chart library.
</code>
<div id="app"></div>
Old answer:
You just need to use a CSS variable:
Declare a variable like:
:root{
--angle: 90deg;
}
and use it like:
.sc-percentage {
transform: rotate(var(--angle));
transform-origin: top center;
}
You can update this variable as style attribute from JavaScript:
element.style.setProperty("--angle", '180deg');
180deg would be full arc.
Here's an example with animation: https://codesandbox.io/s/angry-moon-t08hp?file=/src/App.js
You can set style variables in React, which is what this Codesandbox does:
<div
class="sc-percentage"
style={{ transform: `rotate(${(percent / 100) * 180}deg)` }}
></div>
And it uses a setInterval to toggle the percent.
The animation between the two percents is achieved simply with a CSS transition property:
.sc-percentage {
transform: rotate(25deg);
transition: transform 1s;
transform-origin: top center;
}
Related
I am trying to have a Light/Dark mode toggle in my website where it not only changes the background color, but it changes the fill color of the SVG waves I have. I have the background colors working and I created a function// timeline for the waves using GSAP but for some reason, it won't play. I have created a CodePen since I didn't know how to add GSAP into Stack. Any and all help is appreciated! https://codepen.io/maddylobb/pen/gOXNEeQ
import * as gsap from "https://cdn.skypack.dev/gsap#3.9.1";
const toggleSwitch = document.querySelector('.theme-switch input[type="checkbox"]');
function switchTheme(e){
if (e.target.checked) {
document.documentElement.setAttribute('data-theme', 'dark');
localStorage.setItem('theme', 'dark');
console.log("wave play");
waveColorTL.play();
}
else{
document.documentElement.setAttribute('data-theme', 'light');
localStorage.setItem('theme','light');
console.log("wave reverse");
waveColorTL.reverse();
}
console.log(toggleSwitch.checked +'this is the value for the checkbox');
}
toggleSwitch.addEventListener('change', switchTheme, false);
//GSAP function to change the fill of svg//
const waveColorTL = new gsap.timeline({paused:true});
tanWaveTL.to("#tanWave2",{duration:0.05, fill:"000"});
waveColorTL.add(tanWaveTL, "wave")
:root {
--lightpink: #FFC3A4;
--white: #fff;
--darkpurple: #2E1845;
}
[data-theme="dark"] {
--lightpink: #DC9C7C;
--white: #fff;
--darkpurple: #22152F;
}
#hero-2 {
height: 100vh;
background-color: var(--lightpink);
#tanWave {
width: 100%;
margin-top: -40px;
#include md {
margin-top: -40px;
}
#include lg {
margin-top: -60px;
}
#include lg {
margin-top: -85px;
}
}
.theme-switch-wrapper {
grid-area: search;
display: flex;
align-items: center;
justify-content: center;
justify-content: column;
width: 100%;
#light-dark-text {
margin-left: 10px;
font-size: 1rem;
}
}
.theme-switch {
display: inline-block;
height: 34px;
position: relative;
width: 60px;
}
.theme-switch input {
display: none;
}
.slider {
background-color: var(--darkpurple);
bottom: 0;
cursor: pointer;
left: 0;
position: absolute;
right: 0;
top: 0;
transition: .4s;
}
.slider:before {
background-color: var(--white);
bottom: 4px;
content: "";
height: 26px;
left: 4px;
position: absolute;
transition: .4s;
width: 26px;
}
input:checked+.slider {
background-color: var(--white);
}
input:checked+.slider:before {
transform: translateX(26px);
background-color: var(--darkpurple);
}
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
}
<section id="hero-2">
<section class="theme-switch-wrapper">
<label id="light-dark-label" class="theme-switch" for="checkbox">
<input type="checkbox" id="checkbox" />
<div class="slider round"></div>
</label>
<p id="light-dark-text">Enable Dark Mode!</p>
</section>
<div id="tanWave" class="wave">
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 375 28">
<g id="tanWave2" fill="#F9D5AE">
<path d="M94.304 14.776v12.33h15.482H0V14.764c2.453.475 8.95-.522 15.31-8.308 6.362-7.786 12.067-6.41 14.124-4.748.792.475 2.754 2.28 4.273 5.697-1.226-.83-4.059-1.899-5.578.475-1.52 2.374-.633 5.183 0 6.29 1.029 1.464 4.107 4.012 8.19 2.493 4.082-1.52 6.369-4.51 7.002-5.816 1.464-2.334 4.866-7.358 6.765-8.782 1.9-1.425 4.51-1.939 5.578-2.018 2.651-.277 8.166.57 9.02 6.172-1.582-1.148-5.103-2.635-6.527.593-1.424 3.228.91 6.25 1.899 7.359 1.82 1.384 5.863 3.062 10.326-1.306 1.7-1.424 5.84-5.198 8.783-8.901C82.108.26 87.433.046 89.728.402c2.334.119 6.955 1.567 6.765 6.41-1.701-.713-5.175-1.07-5.46 3.204-.176 2.649 1.463 4.066 3.271 4.76ZM281.859 14.776c-1.809-.694-3.448-2.111-3.271-4.76.285-4.273 3.758-3.917 5.459-3.205.19-4.842-4.431-6.29-6.765-6.41-2.294-.355-7.619-.141-10.563 3.562-2.943 3.703-7.082 7.477-8.783 8.901-4.462 4.368-8.506 2.69-10.326 1.306-.989-1.108-3.323-4.13-1.899-7.359 1.425-3.228 4.946-1.74 6.528-.593-.854-5.602-6.369-6.45-9.02-6.172-1.068.079-3.679.593-5.578 2.018-1.899 1.424-5.302 6.448-6.766 8.782-.633 1.306-2.919 4.297-7.002 5.816-4.083 1.52-7.161-1.028-8.19-2.492-.633-1.108-1.519-3.917 0-6.29 1.52-2.375 4.352-1.306 5.579-.476-1.519-3.418-3.482-5.222-4.273-5.696-2.057-1.662-7.762-3.039-14.124 4.747-6.362 7.786-12.858 8.783-15.311 8.308v12.344h94.305v-12.33Z"/>
<path d="M188.462 14.776c-1.809-.694-3.448-2.111-3.271-4.76.285-4.273 3.758-3.917 5.459-3.205.19-4.842-4.431-6.29-6.765-6.41-2.294-.355-7.619-.141-10.563 3.562-2.943 3.703-7.082 7.477-8.783 8.901-4.462 4.368-8.506 2.69-10.326 1.306-.989-1.108-3.323-4.13-1.899-7.359 1.425-3.228 4.946-1.74 6.528-.593-.854-5.602-6.369-6.45-9.02-6.172-1.068.079-3.679.593-5.578 2.018-1.899 1.424-5.302 6.448-6.766 8.782-.633 1.306-2.919 4.297-7.002 5.816-4.083 1.52-7.161-1.028-8.19-2.492-.633-1.108-1.519-3.917 0-6.29 1.52-2.375 4.352-1.306 5.579-.476-1.519-3.418-3.482-5.222-4.273-5.696-2.057-1.662-7.762-3.039-14.124 4.747-6.361 7.786-12.858 8.783-15.31 8.308v12.344h94.304v-12.33ZM376.016 14.776c-1.808-.694-3.447-2.111-3.271-4.76.285-4.273 3.759-3.917 5.46-3.205.19-4.842-4.431-6.29-6.765-6.41-2.295-.355-7.62-.141-10.563 3.562-2.944 3.703-7.082 7.477-8.783 8.901-4.463 4.368-8.506 2.69-10.326 1.306-.989-1.108-3.323-4.13-1.899-7.359 1.424-3.228 4.945-1.74 6.528-.593-.855-5.602-6.37-6.45-9.021-6.172-1.068.079-3.679.593-5.578 2.018-1.899 1.424-5.301 6.448-6.765 8.782-.633 1.306-2.92 4.297-7.003 5.816-4.083 1.52-7.16-1.028-8.189-2.492-.633-1.108-1.519-3.917 0-6.29 1.519-2.375 4.352-1.306 5.578-.476-1.519-3.418-3.481-5.222-4.273-5.696-2.057-1.662-7.762-3.039-14.123 4.747-6.362 7.786-12.858 8.783-15.311 8.308v12.344h94.304v-12.33Z"/>
</g>
</svg>
</div>
</section>
I am coding a random quote generator. I almost have it fully coded how I want. I am a beginner in HTML and I've never used Javascript before this weekend. I took from multiple tutorials to code this exactly how I want it and am very proud. I have one last thing I am trying to do. When a item from the array is called, I want it to be removed, stored in another array and when the original array reaches 0, I want it to reset. I know its possible but I am not sure what to add to this script to make it work. Thanks so much for any help.
const quotes = [{
game: 'CARD TYPE 1',
quote: "This is the card description for Card Type 1",
rule: "Card Type 1 Rules"
},
{
game: 'CARD TYPE 2',
quote: "This is the card description for Card Type 2",
rule: "Card Type 2 Rules"
},
{
game: 'CARD TYPE 3',
quote: "This is the card description for Card Type 3",
rule: "Card Type 3 Rules"
}
];
const maincontainer = document.querySelector("#quoteBtn");
const questionStyle = document.querySelector("#quote");
const gameTitleStyle = document.querySelector("#gameTitle");
const ruleStyle = document.querySelector("#ruleTxt");
quoteBtn.addEventListener("click", displayQuote);
function displayQuote() {
let number = Math.floor(Math.random() * quotes.length);
gameTitle.innerHTML = quotes[number].game;
quote.innerHTML = quotes[number].quote;
ruleTxt.innerHTML = quotes[number].rule;
}
<style type="text/css">
body {
font-family: "Poppins", sans-serif;
background-color: #3F6BFF;
}
.maincontainer {
position: relative;
width: 500px;
height: 300px;
animation: flip 1s;
text-align: center;
margin: 0 auto;
border-radius: 25px;
}
.thecard {
position: relative;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: all 0.5s ease;
border-radius: 25px;
}
.thecard:active {
transform: rotateY(360deg);
}
.thefront {
position: absolute;
width: 100%;
height: 100%;
padding-right: 30px;
padding-left: 30px;
backface-visibility: hidden;
background-color: #fff;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
border-radius: 25px;
}
.theback {
position: absolute;
width: 100%;
height: 100%;
padding-right: 30px;
padding-left: 30px;
backface-visibility: hidden;
transform: rotateY(180deg);
background: #000;
border-radius: 25px;
}
.gameTitleStyle {
font-weight: 800;
font-size: 32px;
text-transform: uppercase;
}
.ruleStyle {
position: relative;
top: -20px;
font-style: italic;
}
.questionStyle {
position: relative;
top: 20px;
font-size: 18px;
}
</style>
<body>
<div class="maincontainer" id="quoteBtn">
<div class="thecard">
<div class="thefront">
<h1 class="gameTitleStyle" id="gameTitle">Business Name</h1>
<p class="ruleStyle" id="ruleTxt">Rules</p>
<p class="questionStyle" id="quote">Card Description</p>
</div>
<div class="theback"></div>
</div>
</div>
</body>
Removing an element from an array can be done with the Array.prototype.splice() method. For example, this removes element 2 from an array called "items", and returns the removed element in a new array:
let removedItems = items.splice(2);
Add items to an array using Array.prototype.push():
otherArray.push(...removedItems);
The ...removedItems converts the removedItems array to a list of items. The ... is called the spread operator.
These should be enough to accomplish what you want.
When hover on the first and second element, some element will animate to the left, it works well if hovered with a normal speed, but will crashed if hovered too fast for some times
(the text won't show or the text won't move back to its original place when mouseoff, checkout the figures below).
Any suggestions would be appreciated.
1.text won't show
2.text won't move back to its original place
$(document).ready(function() {
var flag = false;
$(".tab-ico").hover(function() {
var f = $(this);
f.data('timeout', window.setTimeout(function() {
f.find(".tab-text").stop(true, true).animate({
left: "-=64"
}, 300, function() {
flag = true;
});
}, 300));
}, function() {
clearTimeout($(this).data("timeout"));
if (flag === true) {
$(this).find(".tab-text").stop(true, true).animate({
left: "+=64"
}, 300, function() {
flag = false;
});
}
});
});
.pfm-toolbar-wrap {
height: 100%;
position: fixed;
right: 0;
top: 0;
width: 35px;
z-index: 9990;
}
.pfm-tbar-tab-Spike {
position: relative;
width: 35px;
}
.pfm-toolbar-tabs {
border-right: 5px solid #7a6e6e;
height: 100%;
}
.p-tab div.tab-ico {
background: #7a6e6e;
}
.tab-text {
border-radius: 3px;
color: #fff;
height: 32px;
left: 0px;
line-height: 32px;
position: absolute;
text-align: center;
width: 70px;
padding-right: 5px;
z-index: -1;
background: #7a6e6e;
}
.tab-text a {
color: #fff;
display: block;
}
.p-tab {
left: 0;
margin-top: -100px;
position: absolute;
top: 50%;
width: 35px;
z-index: 9;
text-align: center;
}
.p-tab div.tab-ico:hover {
background: #e20531;
cursor: pointer;
}
.p-tab div.tab-ico:hover .tab-text {
background: #e20531;
}
.tab-ico {
width:35px;
height:35px;
margin-bottom:5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="pfm-toolbar-wrap">
<div class="pfm-toolbar-tabs">
<div class="p-tab">
<div class="pfm-tbar-tab-Spike m_b15">
<div class="tab-ico cart"> <i class="cbl-icon"></i> <em class="tab-text"> text</em>
</div>
</div>
<div class="pfm-tbar-tab-group m_b15">
<div class="tab-ico "> <i class="cbl-icon"></i>
<em class="tab-text"> text2</em>
</div>
</div>
</div>
</div>
</div>
you can use css transition-delay property as follows:
transition-delay: 1s; /* delays for 1 second */
-webkit-transition-delay: 1s; /* for Safari & Chrome */
Find more info here.
I suggest that you use CSS transition, here are two links that will help you make that with less code and using CSS transition
https://css-tricks.com/almanac/properties/t/transition/
https://blog.alexmaccaw.com/css-transitions
I'm trying to animate an element to move: left:0px but It doesn't seem to work. I surmise the issue is that the element isn't absolute positioned but how would I do that with animate?
fid: https://jsfiddle.net/jzhang172/j2yrumyg/8/
$(function(){
var cheese= $('.ok').offset().top; //Define top of 'hey'
//
//Animates when it reaches red part of page
//
$(window).scroll(function() {
if ( $(window).scrollTop() >= cheese ) {
$('.ok').addClass('top');
$('.nice').hide().fadeIn().html('ok');
$(".nice").animate({
left:"0"
}, 600);
$('.nice').addClass('maybe');
}
else{
$('.ok').removeClass('top');
$('.nice').removeClass('maybe');
$('.nice').html('Hey');
}
});
//
//This part doesn't rely on scroll event and is in charge of changing hover on ".ok" div.
//
$('.ok').hover(function(){
if(!$(this).hasClass("top"))
$(this).addClass('proj-hover');
},function(){
$(this).removeClass('proj-hover');
});
//
//Animate on click
//
$('.ok').click(function(){
if ( $(window).scrollTop() >= cheese ) {
}
else{
$("body, html").animate({
scrollTop: $('.other').offset().top
}, 600);
}
});
});
*{
box-sizing:border-box;
}
body,html{
padding:0;
margin:0;
}
.div{
height:100vh;
width:100%;
background:#6464FF;
}
.other{
height:1000px;
width:100%;
background:#FF6161;
}
.ok{
position:absolute;
bottom:0;
left:50%;
margin-left:-100px;
width:200px;
height:50px;
line-height:50px;
background:black;
color:white;
text-align:center;
transition:1s;
}
.top{
position:fixed;
top:0;
left:0;
transition:.7s;
margin-left: 0px;
width:100%;
}
.proj-hover{
background:white;
color:black;
}
.blue{
background:blue;
}
.nice{
transition:0s;
margin: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div">
<div class="ok">
<p class="nice">Hey</p>
</div>
</div>
<div class="other">
</div>
To move the text to the left, which is centered by a text-alignment property, you have to change the width of the container. I did the animation with CSS3 by adding some css and removing the jquery animation of the element nice :
.nice {
margin: 0px;
width: 100%;
transition: width .6s;
}
.maybe {
width: 0;
}
Here the complete code:
$(function() {
var cheese = $('.ok').offset().top; //Define top of 'hey'
//
//Animates when it reaches red part of page
//
$(window).scroll(function() {
if ($(window).scrollTop() >= cheese) {
$('.ok').addClass('top');
//$(".nice").animate({
// width: '0%'
//}, 600).css('overflow', '');
$('.nice').addClass('maybe');
} else {
$('.ok').removeClass('top');
$('.nice').removeClass('maybe');
$('.nice').html('Hey');
}
});
//
//This part doesn't rely on scroll event and is in charge of changing hover on ".ok" div.
//
$('.ok').hover(function() {
if (!$(this).hasClass("top"))
$(this).addClass('proj-hover');
}, function() {
$(this).removeClass('proj-hover');
});
//
//Animate on click
//
$('.ok').click(function() {
if ($(window).scrollTop() >= cheese) {
} else {
$("body, html").animate({
scrollTop: $('.other').offset().top
}, 600);
}
});
});
* {
box-sizing: border-box;
}
body,
html {
padding: 0;
margin: 0;
}
.div {
height: 100vh;
width: 100%;
background: #6464FF;
}
.other {
height: 1000px;
width: 100%;
background: #FF6161;
}
.ok {
position: absolute;
bottom: 0;
left: 50%;
margin-left: -100px;
width: 200px;
height: 50px;
line-height: 50px;
background: black;
color: white;
text-align: center;
transition: 1s;
}
.top {
position: fixed;
top: 0;
left: 0;
transition: .7s;
margin-left: 0px;
width: 100%;
}
.proj-hover {
background: white;
color: black;
}
.blue {
background: blue;
}
.nice {
transition: 0s;
margin: 0px;
width: 100%;
transition: width .6s;
}
.maybe {
width: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div">
<div class="ok">
<p class="nice">Hey</p>
</div>
</div>
<div class="other">
</div>
Not sure if I understand your question. The "ok" should move to the left?
You have declared width:100%; in your CSS class top. So it is already left. Remove it and it will work.
Or you might want within the .nice class:
position:absolute;
left:0; right:0;
margin: auto;
and do a
$(".nice").animate({
right:"100%"
}, 600);
How can I align the following coloured divs next to each other, so that each one is the full width of the browser window (responsive) and only one is display at a time?
http://codepen.io/anon/pen/gpxvjm
HTML:
<div class="content-area">
<div class="p1">Page 1</div>
<div class="p2">Page 2</div>
<div class="p3">Page 3</div>
</div>
<a class="previous-page" href="#">Previous Page</a>
<a class="next-page"href="#">Next Page</a>
CSS:
body {background: grey;}
.p1 {
background: red;
float: left;
width: 100%;
display: inline;
overflow: hidden;
}
.p2 {
background: blue;
float: left;
width: 100%;
display: inline;
overflow: hidden;
}
.p3 {
background: green;
float: left;
width: 100%;
display: inline;
overflow: hidden;
}
.content-area {
width: 100%;
overflow: hidden;
}
Also, when the user selects the previous and next buttons, how can I then push the divs either left or right depending on which anchor link is selected?
I would really recommend slick.js to create the carousel effect you are after.
It is super easy to setup, allows for responsive design, is quite compatible with old IE and has features like arrows and dots built in!
If you want to run your own, i would suggest toggling classes in javascript which leverage css transforms & transitions to ensure maximum performance.
For example,
.page{
width: 100%;
height: 500px;
position: absolute;
top: 0;
transition: .5s;
}
.hide-left{
transform: translateX(-100%);
}
.hide-right{
transform: translateX(100%);
}
Adding browser specific prefixes where required.
This is one of solution, define parent with (number of pages) x 100% width and each child of page 100% / (number of pages) width :
var currentPage = 0;
$('.previous-page').on('click', function() {
currentPage--;
$('.content-area').css('left', (currentPage * -100) + '%');
});
$('.next-page').on('click', function() {
currentPage++;
$('.content-area').css('left', (currentPage * -100) + '%');
});
body {background: grey;}
.content-area div {
float: left;
width: 33.3333%;
display: inline;
overflow: hidden;
}
.p1 {
background: red;
}
.wrap {
width: 100%;
position: relative;
overflow: hidden;
}
.content-area {
width: 300%;
overflow: hidden;
left: 0;
position: relative;
-webkit-transition: left 2s;
transition: left 2s;
}
.p2 {
background: blue;
}
.p3 {
background: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
<div class="content-area">
<div class="p1">Page 1</div>
<div class="p2">Page 2</div>
<div class="p3">Page 3</div>
</div>
</div>
<a class="previous-page" href="#">Previous Page</a>
<a class="next-page"href="#">Next Page</a>
You can improve the script, i just made it to illustrate the slider.
Here, I've created a jsfiddle here for what I think it is that you want. I've also created a snippet below.
$(document).ready(function () {
for (var i = 0; i < $(".content-area div").length; i++) {
$(".content-area div").eq(i).css({
left: "+=" + parseInt($(".content-area").width() * i, 10)
});
}
});
var currentPage = 0; //0th index
$(".previous-page").click(function () {
changePage(-1);
});
$(".next-page").click(function () {
changePage(1);
});
function changePage(updown) {
if ($(".content-area div")[currentPage + updown]) {
$(".content-area div").animate({
left: "+=" + parseInt($(".content-area").width() * -updown, 10)
},1600);
currentPage += updown;
}
}
body, html {
background: grey;
margin: 0;
padding: 0;
}
.p1 {
background: red;
}
.p2 {
background: blue;
}
.p3 {
background: green;
}
.content-area {
position: absolute;
left:0;
right:0;
top:0;
bottom:0;
overflow: hidden;
}
.content-area div {
position:absolute;
left:0;
width: 100%;
height:100%;
}
.next-page, .previous-page {
z-index:2;
position:fixed;
bottom:5px;
}
.next-page {
right:5px;
}
.previous-page {
left:5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="content-area">
<div class="p1">Page 1</div>
<div class="p2">Page 2</div>
<div class="p3">Page 3</div>
</div>
<a class="previous-page" href="#">Previous Page</a>
<a class="next-page" href="#">Next Page</a>