Горизонтальная прокрутка работает только с первого слайда

Question

я сделал это:

HTML

<a id="1" href="#">Slide 1</a> 
<a id="2" href="#">Slide 2</a> 
<a id="3" href="#">Slide 3</a> 

<div class="scroller"> 
    <div class="container"> 
     <div id="slide-1"> 
      <h1>First slide</h1> 
      <p>content</p> 
     </div> 
     <div id="slide-2">Second</div> 
     <div id="slide-3">Third</div> 
    </div> 
</div> 

CSS

html, body { 
    padding: 0; 
    margin: 0; 
} 

.scroller { 
    width: 100%; 
    height: 400px; 
    overflow-x: hidden; 
    overflow-y: hidden; 
} 
.container { 
    height: 500px; 
    width: 500%; 
} 
.container div { 
    height: 400px; 
    width: 100vw; 
    float: left; 
} 

#slide-1 { 
    background: red; 
} 

#slide-2 { 
    background: violet; 
} 

#slide-3 { 
    background: grey; 
} 

JS

$("a").on("click", function() { 
    var e = $(this).attr("id"); 
    var t = $("#slide-" + e).position().left; 
    $(".scroller").animate({ 
     scrollLeft: t 
    }, 600) 
}) 

И демо здесь: jsfiddle.net/dxcmnpog/2/

Когда пользователь нажимает на якорь тег (а # слайд-х), сценарий должен скользить слева фактической DIV # слайд-х ,

Проблема в том, что она работает только тогда, когда видимый слайд является первым. Поэтому, когда пользователь находится на втором слайде и хочет перейти на третий слайд, он не работает.

Есть ли у вас какие-либо идеи о причинах этого? Большое спасибо.

Answer 1

$("a").on("click", function() { 
    var e = $(this).attr("id"); 
    var t = $("#slide-" + e).width()*(e-1); 
    console.log(t); 
    $(".scroller").animate({ 
     scrollLeft: t 
    }, 600) 
}) 

ДЕМО: http://jsfiddle.net/dxcmnpog/9/

Я использовал ширина() элементов, и прокрутка связан с ним. Таким образом, когда первый элемент виден (slide1/link1 -> position/scrolling равен 0, для второго - прокрутка влево: ширина * 1, третья: ширина * 2 и т. Д. И т. Д.

PS Добавить console.log (t) к вашей скрипке, и вы увидите проблему, которая вызывает больше ошибок.