Vanila JS 🍦>> MVC SLIDER 😂😂

In this example below you will see how to do a Vanila JS 🍦>> MVC SLIDER 😂😂 with some HTML / CSS and Javascript

CSS Grid Slider with Vanilla Javascript with no jquery and using MVC Pattern for future scaling

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

<head>
  <meta charset="UTF-8">
  <title>Vanila JS 🍦>> MVC SLIDER πŸ˜‚πŸ˜‚</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <h1> Vanila JS 🍦>> MVC SLIDER πŸ˜‚πŸ˜‚ </h1>
<div class="container">
	<div id="slider">
    <img src="https://images.pexels.com/photos/36369/pexels-photo.jpg?w=940&h=650&auto=compress&cs=tinysrgb" alt="">
   <img src="https://images.pexels.com/photos/64113/pexels-photo-64113.jpeg?w=940&h=650&auto=compress&cs=tinysrgb" alt="">
		<img src="https://images.pexels.com/photos/68820/pexels-photo-68820.jpeg?w=940&h=650&auto=compress&cs=tinysrgb" alt="">
		<img src="https://images.pexels.com/photos/845930/pexels-photo-845930.jpeg?w=940&h=650&auto=compress&cs=tinysrgb" alt="">
		<img src="https://images.pexels.com/photos/848594/pexels-photo-848594.jpeg?w=940&h=650&auto=compress&cs=tinysrgb" alt="">
		<img src="https://images.pexels.com/photos/848733/pexels-photo-848733.jpeg?w=940&h=650&auto=compress&cs=tinysrgb" alt="">
  </div>
 </div>
  
  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/22mahmoud/vanila-js-andx1f366andgtandgt-mvc-slider-andx1f602andx1f602-OQRBrZ */
@import url('https://fonts.googleapis.com/css?family=Berkshire+Swash');
html,
body {
    background: #eeee;
    margin: 0;
    padding: 0;
    font-size: 18px;
    font-family: 'Berkshire Swash', cursive;
}

h1 {
	text-align: center;
}

.container {
	margin: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#slider {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 300px auto;
    grid-gap: .2em;
}

#slider img {
    cursor: pointer;
    width: 100px;
    max-width: 100px;
    height: 100px;
    max-height: 100px;
}

#slider #main-slide {
    margin: 0 auto;
    max-width: 300px;
    width: 300px;
    max-height: 300px;
    height: 300px;
    grid-row: 1;
    grid-column: 1 / 5;
    animation-name: imageFade;
    animation-duration: 1s;
    animation-timing-function: ease-in;
}

#slider #active-slide {
    opacity: .6;
}

@keyframes imageFade {
    0% {
        opacity: 0
    }
    25% {
        opacity: 0.25
    }
    50% {
        opacity: 0.5
    }
    75% {
        opacity: 0.75
    }
    100% {
        opacity: 1
    }
}

/*  Media Query  */

@media screen and (max-width: 425px) {
    #slider {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: 300px auto;
    }
    #slider img {
        width: 100px;
        max-width: 100px;
        height: 100px;
        max-height: 100px;
    }
    #slider #main-slide {
        margin: 0 auto;
        max-width: 300px;
        width: 300px;
        max-height: 300px;
        height: 300px;
        grid-row: 1;
        grid-column: 1 / 4;
    }
}

/*Downloaded from https://www.codeseek.co/22mahmoud/vanila-js-andx1f366andgtandgt-mvc-slider-andx1f602andx1f602-OQRBrZ */
const models = (() => {
  let currentImageSrc = "";

  setCurrentImage = imgSrc => (currentImageSrc = imgSrc);
  getCurrentImage = () => currentImageSrc;
  return {
    getCurrentImage,
    setCurrentImage
  };
})();

const controllers = (() => {
  init = () => views.init();
  setCurrentImage = imgSrc => {
    models.setCurrentImage(imgSrc);
    views.render();
  };
  getCurrentImage = () => models.getCurrentImage();
  return {
    init,
    setCurrentImage,
    getCurrentImage
  };
})();

const views = (() => {
  const images = document.querySelectorAll("#slider img");
  const slider = document.querySelector("#slider");

  init = () => {
    controllers.setCurrentImage(images[0].getAttribute("src"));
    images.forEach(img => {
      img.addEventListener("click", ev => {
        if (ev.target.id !== "main-slide") {
          images.forEach(img => img.removeAttribute("id"));
          controllers.setCurrentImage(ev.target.getAttribute("src"));
        }
      });
    });
  };

  render = () => {
    images.forEach(img => img.removeAttribute("id"));
    const imgSrc = controllers.getCurrentImage();
    const mainSlide = document.createElement("IMG");
    const isMain = document.querySelector("#main-slide");
    if (isMain) {
      slider.removeChild(isMain);
    }
    mainSlide.setAttribute("src", imgSrc);
    mainSlide.id = "main-slide";
    slider.insertAdjacentElement("afterbegin", mainSlide);
    images.forEach(
      img =>
        img.getAttribute("src") === imgSrc &&
        img.setAttribute("id", "active-slide")
    );
  };

  return {
    init,
    render
  };
})();

controllers.init();

Comments