Ryosuke

October 5, 2020

Hey @mikel

Thanks for your help.

I couldn't come up with this great ideas and I got it.

But It takes a little time to display and I want solve it.

Do you have any ideas?

October 5, 2020

Hey @mikel

I want to start from left end like this codepen

See the Pen YzqmjYd by ryosuke888 (@ryosuke888) on CodePen

if I add more boxes and start from left end,

once the slide is over, it will start again from the left end.

So i want to create a slide that connects forever

October 4, 2020

Hey @mikel

When commenting in, the slider loops halfway through the screen

So i want to create a slider that starts from the left edge of the screen

Do you have any ideas?

See the Pen YzqmjYd by ryosuke888 (@ryosuke888) on CodePen

October 4, 2020

Hey @mikel

Thanks your help

i have a question.

i create a slider like you and then i am creating a slider that comes from the left of the screen like this Codepen .

But when the slide finishes once, the slide strats from the left of the screen again.

Is it possible to cotinue the sliders?

See the Pen NWNQMWd by ryosuke888 (@ryosuke888) on CodePen

October 3, 2020

Sorry for the incomprehensible.

I am creating a slider that comes up from the bottom of the screen like the slider on the right, but as you can see when scrolling, the slider breaks in the middle. I want to create an infinite loop stider like the slider on the left, what should I do?

Do you have any ideas?

October 2, 2020

 <!DOCTYPE html>
<html lang="jp">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  <style>
body,
html {
  margin: 0;
  padding: 0;
  
}

ul {
  list-style: none;
}


#wrapper {
  z-index: 1000;
  overflow: hidden;
  overflow-x: hidden;
  overflow-y: hidden;
  position: fixed;
  height: 100%;  
  width: 100%;
}
.box {
  position: fixed;
  display: flex;
  justify-content: center;
  width: 100%;
  } 
 
  </style>
</head>
<body>
  <div id="wrapper">
    <div class="box">
      <div class="loop_js" id="loop_js" style="transform: translate(0%, 0%);">
        <ul>
          <li><a href="#"><img src="image/1.jpeg" alt=""height="200px" width="200px"></a></li>
          <li><a href="#"><img src="image/2.jpeg" alt="" height="200px" width="200px"></a></li>
          <li><a href="#"><img src="image/3.jpeg" alt="" height="200px" width="200px"></a></li>
          <li><a href="#"><img src="image/4.jpeg" alt="" height="200px" width="200px"></a></li>
          <li><a href="#"><img src="image/1.jpeg" alt=""height="200px" width="200px"></a></li>
          <li><a href="#"><img src="image/2.jpeg" alt="" height="200px" width="200px"></a></li>
          <li><a href="#"><img src="image/3.jpeg" alt="" height="200px" width="200px"></a></li>
          <li><a href="#"><img src="image/4.jpeg" alt="" height="200px" width="200px"></a></li>
        </ul>
      </div>
      <div class="loop_js2" id="loop_js2" style="transform: translate(0%,10%);">
        <ul>
          <li><a href="#"><img src="image/1.jpeg" alt=""height="200px" width="200px"></a></li>
          <li><a href="#"><img src="image/2.jpeg" alt="" height="200px" width="200px"></a></li>
          <li><a href="#"><img src="image/3.jpeg" alt="" height="200px" width="200px"></a></li>
          <li><a href="#"><img src="image/4.jpeg" alt="" height="200px" width="200px"></a></li>
          <li><a href="#"><img src="image/1.jpeg" alt=""height="200px" width="200px"></a></li>
          <li><a href="#"><img src="image/2.jpeg" alt="" height="200px" width="200px"></a></li>
          <li><a href="#"><img src="image/3.jpeg" alt="" height="200px" width="200px"></a></li>
          <li><a href="#"><img src="image/4.jpeg" alt="" height="200px" width="200px"></a></li>
         
        </ul>
      </div>

    </div>
  </div> 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
  <script>
$(function () {
  const loop = document.getElementById('loop_js');
  
  const loopAnim = new TimelineMax({
    repeat: -1 
  });

  let loopItem = (window.innerWidth, loop.children[0]);
  loop.appendChild(loopItem.cloneNode(true));
  loop.appendChild(loopItem.cloneNode(true));
  loop.appendChild(loopItem.cloneNode(true));

  loopAnim
    .to(loop, 30, { ease: Power0.easeNone, yPercent: -66.66666 })
    .to(loop, 0, { ease: Power0.easeNone, y: 0 });

  var mousewheelevent = 'onwheel' in document ? 'wheel' : 'onmousewheel' in document ? 'mousewheel' : 'DOMMouseScroll';
      $(document).on(mousewheelevent,function(e){
          e.preventDefault();
          var delta = e.originalEvent.deltaY ? -(e.originalEvent.deltaY) : e.originalEvent.wheelDelta ? e.originalEvent.wheelDelta : -(e.originalEvent.detail);
          if (delta < 0){
              loopAnim.time(loopAnim.time()+1);
          } else {
            loopAnim.time(loopAnim.time()-1);
          }
      });
});


$(function () {
    const loop = document.getElementById('loop_js2');
    
    const loopAnim = new TimelineMax({
      repeat: -1 
    });

    let loopItem = (window.innerWidth, loop.children[0]);
    loop.appendChild(loopItem.cloneNode(true));
    loop.appendChild(loopItem.cloneNode(true));
    loop.appendChild(loopItem.cloneNode(true));

    
    loopAnim
      .to(loop, 30, { ease: Power0.easeNone, yPercent: -66.66666 })
      .to(loop, 0, { ease: Power0.easeNone, y: 0 });

      

    var mousewheelevent = 'onwheel' in document ? 'wheel' : 'onmousewheel' in document ? 'mousewheel' : 'DOMMouseScroll';
        $(document).on(mousewheelevent,function(e){
            e.preventDefault();
            var delta = e.originalEvent.deltaY ? -(e.originalEvent.deltaY) : e.originalEvent.wheelDelta ? e.originalEvent.wheelDelta : -(e.originalEvent.detail);
            if (delta < 0){
                loopAnim.time(loopAnim.time()+1);
            } else {
              loopAnim.time(loopAnim.time()-1);
            }
        });
});


  </script>
</body>
</html>

i make vertical infinite loop slider.

On the left side, i made it but i want to make slider that phote is coming up from below like right side.

And then on the left side, it's infinite but on the right side the infinite loop stop on the way.

so i want to make vertical infinite loop slider from below like left slider's loop.

please help me

See the Pen qBZeZZa by ryosuke888 (@ryosuke888) on CodePen

Notifications

Messages

Ryosuke

Posts

Joined

Last visited

Content Type

Profiles

Forums

Store

Blog

Product

Showcase

FAQ

Downloads

Posts posted by Ryosuke

Vertical infinite loop slider

Vertical infinite loop slider

Vertical infinite loop slider

Vertical infinite loop slider

Vertical infinite loop slider

Vertical infinite loop slider