全屏内容滑块仅向右滑动

Posted 2023-03-06

【中文标题】全屏内容滑块仅向右滑动

【英文标题】：Full Screen Content Slider Only Slides Right

【发布时间】：2016-10-31 01:00:36

【问题描述】：

我目前正在开发一个全屏滑块，它应该根据用户单击的按钮向左或向右移动。单击下一个时效果很好，但是单击上一个时，滑块只是淡入，而不是滑动，尽管与下一个按钮具有相同的代码（但边距相反）。

这是我正在做的事情（下一个和上一个按钮）：

    $("#prevproject").click(function(e) 
    e.preventDefault();
    //subtract 1 from i unless i is 0, then set i = 12 (last element)

    if (i == 0) 
      i = 12;
     else 
      i = i - 1;
    
    $('#project').attr('data-name', projects[i]);
    $('#project #slide').animate(
          'marginRight': '25%',
          'opacity': 0
        , 200, function() 

          switchProjects(projects[i]);

          $('#project #slide').css(
            'marginRight': '-25%'
          );
          $('#project #slide').animate(
            'marginRight': '0',
            'opacity': 1
          , 200);
          //=================================
);




);

$("#nextproject").click(function(e) 
    e.preventDefault();
    //add 1 from i unless i is 12, then set i = 0

    if (i == 12) 
      i = 0;
     else 
      i = i + 1;
    

    $('#project').attr('data-name', projects[i]);
    $('#project #slide').animate(
          'marginLeft': '25%',
          'opacity': 0
        , 200, function() 

          switchProjects(projects[i]);

          $('#project #slide').css(
            'marginLeft': '-25%'
          );
          $('#project #slide').animate(
            'marginLeft': '0',
            'opacity': 1
          , 200);
          //=================================
);

我有一个带有内部 div 的容器 div，并将幻灯片效果放在内部 div 上。内容在屏幕外通过 switchProjects 函数加载，并与新内容一起滑回。

 <div id="project">
  <div id="slide">
  <div class="row">
    <div class="column small-12 medium-4">
      <h4></h4>
      <p></p>
      <img  id="map"/> </div>
  </div>
  </div>
</div>

对于下一个但不是以前的效果很好。有什么想法吗？

【参考方案1】：

对于任何人来说。解决方案是将 marginLeft 设置为我在下一个函数中所做的与设置 marginRight 的相反。

$('#project #slide').animate(
          'marginLeft': '-25%',
          'opacity': 0
        , 200, function() 

          switchProjects(projects[i]);

          $('#project #slide').css(
            'marginLeft': '25%'
          );
          $('#project #slide').animate(
            'marginLeft': '0',
            'opacity': 1
          , 200);
          //=================================
);