Slider wallpaper

In this example below you will see how to do a Slider wallpaper with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by wizardfly, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright wizardfly ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Slider wallpaper</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>Document</title>
</head>

<body>

  <div class="grid">
    <section class="sldWall">
      <div class="sldWallBlock">
        <ul>
          <li>
            <p>
              <strong>
								Slider wallpaper 01
							</strong> Consectetur adipisicing elit. Placeat, similique. Ea dicta, temporibus fuga debitis omnis. Possimus asperiores dolor ut provident, magnam esse libero tempora quisquam nihil. Neque, ex illo.
              <a href="#">
								Action
							</a>
            </p>
          </li>
          <li>
            <p>
              <strong>
								Slider wallpaper 02
							</strong> Consectetur adipisicing elit. Placeat, similique. Ea dicta, temporibus fuga debitis omnis. Possimus asperiores dolor ut provident, magnam esse libero tempora quisquam nihil. Neque, ex illo.
              <a href="#">
								Action
							</a>
            </p>
          </li>
          <li>
            <p>
              <strong>
								Slider wallpaper 03
							</strong> Consectetur adipisicing elit. Placeat, similique. Ea dicta, temporibus fuga debitis omnis. Possimus asperiores dolor ut provident, magnam esse libero tempora quisquam nihil. Neque, ex illo.
              <a href="#">
								Action
							</a>
            </p>
          </li>
        </ul>
      </div>
    </section>
  </div>

</body>

</html>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/wizardfly/slider-wallpaper-JNZYYe */
/* -- reset -- */

html,
body,
section,
div,
ul,
li,
a,
button,
p,
img,
strong {
  border: 0;
  padding: 0;
  margin: 0;
  text-decoration: none;
  list-style: none;
}

.grid {
  width: 95%;
  max-width:1200px;
  margin: 0 auto;
}

.sldWall {
  width: 100%;
  margin:10px 0;
}

.sldWall .sldWallBlock {
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}

.sldWall .sldWallBlock nav {
  width: 100%;
  position: absolute;
  left: 0;
  top: calc(50% - 20px);
}

.sldWall .sldWallBlock nav button {
  padding: 10px;
  position: absolute;
  top: 0;
  background: rgba(0, 0, 0, 0.5);
  color: #FFFFFF;
  text-transform: uppercase;
  font-weight: 700;
  border: 1px solid rgba(255, 255, 255, 0.59);
  margin: 0 10px;
  border-radius: 4px;
  transition: background 0.4s;
  cursor: pointer;
  display: block;
}

.sldWall .sldWallBlock nav button:hover {
  background: rgba(255, 255, 255, 0.5);
}

.sldWall .sldWallBlock nav button:first-child {
  left: 0;
}

.sldWall .sldWallBlock nav button:last-child {
  right: 0;
}

.sldWall .sldWallBlock ul {
  width: 303.04%;
  margin-left: -100%;
  transition: margin 0.4s;
  background: url('http://www.hdwallpapersfreedownload.com/uploads/large/3d-and-abstract/purple-abstract-widescreen.jpg') no-repeat center center / 100% 500%;
  padding: 5% 0;
}

.sldWall.prev .sldWallBlock ul {
  margin-left: 0;
}

.sldWall.next .sldWallBlock ul {
  margin-left: -200%;
}

.sldWall .sldWallBlock ul:after {
  content: '';
  clear: both;
  display: block;
}

.sldWall .sldWallBlock ul li {
  width: 33%;
  float: left;
}

.sldWall .sldWallBlock ul li p {
  display: block;
  text-align: center;
  font-size: 20px;
  padding: 15px 0;
  color: #FFFFFF;
  text-shadow: 1px 1px 0 #000000;
  margin: 0 auto;
  width: 85%;
  background: rgba(0, 0, 0, 0.32);
}

.sldWall .sldWallBlock ul li p strong {
  display: block;
  text-transform: uppercase;
  font-size: 25px;
  margin: 0 0 10px;
}

.sldWall .sldWallBlock ul li p a {
  display: inline-block;
  color: #00adff;
  text-transform: uppercase;
  margin: 10px 45%;
}

.sldWall .sldWallBlock ul li p a:hover {
  text-decoration: underline;
}

/*Downloaded from https://www.codeseek.co/wizardfly/slider-wallpaper-JNZYYe */
// A P P L I C A T I O N
var Wapp = Wapp || {};

// M O D U L E
//Wapp.SliderWallpaper = {};

(function(win, doc, vars) {
  "use strict";
  vars = {
    sldWall: doc.getElementsByClassName("sldWall")[0],
    sldWallBlock: doc.getElementsByClassName("sldWallBlock")[0]
  };
  
  Wapp.SliderWallpaper = function() {
    this.Init();
  };

  Wapp.SliderWallpaper.prototype = {
    Init: function() {
      var nav = doc.createElement("nav"),
        prev = doc.createElement("button"),
        next = doc.createElement("button");

      prev.textContent = "prev";
      prev.addEventListener("click", this.Prev);

      next.textContent = "next";
      next.addEventListener("click", this.Next);

      nav.append(prev, next);
      vars.sldWallBlock.append(nav);
    },
    Prev: function() {
      if (!vars.sldWall.classList.contains("prev")) {
        if (vars.sldWall.classList.contains("next")) {
          vars.sldWall.classList.remove("next");
        } else {
          vars.sldWall.classList.add("prev");
        }
      }
    },
    Next: function() {
      if (!vars.sldWall.classList.contains("next")) {
        if (vars.sldWall.classList.contains("prev")) {
          vars.sldWall.classList.remove("prev");
        } else {
          vars.sldWall.classList.add("next");
        }
      }
    }
  };

  doc.addEventListener("DOMContentLoaded", new Wapp.SliderWallpaper());
})(window, document, "Private");

Comments