Day 5 Reviews

Author: mohdibrahimofficial

7-slider/setup/src/App.js

@@ -6,19 +6,42 @@ function App() {
  const [people,setPeople] = useState(data);
  const [index,setIndex] = useState(0);
 
+ useEffect(()=>{
+ const lastIndex = people.length - 1;
+ if(index<0)
+ setIndex(lastIndex);
+ if(index===people.length)
+ setIndex(0);
+ },[index,people]);
+
+ useEffect(()=>{
+ let slider = setInterval(()=>{
+ setIndex(index+1);
+ },3000);
+ return (()=>clearInterval(slider));
+ },[index])
+
  return (
  <section className="section">
  <div className="title">
  <h2><span>/</span>Reviews</h2>
  </div>
  <div className="section-center">
  {
- people.map((people,peopleIndex)=>{
- const {id,image,name,title,quote} = people;
+ people.map((person,personIndex)=>{
+ const {id,image,name,title,quote} = person;
  //More Stuff Coming
+ let position = 'nextSlide';
+ 
+ if( index === personIndex )
+ position = 'activeSlide'
+
+ if( ( index-1 === personIndex ) ||
+ (index === 0 && personIndex === people.length-1) )
+ position = 'lastSlide'
 
  return (
- <article key={id}>
+ <article key={id} className={position}>
  <img src={image} alt={name} className="person-img" />
  <h4>{name}</h4>
  <p className="title">{title}</p>
@@ -28,10 +51,10 @@ function App() {
  );
  })
  }
- <button className="prev">
+ <button className="prev" onClick={()=>setIndex(index-1)}>
  <FiChevronLeft />
  </button>
- <button className="next">
+ <button className="next" onClick={()=>setIndex(index+1)}>
  <FiChevronRight />
  </button>
  </div>

7-slider/setup/src/index.css

@@ -1,9 +1,3 @@
-/*
-=============== 
-Variables
-===============
-*/
-
 :root {
  /* dark shades of primary color*/
  --clr-primary-1: hsl(21, 91%, 17%);
@@ -117,111 +111,177 @@ p {
  line-height: 1;
  }
 }
-/* global classes */
 
-/* section */
-.section {
+/* main */
+.section
+{
  width: 90vw;
  margin: 5rem auto;
  max-width: var(--max-width);
 }
 
-@media screen and (min-width: 992px) {
- .section {
+@media only screen and (min-width: 992px)
+{
+ .section
+ {
  width: 95vw;
  }
 }
-/*
-=============== 
-Slider
-===============
-*/
-.title {
- text-align: center;
- margin-bottom: 2rem;
+
+
+.section .title
+{
+ margin-bottom: 0.75rem;
+ color: var(--clr-grey-3);
 }
-.title h2 {
+
+
+.section .title h2
+{
  display: flex;
- align-items: center;
  justify-content: center;
- font-weight: 500;
+ align-items: center;
+ font-weight: 500; 
 }
-.title span {
- font-size: 0.85em;
+
+.section .title h2 span
+{
  color: var(--clr-primary-5);
  margin-right: 1rem;
+ font-size: 0.85em;
  font-weight: 700;
 }
-.section-center {
+
+.section-center
+{
  margin: 0 auto;
  margin-top: 4rem;
  width: 80vw;
- /* have to have a height */
  height: 450px;
  max-width: 800px;
- text-align: center;
- position: relative;
  display: flex;
- /* overflow: hidden; */
+ justify-content: center;
+ align-items: center;
+ position: relative;
+ text-align: center;
+ overflow: hidden;
+}
+
+.section-center article
+{
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ opacity: 0;
+ transition: var(--transition);
+}
+
+.section-center article h4
+{
+ text-transform: uppercase;
+ color: var(--clr-primary-5);
+ margin-bottom: .25rem;
 }
-.person-img {
+
+.section-center article img
+{
  border-radius: 50%;
- margin-bottom: 1rem;
  width: 150px;
  height: 150px;
  object-fit: cover;
  border: 4px solid var(--clr-grey-8);
  box-shadow: var(--dark-shadow);
+ margin-bottom: 1rem;
 }
-article h4 {
- text-transform: uppercase;
- color: var(--clr-primary-5);
- margin-bottom: 0.25rem;
-}
-.title {
- text-transform: capitalize;
- margin-bottom: 0.75rem;
+
+.section-center article .title
+{
  color: var(--clr-grey-3);
+ text-transform: capitalize;
 }
-.text {
- max-width: 35em;
- margin: 0 auto;
- margin-top: 2rem;
+
+
+.section-center article .text
+{
  line-height: 2;
  color: var(--clr-grey-5);
+ margin: 2rem auto 0;
 }
+
+
 .icon {
- font-size: 3rem;
- margin-top: 1rem;
- color: var(--clr-primary-5);
+ font-size: 3rem;
+ margin-top: 1rem;
+ color: #ba5d2c;
+ color: var(--clr-primary-5);
 }
-.prev,
-.next {
+
+
+.prev
+{
  position: absolute;
  top: 200px;
- transform: translateY(-50%);
+ left: 0;
  background: var(--clr-grey-5);
- color: var(--clr-white);
+ border: 0;
+ outline: 0;
  width: 1.25rem;
  height: 1.25rem;
- display: grid;
- place-items: center;
- border-color: transparent;
- font-size: 1rem;
+ color: white;
  border-radius: var(--radius);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 1.25rem;
+ transition: var(--transition);
  cursor: pointer;
+ padding: 2px;
+ transform: translateY(-50%);
+}
+
+.next
+{
+ position: absolute;
+ top: 200px;
+ right: 0; 
+ background: var(--clr-grey-5);
+ border: 0;
+ outline: 0;
+ width: 1.25rem;
+ height: 1.25rem;
+ color: white;
+ border-radius: var(--radius);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 1.25rem;
  transition: var(--transition);
+ cursor: pointer;
+ padding: 2px;
+ transform: translateY(-50%);
+}
+
+article.activeSlide {
+ opacity: 1;
+ transform: translateX(0);
 }
-.prev:hover,
-.next:hover {
- background: var(--clr-primary-5);
+article.lastSlide {
+ transform: translateX(-100%);
 }
-.prev {
- left: 0;
+article.nextSlide {
+ transform: translateX(100%);
 }
-.next {
- right: 0;
+
+@media only screen and (min-width: 992px)
+{
+ .prev,.next
+ {
+ font-size: 2em;
+ }
 }
+
 @media (min-width: 800px) {
  .text {
  max-width: 45em;
@@ -233,22 +293,51 @@ article h4 {
  font-size: 1.5rem;
  }
 }
-article {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- /* opacity: 0; */
- transition: var(--transition);
-}
-/* article.activeSlide {
- opacity: 1;
- transform: translateX(0);
-}
-article.lastSlide {
- transform: translateX(-100%);
-}
-article.nextSlide {
- transform: translateX(100%);
-} */
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+