flexbox-slider

In this example below you will see how to do a flexbox-slider with some HTML / CSS and Javascript

Simple slideshow using flexbox

Thumbnail
This awesome code was written by albarezj, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright albarezj ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

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

  
</head>

<body>

  <nav id="mobile-nav">
  <ul class="menu">
    <li><a href="#about">About</a></li>
    <li><a href="#portfolio">Portfolio</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</nav>

<nav id="main-nav">
  <div id="logo">
    <h1>HERE</h1>
  </div>
  <ul id="nav-menu">
    <li>Home</li>
    <li>About</li>
    <li>Contact</li>
  </ul>
  <div id="mobile-hamburger">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </div>
</nav>


<div class="slider-container">
  <div>
    <img src="https://unsplash.it/1671/940/?random" alt="Slideshow Image 1">
  </div>
  <div>
    <img src="https://unsplash.it/1671/840/?random" alt="Slideshow Image 2">    
  </div>
  <div>
    <img src="https://unsplash.it/1671/740/?random" alt="Slideshow Image 3">
  </div>
  <div>  
    <img src="https://unsplash.it/1671/640/?random" alt="Slideshow Image 4">
  </div>
</div>

  <div id="arrow">jgjhghA</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>

  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/albarezj/flexbox-slider-zNpqbK */
html, body {
  padding: 0;
  margin: 0;
  background-color: #f3f3f3;
  font-family: sans-serif;
  color: orange;
}

body {
  height: 5000px;
  overflow:hidden;
}

.slider-container {
  width: 400%;
  display: flex;
  animation: change 30s infinite alternate;
}

.slider-container:hover {
  animation-play-state: paused;
}

.slider-container > div {
  width: 25%;
  background-color: black;
}

.slider-container > div > img {
  width: 100%;
}

#main-nav {
  z-index: 2;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
  color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#logo{
  padding-left: 40px;
}

#main-nav > ul {
  display: flex;
  list-style: none;
  padding-right: 40px;
}

#main-nav > ul > li:not(:last-child) {
  padding-right: 50px; 
}

#mobile-hamburger {
  display: none;
  width: 50px;
  height: 35px;
  position: relative;
  margin-right: 50px;
  transform: rotate(0deg);
  transition: .5s ease-in-out;
  cursor: pointer;
}

#mobile-hamburger > span {
  display: block;
  position: absolute;
  height: 6px;
  width: 100%;
  background: black;
  border-radius: 9px;
  opacity: 1;
  left: 0;
  transform: rotate(0deg);
  transition: .25s ease-in-out;
}

#mobile-hamburger span:nth-child(1) {
  top: 0px;
}

#mobile-hamburger span:nth-child(2),#mobile-hamburger span:nth-child(3) {
  top: 16px;
}

#mobile-hamburger span:nth-child(4) {
  top: 32px;
}

#mobile-hamburger.open span:nth-child(1) {
  top: 16px;
  width: 0%;
  left: 50%;
}

#mobile-hamburger.open span:nth-child(2) {
  transform: rotate(45deg);
}

#mobile-hamburger.open span:nth-child(3) {
  transform: rotate(-45deg);
}

#mobile-hamburger.open span:nth-child(4) {
  top: 16px;
  width: 0%;
  left: 50%;
}

#mobile-hamburger.open {
  transform: rotate(360deg);
}

#mobile-nav {
  z-index: 100;
  display: none;
}

#mobile-nav > ul {
/*   position: absolute; */
  height: 200px;
/*   width: 250px; */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  background-color: black;
  list-style: none;
  margin: 80px auto;
  margin-bottom: 0;
  padding: 0;
  top: 280px;
}

#mobile-nav > ul > li > a {
  color: white;
  text-decoration: none;
}

@keyframes change {
  0% { margin-left: 0}
  18% { margin-left: 0}
  
  25% { margin-left: -100%}
  47% { margin-left: -100%}
  
  54% { margin-left: -200%}
  76% { margin-left: -200%}

  83% { margin-left: -300%}
  100% { margin-left: -300%}
}

/* Large devices (desktops, less than 1200px) */
@media (max-width: 1199px) { 

}

/* Medium devices (tablets, less than 992px) */
@media (max-width: 991px) {
  
}

/* Small devices (landscape phones, less than 768px) */
@media (max-width: 767px) {
  #main-nav > ul {
    display: none;
  }
  
  #mobile-hamburger {
    display: block;
  }
  
}

/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575px) {
  
}



/*Downloaded from https://www.codeseek.co/albarezj/flexbox-slider-zNpqbK */
$(document).ready(function(){
	$('#mobile-hamburger').click(function(){
		$(this).toggleClass('open');
    $('#mobile-nav').slideToggle();
	});
});

Comments