Vertical Split Slider With jQuery And CSS3

Vertical Split Slider With jQuery And CSS3

A jQuery and CSS3 based vertical split slider concept that smoothly slides in left and right slides from different directions as you click the navigation arrows.

1. Add slides and navigation arrows to the split slider following the markup structure like this:

<div class="split-slider-wrapper">
  <div class="navigation">
  <i class="js-navigate js-left disabled icon-arrow-left-circle icons"></i>
  <i class="js-navigate js-right icon-arrow-right-circle icons"></i></div>
  <div class="split-slider-image">
    <div class="split-slider active"><img class="slidephoto" src="1.png"/></div>
    <div class="split-slider"><img class="slidephoto" src="2.png"/></div>
    <div class="split-slider"><img class="slidephoto" src="3.png"/></div>
    <div class="split-slider"><img class="slidephoto" src="4.png"/></div>
    <div class="split-slider"><img class="slidephoto" src="5.png"/></div>
    ...
  </div>
  <div class="split-slider-content">
    <div class="split-slider active blue">
      <div class="split-slider-page">1/8</div>
      <div class="split-slider-content-inner">
        <h1 class="slidename">Slide 1</h1>
        <div class="slidecontext">Text 1</div>
        <div class="slidecta">CTA 1</div>
      </div>
    </div>
    <div class="split-slider">
      <div class="split-slider-page">2/8</div>
      <div class="split-slider-content-inner">
        <h1 class="slidename">Slide 2</h1>
        <div class="slidecontext">Text 1</div>
        <div class="slidecta">CTA 2</div>
      </div>
    </div>
    <div class="split-slider orange">
      <div class="split-slider-page">3/8</div>
      <div class="split-slider-content-inner">
        <h1 class="slidename">Slide 3</h1>
        <div class="slidecontext">Text 3</div>
        <div class="slidecta">CTA 3</div>
      </div>
    </div>
    <div class="split-slider yellow">
      <div class="split-slider-page">4/8</div>
      <div class="split-slider-content-inner">
        <h1 class="slidename">Slide 4</h1>
        <div class="slidecontext">Text 4</div>
        <div class="slidecta">CTA 4</div>
      </div>
    </div>
    <div class="split-slider green">
      <div class="split-slider-content-inner">
        <h1 class="slidename">Slide 5</h1>
        <div class="slidecontext">Text 5</div>
        <div class="slidecta">CTA 5</div>
      </div>
      </div>
    </div>
    ...
  </div>
</div>

2. The necessary CSS/CSS3 styles for the split slider.

.split-slider-wrapper {
  display: flex;
  flex-wrap: wrap;
  background: #fff;
  box-shadow: 0 15px 35px rgba(50, 50, 93, 0.1), 0 5px 15px rgba(0, 0, 0, 0.07);
  align-self: stretch;
}
.split-slider-wrapper .split-slider-image {
  flex: 4;
  overflow: hidden;
  position: relative;
  background: #fcfcfc;
}
.split-slider-wrapper .slidephoto {
  max-width: 150%;
  position: absolute;
  right: 0;
  bottom: 120%;
  transition: all 600ms cubic-bezier(1, 0, 0, 1);
}
.split-slider-wrapper .split-slider-content {
  background: #fff;
  flex: 5;
  padding: 7%;
  text-align: center;
  min-height: 400px;
  overflow: hidden;
  position: relative;
}
.split-slider-wrapper .navigation {
  position: absolute;
  right: -10px;
  top: 60px;
  font-size: 30px;
  text-align: center;
  color: #fff;
}
.split-slider-wrapper .navigation i {
  margin: 8px;
  display: block;
  opacity: 0.6;
  cursor: pointer;
}
.split-slider-wrapper .navigation i:hover { opacity: 1; }
.split-slider-wrapper .navigation i.disabled {
  opacity: 0.2;
  pointer-events: none;
}
.split-slider-wrapper .split-slider-page {
  font: 400 28px "Playfair Display", cursive;
  position: absolute;
  top: 10px;
  right: 20px;
  color: #999;
  opacity: 0;
  transition: all 600ms cubic-bezier(1, 0, 0, 1);
}
.split-slider-wrapper .split-slider-content-inner {
  transition: all 600ms cubic-bezier(1, 0, 0, 1);
  top: 150%;
  position: absolute;
  left: 0;
  margin: 0 10%;
  right: 0;
}
.split-slider.active .split-slider-page { opacity: 1; }
.split-slider.active .slidephoto { bottom: -5%; }
.split-slider.active .split-slider-content-inner { top: 12%; }
.slidename {
  font: 900 35px Raleway;
  text-transform: uppercase;
  margin: 20px 0 5px;
  letter-spacing: 2px;
  color: var(--color);
  position: relative;
}
.slidename:before {
  content: "";
  position: absolute;
}
.slidecontext {
  font: 400 18px/1.3 "Raleway";
  color: #999;
  margin: 40px 20px;
}
.slideserving {
  font: 400 16px Raleway;
  color: var(--color);
  border: 0.5px solid var(--color);
  border-width: 0.5px 0;
  margin: 20px auto;
  max-width: 300px;
}
.slideserving svg { width: 40px; }
.slideserving svg path { fill: var(--color); }
.slideserving p {
  display: inline-block;
  vertical-align: top;
  margin: 12px 6px 6px;
}
.slidecta {
  display: block;
  padding: 15px;
  border-radius: 40px;
  background: var(--color);
  max-width: 180px;
  font-size: 20px;
  color: #fff;
  position: relative;
  margin: auto;
  top: 0;
  transition: all 200ms cubic-bezier(0.77, 0, 0.175, 1);
}
.slidecta:hover {
  top: -5px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
@media (max-width: 750px) {
.split-slider-wrapper .slidephoto { max-width: 180%; }
}

3. Insert the latest version of jQuery library into the document.

<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous">
</script>

4. The main JavaScript (jQuery script) to archive the split animation when switching between slides.

$(".js-navigate").on("click", function() {
  $(".js-navigate").removeClass("disabled");
  var current = $(".split-slider.active");
  var findNext = $(current).next(".split-slider");
  var findPrev = $(current).prev(".split-slider");
  var button = $(this);
  $(current).removeClass("active");
  setTimeout(function() {
    if ($(button).hasClass("js-right")) {
      $(findNext).addClass("active");
      checkForDisable();
    } else if ($(button).hasClass("js-left")) {
      $(findPrev).addClass("active");
      checkForDisable();
    }
  }, 300);
});
function checkForDisable() {
  var current = $(".split-slider.active");
  if ($(current).is(".split-slider:last")) {
    $(".js-right").addClass("disabled");
  } else if ($(current).is(".split-slider:first")) {
    $(".js-left").addClass("disabled");
  }
}

This awesome jQuery plugin is developed by Olivia. For more Advanced Usages, please check the demo page or visit the official website.

  • Publication date: 03.05.2018
  • Source