首页 \ 问答 \ 滑块内容随滑块移动(Slider content moving along with slider)

滑块内容随滑块移动(Slider content moving along with slider)

我有滑块的问题:幻灯片content应保持固定在右下角并在那里预制动画,但它首先沿滑块移动,然后动画回到位置。 我想说的是,当幻灯片进入时,它从右向左滑动,当幻灯片消失时,它会滑回到不可见的位置。

这是我的代码:

var theSlider = {
  track: document.querySelector('.m-tract-slider-wrapp'),
  // has to match `transition-duration` in CSS:
  duration: 450,
  reset: function() {
    var slides = document.querySelectorAll('.m-tract-slider-wrapp > div');
    for (var i = 0; i < slides.length; i++) {
      slides[i].className = '';
      slides[i].classList.add(i > 1 ? 'after' : (i ? 'current' : 'before'))
    }
  },

  init: function() {
    theSlider.reset();
    theSlider.track.classList.remove('not-loaded')
  },

  next: function() {
    theSlider.track.classList.add('go-right');
    setTimeout(function() {
      var firstSlide = document.querySelector('.m-tract-slider-wrapp > div:first-child');
      theSlider.track.appendChild(firstSlide);
      theSlider.reset();
      theSlider.track.classList.remove('go-right')
    }, theSlider.duration)
  },

  prev: function() {
    theSlider.track.classList.add('go-left');
    setTimeout(function() {
      var lastSlide = document.querySelector('.m-tract-slider-wrapp > div:last-child');
      theSlider.track.insertBefore(lastSlide, theSlider.track.firstChild);
      theSlider.reset();
      theSlider.track.classList.remove('go-left')
    }, theSlider.duration)
  },

  prevButton: document.querySelector('.slide-left'),
  nextButton: document.querySelector('.slide-right')
};

window.addEventListener("load", theSlider.init);
theSlider.prevButton.addEventListener('click', theSlider.prev);
theSlider.nextButton.addEventListener('click', theSlider.next);
.m-tract-slider {
  width: 100%;
  height: 75vh;
  margin: 5em auto;
  position: relative;
  overflow: hidden;
  background-color: #f5f5f5
}

.m-tract-slider-wrapp {
  height: 100%;
  -webkit-transition: all 350ms cubic-bezier(.08, .13, 0, .81);
  -moz-transition: all 350ms cubic-bezier(.08, .13, 0, .81);
  -o-transition: all 350ms cubic-bezier(.08, .13, 0, .81);
  transition: all 350ms cubic-bezier(.08, .13, 0, .81);
  opacity: 1
}

.m-tract-slider-wrapp.not-loaded {
  opacity: 0
}

.m-tract-slider-wrapp>div {
  height: 100%;
  position: absolute;
  background: transparent no-repeat 50% 50%/cover;
  width: 100%
}

.m-tract-slider-wrapp>div.before {
  margin-left: -100%
}

.m-tract-slider-wrapp>div.current+div {
  margin-left: 100%
}

.m-tract-slider-wrapp>div.current .m-tract-slide-content {
  transform: translateX(0);
  -ms-transform: translateX(0);
  -webkit-transform: translateX(0);
  -webkit-transition: transform 350ms ease-in;
  -moz-transition: transform 350ms ease-in;
  -o-transition: transform 350ms ease-in;
  transition: transform 350ms ease-in;
  transition-delay: .6s;
  margin-left: 0
}

.m-tract-slider-wrapp>div.after~div {
  opacity: 0
}

.m-tract-slide-content {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 40%;
  background: #fff;
  padding: 3em;
  margin: 0;
  height: 50vh;
  transform: translateX(100%);
  -ms-transform: translateX(100%);
  -webkit-transform: translateX(100%);
  -webkit-transition: transform 350ms ease-in;
  -moz-transition: transform 350ms ease-in;
  -o-transition: transform 350ms ease-in;
  transition: transform 350ms ease-in;
  transition-delay: .6s
}

.m-tract-slide_title {
  font-size: 32px;
  font-weight: 700;
  color: #212121
}

.m-tract-slide_text {
  font-size: 18px;
  display: block;
  margin-top: 2em;
  color: #ccc;
  font-weight: 300
}

.m-tract-slider-control {
  position: absolute;
  bottom: 0;
  left: 0;
  background: #fff;
  padding: 1em
}

.m-tract-slider-btn {
  display: inline-block;
  cursor: pointer;
  margin-left: 1em
}

.m-tract-slider-btn:first-child {
  margin-left: 0
}

.go-right div {
  transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  -webkit-transform: translateX(-100%)
}

.go-left div {
  transform: translateX(100%);
  -ms-transform: translateX(100%);
  -webkit-transform: translateX(100%)
}

.go-left div,
.go-right div {
  -webkit-transition: transform 450ms cubic-bezier(.4, 0, .2, 1);
  -moz-transition: transform 450ms cubic-bezier(.4, 0, .2, 1);
  -o-transition: transform 450ms cubic-bezier(.4, 0, .2, 1);
  transition: transform 450ms cubic-bezier(.4, 0, .2, 1)
}
<div class="m-tract-slider">
  <div class="m-tract-slider-wrapp">

    <div style="background-image:url('https://static.pexels.com/photos/126282/pexels-photo-126282.jpeg')" class="before">
      <div class="m-tract-slide-content first-slide">
        <span class="m-tract-slide_title">Gde ćeš provesti večnost?</span>
        <span class="m-tract-slide_text">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit.
          Voluptatum ea assumenda, nam quia, distinctio omnis. Aspernatur,
          molestias nostrum dolores? Voluptas sequi labore cum ipsum
          necessitatibus possimus, soluta veritatis aut dicta.
        </span>
      </div>
    </div>

    <div style="background-image:url('https://static.pexels.com/photos/29017/pexels-photo-29017.jpg')" class="current">
      <div class="m-tract-slide-content first-slide">
        <span class="m-tract-slide_title">Title 2</span>
        <span class="m-tract-slide_text">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit.
          Voluptatum ea assumenda, nam quia, distinctio omnis. Aspernatur,
          molestias nostrum dolores? Voluptas sequi labore cum ipsum
          necessitatibus possimus, soluta veritatis aut dicta.
         </span>
      </div>
    </div>

    <div style="background-image:url('https://static.pexels.com/photos/70760/dandelion-dandelion-seeds-taraxacum-fluffy-70760.jpeg')" class="after">
      <div class="m-tract-slide-content first-slide">
        <span class="m-tract-slide_title">Title 3</span>
        <span class="m-tract-slide_text">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit.
          Voluptatum ea assumenda, nam quia, distinctio omnis. Aspernatur,
          molestias nostrum dolores? Voluptas sequi labore cum ipsum
          necessitatibus possimus, soluta veritatis aut dicta.
        </span>
      </div>
    </div>

  </div>

  <div class="m-tract-slider-control">
    <div class="m-tract-slider-btn slide-left">Prev</div>
    <div class="m-tract-slider-btn slide-right">Next</div>
  </div>
</div>


I have a problem with a slider: slide content should stay fixed to the right bottom corner and preform animation there, but instead it first moves along the slider and then animates back to the position. I would like to make it that when the slide comes in it slides from right to left, and when slides goes away it slides back to position where it is not visible.

Here is my code:

var theSlider = {
  track: document.querySelector('.m-tract-slider-wrapp'),
  // has to match `transition-duration` in CSS:
  duration: 450,
  reset: function() {
    var slides = document.querySelectorAll('.m-tract-slider-wrapp > div');
    for (var i = 0; i < slides.length; i++) {
      slides[i].className = '';
      slides[i].classList.add(i > 1 ? 'after' : (i ? 'current' : 'before'))
    }
  },

  init: function() {
    theSlider.reset();
    theSlider.track.classList.remove('not-loaded')
  },

  next: function() {
    theSlider.track.classList.add('go-right');
    setTimeout(function() {
      var firstSlide = document.querySelector('.m-tract-slider-wrapp > div:first-child');
      theSlider.track.appendChild(firstSlide);
      theSlider.reset();
      theSlider.track.classList.remove('go-right')
    }, theSlider.duration)
  },

  prev: function() {
    theSlider.track.classList.add('go-left');
    setTimeout(function() {
      var lastSlide = document.querySelector('.m-tract-slider-wrapp > div:last-child');
      theSlider.track.insertBefore(lastSlide, theSlider.track.firstChild);
      theSlider.reset();
      theSlider.track.classList.remove('go-left')
    }, theSlider.duration)
  },

  prevButton: document.querySelector('.slide-left'),
  nextButton: document.querySelector('.slide-right')
};

window.addEventListener("load", theSlider.init);
theSlider.prevButton.addEventListener('click', theSlider.prev);
theSlider.nextButton.addEventListener('click', theSlider.next);
.m-tract-slider {
  width: 100%;
  height: 75vh;
  margin: 5em auto;
  position: relative;
  overflow: hidden;
  background-color: #f5f5f5
}

.m-tract-slider-wrapp {
  height: 100%;
  -webkit-transition: all 350ms cubic-bezier(.08, .13, 0, .81);
  -moz-transition: all 350ms cubic-bezier(.08, .13, 0, .81);
  -o-transition: all 350ms cubic-bezier(.08, .13, 0, .81);
  transition: all 350ms cubic-bezier(.08, .13, 0, .81);
  opacity: 1
}

.m-tract-slider-wrapp.not-loaded {
  opacity: 0
}

.m-tract-slider-wrapp>div {
  height: 100%;
  position: absolute;
  background: transparent no-repeat 50% 50%/cover;
  width: 100%
}

.m-tract-slider-wrapp>div.before {
  margin-left: -100%
}

.m-tract-slider-wrapp>div.current+div {
  margin-left: 100%
}

.m-tract-slider-wrapp>div.current .m-tract-slide-content {
  transform: translateX(0);
  -ms-transform: translateX(0);
  -webkit-transform: translateX(0);
  -webkit-transition: transform 350ms ease-in;
  -moz-transition: transform 350ms ease-in;
  -o-transition: transform 350ms ease-in;
  transition: transform 350ms ease-in;
  transition-delay: .6s;
  margin-left: 0
}

.m-tract-slider-wrapp>div.after~div {
  opacity: 0
}

.m-tract-slide-content {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 40%;
  background: #fff;
  padding: 3em;
  margin: 0;
  height: 50vh;
  transform: translateX(100%);
  -ms-transform: translateX(100%);
  -webkit-transform: translateX(100%);
  -webkit-transition: transform 350ms ease-in;
  -moz-transition: transform 350ms ease-in;
  -o-transition: transform 350ms ease-in;
  transition: transform 350ms ease-in;
  transition-delay: .6s
}

.m-tract-slide_title {
  font-size: 32px;
  font-weight: 700;
  color: #212121
}

.m-tract-slide_text {
  font-size: 18px;
  display: block;
  margin-top: 2em;
  color: #ccc;
  font-weight: 300
}

.m-tract-slider-control {
  position: absolute;
  bottom: 0;
  left: 0;
  background: #fff;
  padding: 1em
}

.m-tract-slider-btn {
  display: inline-block;
  cursor: pointer;
  margin-left: 1em
}

.m-tract-slider-btn:first-child {
  margin-left: 0
}

.go-right div {
  transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  -webkit-transform: translateX(-100%)
}

.go-left div {
  transform: translateX(100%);
  -ms-transform: translateX(100%);
  -webkit-transform: translateX(100%)
}

.go-left div,
.go-right div {
  -webkit-transition: transform 450ms cubic-bezier(.4, 0, .2, 1);
  -moz-transition: transform 450ms cubic-bezier(.4, 0, .2, 1);
  -o-transition: transform 450ms cubic-bezier(.4, 0, .2, 1);
  transition: transform 450ms cubic-bezier(.4, 0, .2, 1)
}
<div class="m-tract-slider">
  <div class="m-tract-slider-wrapp">

    <div style="background-image:url('https://static.pexels.com/photos/126282/pexels-photo-126282.jpeg')" class="before">
      <div class="m-tract-slide-content first-slide">
        <span class="m-tract-slide_title">Gde ćeš provesti večnost?</span>
        <span class="m-tract-slide_text">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit.
          Voluptatum ea assumenda, nam quia, distinctio omnis. Aspernatur,
          molestias nostrum dolores? Voluptas sequi labore cum ipsum
          necessitatibus possimus, soluta veritatis aut dicta.
        </span>
      </div>
    </div>

    <div style="background-image:url('https://static.pexels.com/photos/29017/pexels-photo-29017.jpg')" class="current">
      <div class="m-tract-slide-content first-slide">
        <span class="m-tract-slide_title">Title 2</span>
        <span class="m-tract-slide_text">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit.
          Voluptatum ea assumenda, nam quia, distinctio omnis. Aspernatur,
          molestias nostrum dolores? Voluptas sequi labore cum ipsum
          necessitatibus possimus, soluta veritatis aut dicta.
         </span>
      </div>
    </div>

    <div style="background-image:url('https://static.pexels.com/photos/70760/dandelion-dandelion-seeds-taraxacum-fluffy-70760.jpeg')" class="after">
      <div class="m-tract-slide-content first-slide">
        <span class="m-tract-slide_title">Title 3</span>
        <span class="m-tract-slide_text">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit.
          Voluptatum ea assumenda, nam quia, distinctio omnis. Aspernatur,
          molestias nostrum dolores? Voluptas sequi labore cum ipsum
          necessitatibus possimus, soluta veritatis aut dicta.
        </span>
      </div>
    </div>

  </div>

  <div class="m-tract-slider-control">
    <div class="m-tract-slider-btn slide-left">Prev</div>
    <div class="m-tract-slider-btn slide-right">Next</div>
  </div>
</div>


原文:https://stackoverflow.com/questions/44858329
更新时间:2019-09-26 18:22

相关问答

更多

需要响应内容滑块(Need a responsive content slider)

查看http://www.swipejs.com/获取基于移动设备的滑动解决方案,或对http://www.woothemes.com/flexslider进行一些调整 Check out http://www.swipejs.com/ for a mobile based swipe solution, or make some adjustments to http://www.woothemes.com/flexslider

我的简单滑块是重复的(My simple slider is repeat)

问题是在prev和下一次单击事件上,您使用类来选择滑块,因此,您正在选择两个滑块。 你想要做的是遍历dom以找到父滑块元素,这样你将只使用特定的滑块。 $nextButton = $(this); $sliderContainer = $nextButton.closest('.perso_slider_content'); 编辑:根据您的要求,这里编辑你的js代码: jQuery(window).load(function() { jQuery('#the_slider li:fir ...

JQuery内容滑块问题(JQuery content slider issues)

你必须在向下滑动-100%的动画的回调上hide() 。 function slideAnimation(moveOut, moveIn, delay1, delay2) { setTimeout(function () { $(moveOut).animate({left: '-100%'},2000,function(){ $(moveOut).hide();}); $(moveIn).show(); // Added a show() he ...

内容滑块问题(Issue with Content Slider)

css文件中的第132行引用“分页”图像路径。 如果位置已更改,则您需要更新该css文件。 防爆。 background-image:url(../img/pagination.png); 根据你上面所说的,它现在应该是: background-image:url(../../img/slider/pagination.png); Line 132 in the css file references a 'pagination' image path. If the loca ...

JQuery内容滑块?(JQuery Content slider?)

如果我理解好,你可以使用: var currentElemnt = $(".content").first(); //do something window.setTimeout(function(){ currentElement = currentElement.next(); //do something },5000); 这是超时5000毫秒。 I solved it like following, But I dont know is this the best way ...

页面之间的滑块内容不同(Diferrent slider content from page to page)

用例中最好的模块是Views Slideshow模块。 https://drupal.org/project/views_slideshow 通常创建视图,添加上下文过滤器,随意执行任何操作并根据页面动态获取内容,然后使用此视图幻灯片模块将该视图转换为幻灯片。 它有一套很棒的功能,本身就是一个非常完整的幻灯片解决方案。 The best module in your use case will be Views Slideshow module. https://drupal.org/projec ...

滑块内容随滑块移动(Slider content moving along with slider)

处理影响动画的属性时,您需要非常小心选择器。 .go-right div和.go-left div选择器正在影响.go-right和.go-left每个兄弟,而你可能只想让直接兄弟姐妹(幻灯片)受到影响,所以我用它们替换它们.go-right>div和.go-left>div : var theSlider = { track: document.querySelector('.m-tract-slider-wrapp'), // has to match `transition-du ...

将内容克隆到滑块(Cloning content to a slider)

实际上,它可能是一个完全不同的问题,可能与我在页面上有两个相同的滑块有关。 var w = $(window).width(); if (w < 769) { $('#programmeList').children('article').each(function () { var data = $(this).clone().html(); $('#slider ul').append('<li>' + data + '</li>') ...

Blogposts的内容滑块[已关闭](Content Slider for Blogposts [closed])

Bootstrap内置了一个滑块(也就是旋转木马)。 使用Bootstrap的一个优点是您的网站变得responsive (处理所有尺寸的屏幕/设备)。 这是一个 Bootstrap滑块的演示 。 或者,你可以自己动手。 以下是来自jsFiddle的几个简单滑块演示: $(function(){ $('#slider li').hide().filter(':first').show(); setInterval(slideshow, 3000); }); function sli ...

HTML内容滑块[关闭](HTML content slider [closed])

你可以看一下这个清单,我相信你最终会找到你需要的东西: http : //www.freshdesignweb.com/jquery-image-slider-slideshow.html 但如果想了解它的工作原理以及如何自己制作,请查看这篇文章: http : //css-tricks.com/creating-a-slick-auto-playing-featured-content-slider/ 如果您搜索“CSS内容滑块”或“jquery滑块”或这些关键字的任意组合,您会发现数百个结果可 ...

相关文章

更多

最新问答

更多
  • 如何保护Solr只允许SELECT请求给用户并禁止其他任何东西?(How to secure Solr to allow SELECT request to only users and disallow anything else?)
  • XPath表达式无效/错误TFHpple SWIFT 1.2(XPath Expression not working/incorrect TFHpple SWIFT 1.2)
  • css3 3D变换不能平滑地制作动画(css3 3D transform doesn't animate smoothly)
  • 运行时错误'91'和Outlook.Application = <对象变量或没有设置块变量>?(Run-time error '91' & Outlook.Application = Object variable or With block variable not set?)
  • 慢的webservice问题(Slow webservice problem)
  • textview的不正确对齐方式(Improper alignment of a textview)
  • 在第一步“Hello World”中出现Java错误(Cannot run “Hello World” program in Eclipse)
  • 为什么十六进制地址是14个字符?(why the hex address is 14 character?)
  • 如何在Python中的不同类中使用变量?(How to use variable in different classes in Python?)
  • asp:GridView HYPERLINKFIELD - datanavigateurlformatstring中的asp代码(asp:GridView HYPERLINKFIELD - asp code inside datanavigateurlformatstring)
  • 关于adaboost算法(About adaboost algorithm)
  • 在Matlab上内置图像(Built in Images on Matlab)
  • java swing:输入键事件时焦点丢失(java swing: Focus lost on enter key event)
  • C#中的通用约束,T是相同的TSomethingElse,对吧?(Generic constraints in C#, T is the same TSomethingElse, right?)
  • 从mybatis中的光标获取数据(Fetching data from cursor in mybatis)
  • 在运行时从XML构建对象的最佳方法(Best way for building objects out of XMLs at runtime)
  • 在整个窗口中拉伸sf :: Sprite(Stretch sf::Sprite across entire window)
  • Selenium Node API Web驱动程序等待超时处理程序(Selenium Node API web driver wait timeout handler)
  • 函数使用并且是map的一部分(循环依赖?)(Function uses and is part of map (circular dependency?))
  • 是否可以在C ++ 14中使用可选模板参数创建类型元组?(Is possible to make a tuple of types with optional template parameters in C++14?)
  • PHP从窗帘后面打印/ f(PHP prints /f from behind the curtains)
  • JFrame的contentPane的LayoutManager(LayoutManager of JFrame's contentPane)
  • 用于Instagram Feed的图像滚动(Image Roll Overs for Instagram Feed)
  • 如何显示拉伸字体(双倍宽度/高度)?(How to display stretched font (double width/height)?)
  • 文件操作API在fileapi.h和stdio.h中的WP8差异?(WP8 differences between file manipulation APIs in fileapi.h and stdio.h?)
  • 保存失败后Rails没有回滚事务()(Rails not rolling back transaction after failed save())
  • jqgrid中的分页问题与数组数据(Pagination problem in jqgrid with array data)
  • 重定向时,通过其他页面上的URL调用javascript函数(Call javascript function through url on otherpage while Redirecting)
  • 如何使用InvokeCommandAction调用我的方法并传入参数?(How do I go about using InvokeCommandAction to call a method of mine and pass in parameters?)
  • Jquerymobile按钮仅显示页面的第一个外观(Jquerymobile buttons are shown only first apperance of the page)