Siema - add arrows navigation to prototype

In this example below you will see how to do a Siema - add arrows navigation to prototype with some HTML / CSS and Javascript

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

<head>
  <meta charset="UTF-8">
  <title>Siema - add arrows navigation to prototype</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="siema">
  <div><img src="https://pawelgrzybek.com/siema/assets/siema--pink.svg" alt="Siema image" /></div>
  <div><img src="https://pawelgrzybek.com/siema/assets/siema--yellow.svg" alt="Siema image" /></div>
  <div><img src="https://pawelgrzybek.com/siema/assets/siema--pink.svg" alt="Siema image" /></div>
  <div><img src="https://pawelgrzybek.com/siema/assets/siema--yellow.svg" alt="Siema image" /></div>
</div>

<div class="siema">
  <div><img src="https://pawelgrzybek.com/siema/assets/siema--pink.svg" alt="Siema image" /></div>
  <div><img src="https://pawelgrzybek.com/siema/assets/siema--yellow.svg" alt="Siema image" /></div>
  <div><img src="https://pawelgrzybek.com/siema/assets/siema--pink.svg" alt="Siema image" /></div>
  <div><img src="https://pawelgrzybek.com/siema/assets/siema--yellow.svg" alt="Siema image" /></div>
</div>

<div class="siema">
  <div><img src="https://pawelgrzybek.com/siema/assets/siema--pink.svg" alt="Siema image" /></div>
  <div><img src="https://pawelgrzybek.com/siema/assets/siema--yellow.svg" alt="Siema image" /></div>
  <div><img src="https://pawelgrzybek.com/siema/assets/siema--pink.svg" alt="Siema image" /></div>
  <div><img src="https://pawelgrzybek.com/siema/assets/siema--yellow.svg" alt="Siema image" /></div>
</div>
  <script src='https://pawelgrzybek.com/siema/assets/siema.min.js'></script>

  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/pawelgrzybek/siema-add-arrows-navigation-to-prototype-yVxmEp */
body {
  width: 100%;
  max-width: 30rem;
  margin: 0 auto;
}

img {
  width: 100%;
}

.siema {
  margin: 1rem 0;
  position: relative;
}

button:nth-of-type(1) {
  position: absolute;
  left: 0;
  top: 50%;
}

button:nth-of-type(2) {
  position: absolute;
  right: 0;
  top: 50%;
}


/*Downloaded from https://www.codeseek.co/pawelgrzybek/siema-add-arrows-navigation-to-prototype-yVxmEp */
// Because this is possible
// It doesn't mean that this is a best solution
// This is a case when you may look at some more complex tools
// Like very cool Flickity or Swiper

var siemas = document.querySelectorAll('.siema');

// Extend prototype with method that adds arrows to DOM
// Style the arrows with CSS or JS — up to you mate
Siema.prototype.addArrows = function () {
  var _this = this;

  // make buttons & append them inside Siema's container
  this.prevArrow = document.createElement('button');
  this.nextArrow = document.createElement('button');
  this.prevArrow.textContent = 'previous slide';
  this.nextArrow.textContent = 'next slide';
  this.selector.appendChild(this.prevArrow);
  this.selector.appendChild(this.nextArrow);

  // event handlers on buttons
  this.prevArrow.addEventListener('click', function () {
    return _this.prev();
  });
  this.nextArrow.addEventListener('click', function () {
    return _this.next();
  });
};

// this is fairly new way of looping through DOM Elements
// More about ithere: https://pawelgrzybek.com/loop-through-a-collection-of-dom-elements/
// For better compatibility I suggest using for loop
var _iteratorNormalCompletion = true;
var _didIteratorError = false;
var _iteratorError = undefined;

try {
  for (var _iterator = siemas[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
    var siema = _step.value;

    var instance = new Siema({
      selector: siema
    });
    instance.addArrows();
  }
} catch (err) {
  _didIteratorError = true;
  _iteratorError = err;
} finally {
  try {
    if (!_iteratorNormalCompletion && _iterator.return) {
      _iterator.return();
    }
  } finally {
    if (_didIteratorError) {
      throw _iteratorError;
    }
  }
}

Comments