minimalistic slider - with source code - react.js

minimalistic slider - with source code - react.js

Georgios Lazaridis
Coding, art, science

minimalistic javascript slider with react.js

Below is the live preview of the slider and the full code with comments… I wrote the code myself from 0, the slider works with 3 main functions: minus and plus functions responsible for changing the content on click and a time interval function that changes it every 10 seconds. it uses ReactDOM as a substitute for innerHTML, as specified in React docs.

//Slider by Georgios Lazaridis 04.2020
import React from 'react';
import ReactDOM from 'react-dom';

const Slider = () => (

  {/*1st step - JSX Layer - the user interface, its elements and colors, add id for later js*/}

  <div>
  {/*Slider Box with styles*/}

  <div align="center"
  style={{width:'90%',marginLeft:'5%',marginTop:'5%',paddingBottom:'0px'}} >

  <div
  style={{position: 'relative', width:'80%', textAlign: 'left',padding:'30px',
  borderRadius:'20px', backgroundColor: '#111111',color:' gray',
  marginLeft:'2%',marginRight:'2%', marginBottom:'20px'}}  >

  <div style={{position: 'absolute',top:'10px',width:'100%',left:'5px'}}>

  <br></br>

  <a  id="left" onClick={sliderMin}
  style={{position:'absolute',top:'130px',width:'25px',height:'25px',
  borderRadius:'5px',padding:'5px',fontSize:'11px',marginLeft:'2%',
  marginRight:'2%',color:'white'}}></a>

  <a  id="right" onClick={sliderPlus}
  style={{position:'absolute',top:'130px',right:'15px',width:'25px',
  height:'25px',borderRadius:'5px',padding:'5px',fontSize:'11px',
  marginLeft:'2%',marginRight:'2%',color:'white'}}></a>


  </div>

  <i><div id="slider"
  style={{width:'100%',fontFamily:'courier',textAlign:'center'}}>

  <p>{u[0]}<br></br><br></br><sup>{w[0]}</sup></p></div></i>

    <p style={{textAlign:'center'}}>

    <br></br>
    <br></br>

    <span style={{color:'whitesmoke'}} id="done"></span>
    <span id="dtwo"></span>
    <span id="dthree"></span>

    </p>



  </div>

  </div>

  <p style={{color:'gray'}}>
  a simple and minimalistic slider, with 10 seconds change interval.
  </p>

</div>

);

export default Slider;

// 2nd step define variables
let i = 0;
let u = ["0","1","2",]
let w = ["0","1","2",]
var element = (
  <div style={{fontFamily:'courier',textAlign:'center'}}><p>{u[i]}
  <br></br><br></br><sup>{w[i]}</sup></p></div>

);

//3rd step add interactivity for PLUS FUNCTION ᐅ


function sliderPlus() {

if (document.getElementById('slider')!=null){
  if (i<2){
    i=i+1;
     element = (
      <p>{u[i]}<br></br><br></br>
      <sup style={{color:'gray'}}>{w[i]}</sup></p>

    );
  } else {
     i=0;
      element = (
       <p>{u[i]}<br></br><br></br>
       <sup style={{color:'gray'}}>{w[i]}</sup></p>

     );

  }

  //the minimal dots colors

  if (i===0){document.getElementById('done').style.color = "whitesmoke";
        document.getElementById('dtwo').style.color = "gray";
        document.getElementById('dthree').style.color = "gray";
      }
  if (i===1){document.getElementById('dtwo').style.color = "whitesmoke";
        document.getElementById('done').style.color = "gray";
        document.getElementById('dthree').style.color = "gray";
      }
  if (i===2){document.getElementById('dthree').style.color = "whitesmoke";
        document.getElementById('done').style.color = "gray";
        document.getElementById('dtwo').style.color = "gray";
      }

    ReactDOM.render(

        element,
        document.getElementById('slider')

    );
  }
  //uncomment console log for debugging
  //console.log(i,u[i]);
}


//4th step add interactivity for MINUS FUNCTION ᐊ
function sliderMin() {

if (document.getElementById('slider')!=null){
  if(i<=0) {
     i=2;
      element = (
       <p>{u[i]}<br></br><br></br>
       <sup style={{color:'gray'}}>{w[i]}</sup></p>
     );
  } else
  if (i<=2){
    i=i-1;
     element = (
      <p>{u[i]}<br></br><br></br>
      <sup style={{color:'gray'}}>{w[i]}</sup></p>

    );


  }


  //dots
  if (i===0){document.getElementById('done').style.color = "whitesmoke";
        document.getElementById('dtwo').style.color = "gray";
        document.getElementById('dthree').style.color = "gray";
      }
  if (i===1){document.getElementById('dtwo').style.color = "whitesmoke";
        document.getElementById('done').style.color = "gray";
        document.getElementById('dthree').style.color = "gray ";
      }
  if (i===2){document.getElementById('dthree').style.color = "whitesmoke";
        document.getElementById('done').style.color = "gray";
        document.getElementById('dtwo').style.color = "gray ";
      }


    ReactDOM.render(

        element,
        document.getElementById('slider')

    );
  }
  //console.log(i,u[i]);
}





//***5th step TIMING FUNCTION - optional , using setInterval method.***//
function slideIt(){

setInterval(()=>{
if (document.getElementById('slider')!== null){

//uncomment console log for debugging
      //console.log(i);
      i = i+1;
      if (i>2){
        i=0;
         element = (
        <div style={{fontFamily:'courier',textAlign:'center'}}>
        <p>{u[i]}<br></br><br></br><sup style={{color:'gray'}}>{w[i]}</sup>
        </p>
        </div>

        );
      } else {
        element = (
         <div style={{fontFamily:'courier',textAlign:'center'}}><p>{u[i]}<br>
         </br><br></br><sup style={{color:'gray'}}>{w[i]}</sup></p></div>

       );
      }
//update the slider's element
      ReactDOM.render(

          element,
          document.getElementById('slider')

      );



      //dots
      if (i===0){document.getElementById('done').style.color = "whitesmoke";
            document.getElementById('dtwo').style.color = "gray";
            document.getElementById('dthree').style.color = "gray";
          }
      if (i===1){document.getElementById('dtwo').style.color = "whitesmoke";
            document.getElementById('done').style.color = "gray";
            document.getElementById('dthree').style.color = "gray";
          }
      if (i===2){document.getElementById('dthree').style.color = "whitesmoke";
            document.getElementById('done').style.color = "gray";
            document.getElementById('dtwo').style.color = "gray";
          }
      console.log(i,u[i],w[i]);
}
//10sec interval in milliseconds
},10000);
}
//call the time interval function
slideIt();

I made this little slider for the Multicontent website i have been working for recently.

I let you use my code for any purpose for free, donations or contributions are much appreciated.