Vertical slider

Create a vertical slider to explore content in a different way!

Why you would love to work here

Flexible Working Hours

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Friendly Working Environment

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

We treat each other like family

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

You'll get a chance to work with senpai Vukic

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Clone

You are almost there! Clone this template by clicking the link above. Learn, play around, test, use your own content, and have fun.

View JS
View CSS

Paste this before <body> in project settings

<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
<script>
var swiper = new Swiper('.vertical-swiper', {
    direction: 'vertical',
    slidesPerView: 1,
    spaceBetween: 50,
    grabCursor: true,
    a11y: false,
    autoHeight: true,
    loop: true,
    pagination: {
      el: '.vertical-slider-pagination',
      clickable: true,
    },
    breakpoints: {
    0: {
      allowTouchMove: false,
     },
     767:{
      allowTouchMove: true,
     },
     988:{
      allowTouchMove: true,
     },
    }
  });
</script>

Paste this inside <html> tag in project settings

<style>
.swiper-pagination-bullet{
   display: block;
   width: 10px;
   height: 10px;
   background: #657CFF;
   opacity: 0.3;
   border-radius: 50%;
   margin: 6px 0px;
   cursor:pointer;
   transition: all ease 0.2s;
   }
.swiper-pagination-bullet.swiper-pagination-bullet-active {
opacity: 1;
   width:10px;
   height:10px;
}
.swiper-pagination-bullet:hover {
opacity:1;
}
@media only screen and (max-width: 567px) {
.swiper-pagination-bullet {
   margin: 0px 6px;
 }
}
</style>