Javascript: instead of controlling with buttons control slider with scroll down or scroll up

user_10466632 0
Viewed 158

I have a script which will make a simple slider with buttons to navigate.

Now I need to make this slider controllable with scrolling.

When the user scrolls down, focus will be moved to the next slider, and also in reverse.

Buttons will be available too. So, there will be 2 options to control it. With buttons next and back and also with scrolling down or up.

Is there any option of how to do it in the easiest way?

var lottieone = document.getElementById('lottieone');
var lottietwo = document.getElementById('lottietwo');
var lottiethree = document.getElementById('lottiethree');
var lottiefour = document.getElementById('lottiefour');

$('#lottieone').show();
$('#lottietwo').hide();
$('#lottiethree').hide();
$('#lottiefour').hide();


function missionsSlide() {
  $('#lottieone').hide();
  $('#lottietwo').show();
  $('#lottiethree').hide();
  $('#lottiefour').hide();
}

function missionsSlideBacc() {
  $('#lottieone').hide();
  $('#lottietwo').show();
  $('#lottiethree').hide();
  $('#lottiefour').hide();
}

function researchSlide() {
  $('#lottieone').hide();
  $('#lottietwo').hide();
  $('#lottiethree').show();
  $('#lottiefour').hide();
}

function educationSlide() {
  $('#lottieone').hide();
  $('#lottietwo').hide();
  $('#lottiethree').hide();
  $('#lottiefour').show();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="slider">
  <div id="lottieone" class="lottieSlide">
    <div class="content">
      <button onclick="missionsSlide()">HOME</button>
    </div>
  </div>
  <div id="lottietwo" class="lottieSlide mainSliders">
    <div class="content">
      <h1>MISSIONS</h1>
      <button onclick="researchSlide()">Next</button>
    </div>
  </div>
  <div id="lottiethree" class="lottieSlide mainSliders">
    <div class="content">
      <h1>RESEARCH</h1>
      <button onclick="missionsSlideBacc()">Back</button>
      <button onclick="educationSlide()">Next</button>
    </div>
  </div>
  <div id="lottiefour" class="lottieSlide mainSliders">
    <div class="content">
      <h1>EDUCATION</h1>
      <button onclick="researchSlide()">Back</button>
    </div>
  </div>
</section>

jquery javascript
1 Answers
  • use an i index.
  • Create prev() and next() functions
  • Use the "wheel" Event and its deltaY
  • Use CSS transition and transform translateX() for a better UX effect
  • Use a flag to prevent too many scrolls-animations - and use "transitionend" to reset the flag

$(".slider").each(function() {

  let i = 0; // Start at slide index 0

  const $btns = $(".prev, .next", this);
  const $slides = $(".slides", this);
  const $slide = $(".slide", this);
  const tot = $slide.length;
  const mod = (n, max) => ((n % max) + max) % max;
  let canWheel = true;
  
  $slides.on("transitionend", () => canWheel = true);

  const anim = () => {
    $slides.css({transform: `translateX(${-100*i}%)`});
  };

  const prev = () => {
    i = mod(--i, tot);
    anim();
  };

  const next = () => {
    i = mod(++i, tot);
    anim();
  };

  $btns.on("click", (evt) => $(evt.currentTarget).is(".prev") ? prev() : next());
  $(this).on('wheel', (evt) => {
    evt.preventDefault();
    if (!canWheel) return;
    canWheel = false;
    evt.originalEvent.deltaY < 0 ? prev() : next();
  });
  anim(); // INIT!

});
/*QuickReset*/ * {margin: 0; box-sizing: border-box; }

.slider {
  position: relative;
  overflow: hidden;
}

.slides {
  display: flex;
  flex-flow: row nowrap;
  transition: 1s;
}

.slide {
  flex: 0 0 100%;
}
<section class="slider">
  <div class="slides">
    <div class="slide">
      <h1>HOME</h1>
      <button type="button" class="next">Missions &rarr;</button>
    </div>
    <div class="slide">
      <h1>MISSIONS</h1>
      <button type="button" class="prev">&larr;Home</button>
      <button type="button" class="next">Research &rarr;</button>
    </div>
    <div class="slide">
      <h1>RESEARCH</h1>
      <button type="button" class="prev">&larr; Missions</button>
      <button type="button" class="next">Education &rarr;</button>
    </div>
    <div class="slide">
      <h1>EDUCATION</h1>
      <button type="button" class="prev">&larr; Research</button>
      <button type="button" class="next">HOME</button>
    </div>
  </div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>

user_3839040
Related