Question 231783 in Html Question posted in
Some basic documentation can be found here.

Html – How to move slider preview slow

I need the slider preview to move by image but now it moves immediately to the end

I tried creating the preview slider with two buttons: left and right but when I pressed right it moved to the end, while I need it to move by image
Here is the link:
https://codepen.io/alexvambato/pen/yLGBxKK

<div class="img-container1" style="float:left; margin:10px;max-width: 530px">
<!-- Create slider. -->
<style>
/* See the styles on codepen.io */
</style>
<div id="thumbelina" style="padding:5px;overflow: hidden;">
<button class="btnToLeft" onclick="toMovel()"><</button>
    <ul id="thumbelina0" style="padding:0px; width:max-content; text-align:center;display: flex;margin-bottom: 0px;margin-left: 0px;">
    <li style="padding:5px;width: auto;height: 100px;display: block;"><img src="{{preview_image}}" style="margin-top: -5px;margin-left: -5px;" /></li>
      <li style="padding:5px;width: auto;height: 100px;display: block;"><img src="{{preview_image}}"  style="margin-top: -5px;margin-left: -5px;" /></li>
      <li style="padding:5px;width: auto;height: 100px;display: block;"><img src="{{preview_image}}"  style="margin-top: -5px;margin-left: -5px;" /></li>
      <li style="padding:5px;width: auto;height: 100px;display: block;"><img  style="margin-top: -5px;margin-left: -5px;" /></li>
      <li style="padding:5px;width: auto;height: 100px;display: block;"><img src="{{preview_image}}"  style="margin-top: -5px;margin-left: -5px;" /></li>
      <li style="padding:5px;width: auto;height: 100px;display: block;"><img src="{{preview_image}}" style="margin-top: -5px;margin-left: -5px;" /></li>
    </ul>
<button class="btnToRight" onclick="toMove()">></button>
</div>
</div>
<script>
function toMove() { 
var move = document.querySelector('#thumbelina0');
move.setAttribute('style', 'padding:0px; width:max-content; text-align:center;display: flex;margin-bottom: 0px;margin-left: -300px;')
}
function toMovel() { 
var move = document.querySelector('#thumbelina0');
move.setAttribute('style', 'padding:0px; width:max-content; text-align:center;display: flex;margin-bottom: 0px;margin-left: 0px;')
}
</script>
Tags:

2

Answers


  1. 0

    To build a slider like that you would need to render the images & pictures in the same height and width.
    For instance 100px and then every img should render the images as strengthen mode.
    Once it’s done you do need to write some code in javascript like this :

    First of all, you need to define a variable that indicates slider position.

    var pos = 0; //this should be global variable

    and in movel and move functions you need to increase/decrease the value of pos.
    Based on that you can set the margin value of the slider like this :

    move.setAttribute(‘style’, ‘padding:0px; width:max-content; text-align:center;display: flex;margin-bottom: 0px;margin-left: ‘+pos*100+’px;’)

    Of course there should be limit of pos value as per image count and minus value.

    Login or Signup to reply.
  2. 0

    You need to get the width of the current image and increase/decrease the container’s margin based on that value, not a fixed -300px or 0px.

    Didn’t test it but this could work:

    let currentIndex = 0;

function toMove() { 
  const slider = document.querySelector('#thumbelina0');
  const element = document.querySelectorAll('li')[currentIndex];
  
  // there seems to be a hard-coded 10px in your style
  slider.style.marginLeft = parseInt(slider.style.marginLeft) - element.offsetWidth - 10 + 'px';
  
  currentIndex++;
}

    For moving elements to left, it’s a reverse action, so you just need to start adding the element width instead of subtracting it.

    This is a quick-and-dirty solution but my suggestion is to use scroll offset instead of working with CSS like margin-left.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search