[소스공유] Slider 반응형 슬라이드 소스 다운받기 CodePen

홈페이지에서 꼭 들어가는 슬라이드. 오른쪽에서 왼쪽으로 슬라이드가 되며, 반응형 슬라이드 입니다.

 

1.html

 

2. CSS

.slider {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: relative;
}
.slider .wrapper {
  height: 100vh;
  transition: 0.5s all linear;
  will-change: transform;
}
.slider .arrows {
  position: absolute;
  top: 50%;
  background: none;
  height: 60px;
  border: 0;
  cursor: pointer;
  transition: ease 0.3s all;
  outline: none;
}
.slider .arrows.prev {
  left: 0;
}
.slider .arrows.prev:hover {
  opacity: 0.7;
  left: -10px;
}
.slider .arrows.next {
  right: 0;
}
.slider .arrows.next:hover {
  right: -10px;
  opacity: 0.7;
}
.slider .dots-container {
  height: auto;
  margin: 0;
  padding: 0;
  position: absolute;
  width: auto;
  text-align: center;
  left: 50%;
  bottom: 9px;
  transform: translateX(-50%);
  z-index: 10;
  list-style-type: none;
}
.slider .dots-container li {
  display: inline-block;
  padding: 5px;
}
.slider .dots-container li.active button {
  color: #00D8FF;
}
.slider .dots-container li button {
  color: #fff;
  background-color: transparent;
  border: none;
}
.slider .dots-container li button:hover {
  text-decoration: none;
  opacity: 0.7;
  cursor: pointer;
}
.slider .toggle-play {
  background: transparent;
  border: none;
  height: auto;
  position: absolute;
  width: auto;
  right: 5%;
  bottom: 9px;
  color: #3d3d3d;
  z-index: 1000000;
}
.slider .toggle-play:hover {
  text-decoration: none;
  opacity: 0.7;
  cursor: pointer;
}
.slider .each-slide {
  width: 100vw;
  height: 100vh;
  float: left;
  line-height: 100vh;
  font-size: 40vh;
  text-align: center;
  background-size: cover;
  background-position: center center;
  background-color: transparent;
}

 

3. JS

const slides = [
{
  eachSlide: 'url(https://unsplash.it/1900/1024/?image=497)' },

{
  eachSlide: 'url(https://unsplash.it/1900/1024/?image=291)' },

{
  eachSlide: 'url(https://unsplash.it/1900/1024/?image=786)' },

{
  eachSlide: 'url(https://unsplash.it/1900/1024/?image=768)' },

{
  eachSlide: 'url(https://unsplash.it/1900/1024/?image=726)' },

{
  eachSlide: 'url(https://unsplash.it/1900/1024/?image=821)' }];



const Slider = () => {
  const [active, setActive] = React.useState(0);
  const [autoplay, setAutoplay] = React.useState(0);
  const max = slides.length;

  const intervalBetweenSlides = () => autoplay && setActive(active === max - 1 ? 0 : active + 1);

  React.useEffect(() => {
    const interval = setInterval(() => intervalBetweenSlides(), 3000);
    return () => clearInterval(interval);
  });

  const toggleAutoPlay = () => setAutoplay(!autoplay);

  const nextOne = () => active < max - 1 && setActive(active + 1);

  const prevOne = () => active > 0 && setActive(active - 1);

  const isActive = value => active === value && 'active';

  const setSliderStyles = () => {
    const transition = active * -100;

    return {
      width: slides.length * 100 + 'vw',
      transform: 'translateX(' + transition + 'vw)' };

  };

  const renderSlides = () => slides.map((item, index) => /*#__PURE__*/
  React.createElement("div", {
    className: "each-slide",
    key: index,
    style: { backgroundImage: item.eachSlide } }));



  const renderDots = () => slides.map((silde, index) => /*#__PURE__*/ // check index
  React.createElement("li", {
    className: isActive(index) + ' dots',
    key: index }, /*#__PURE__*/
  React.createElement("button", { onClick: () => setActive(index) }, /*#__PURE__*/
  React.createElement("span", null, "\u25CF"))));




  const renderPlayStop = () => autoplay ? /*#__PURE__*/

  React.createElement("svg", { fill: "#FFFFFF", height: "24", viewBox: "0 0 24 24", width: "24" }, /*#__PURE__*/
  React.createElement("path", { d: "M0 0h24v24H0z", fill: "none" }), /*#__PURE__*/
  React.createElement("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 14H9V8h2v8zm4 0h-2V8h2v8z" })) : /*#__PURE__*/



  React.createElement("svg", { fill: "#FFFFFF", height: "24", viewBox: "0 0 24 24", width: "24" }, /*#__PURE__*/
  React.createElement("path", { d: "M0 0h24v24H0z", fill: "none" }), /*#__PURE__*/
  React.createElement("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5v-9l6 4.5-6 4.5z" }));



  const renderArrows = () => /*#__PURE__*/
  React.createElement(React.Fragment, null, /*#__PURE__*/
  React.createElement("button", {
    type: "button",
    className: "arrows prev",
    onClick: () => prevOne() }, /*#__PURE__*/
  React.createElement("svg", { fill: "#FFFFFF", width: "50", height: "50", viewBox: "0 0 24 24" }, /*#__PURE__*/
  React.createElement("path", { d: "M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" }), /*#__PURE__*/
  React.createElement("path", { d: "M0 0h24v24H0z", fill: "none" }))), /*#__PURE__*/


  React.createElement("button", {
    type: "button",
    className: "arrows next",
    onClick: () => nextOne() }, /*#__PURE__*/
  React.createElement("svg", { fill: "#FFFFFF", height: "50", viewBox: "0 0 24 24", width: "50" }, /*#__PURE__*/
  React.createElement("path", { d: "M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" }), /*#__PURE__*/
  React.createElement("path", { d: "M0 0h24v24H0z", fill: "none" }))));





  return /*#__PURE__*/(
    React.createElement("section", { className: "slider" }, /*#__PURE__*/
    React.createElement("div", {
      className: "wrapper",
      style: setSliderStyles() },
    renderSlides()),

    renderArrows(), /*#__PURE__*/
    React.createElement("ul", { className: "dots-container" },
    renderDots()), /*#__PURE__*/

    React.createElement("button", {
      type: "button",
      className: "toggle-play",
      onClick: toggleAutoPlay },
    renderPlayStop())));



};

ReactDOM.render( /*#__PURE__*/React.createElement(Slider, null), document.getElementById('app'));

 

4. CodePen 에서 다운받기

https://codepen.io/mistlav/pen/wJXpXg

React Slider

오른쪽하단 > Export > Export.zip 클릭

 

5. 바로 파일로 다운받기

react-slider.zip

0.01MB