Можем ли мы показать часть изображения в jquery?

Question

Я пытаюсь сделать один слайдер изображения, в котором пользователь скользит его изображения. Я могу сделать слайдер, но есть проблема в этом .it показать one изображение за один раз. Другими словами, он показывает one изображение в ul. , но я хочу

• когда приложение запустить его показать первое изображение вдоль это показывает некоторую часть изображения двух .Увидь ниже изображения

• , когда пользователь нажимает на next .it показать второе изображение, а также показать часть третьего и первого изображений. Пример:

мы можем сделать этот тип слайдера в jquery.

Я попытался как этот

https://jsfiddle.net/uvsb6asa/10/

$(function(){ 
    $('#next').click(function(){ 
     addToMarginLeft($('.outer ul'), -210); 
    }); 
    $('#pre').click(function(){ 
     addToMarginLeft($('.outer ul'), 210); 
    }); 

    function addToMarginLeft(elem, pixels) { 
    var ml = parseFloat(elem.css('margin-left')); 
    elem.animate({ 
    'margin-left': (ml + pixels) + 'px' 
    },1000) 

    } 
}); 

Answer 1

изменения в КАС, width в .outer и margin-left в .outer ul

.outer { 
width:400px; 
overflow:hidden 
} 
.outer ul { 
    width: 610px; 
    margin:0; 
    padding:0px 
    margin-left:100px; 
} 

$(function(){ 
 
\t $('#next').click(function(){ 
 
\t \t addToMarginLeft($('.outer ul'), -210); 
 
\t }); 
 
\t $('#pre').click(function(){ 
 
\t \t addToMarginLeft($('.outer ul'), 210); 
 
\t }); 
 
    
 
    function addToMarginLeft(elem, pixels) { 
 
    \t var ml = parseFloat(elem.css('margin-left')); 
 
    elem.animate({ 
 
    'margin-left': (ml + pixels) + 'px' 
 
    },1000) 
 

 
    } 
 
});

.outer { 
 
width:300px; 
 
overflow:hidden 
 
} 
 
.outer ul { 
 
    width: 610px; 
 
    margin:0; 
 
    padding:0px 
 
    margin-left:100px; 
 

 
    
 
    
 
} 
 

 
.outer li { 
 
    display: inline-block; 
 

 
    
 
} 
 
.outer li img { 
 
    width:200px; 
 
    height:200px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="outer"> 
 
    <ul> 
 
     <li><img alt="" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQITZTZxY9nTV6pm2M0lbyXVt03SyyD9I1Th1aJ8UfeFbF2FE0oXLoUKUDd"></li> 
 
     <li><img alt="" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcT7lw5rwUWCsmOFSTUuFF84niMBZg6J9KeWhws1Ysib3VdVTM8-RA"></li> 
 
     <li><img alt="" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQITZTZxY9nTV6pm2M0lbyXVt03SyyD9I1Th1aJ8UfeFbF2FE0oXLoUKUDd"></li> 
 
    
 
    </ul> 
 
    <button id='pre'> 
 
    previous 
 
    </button> 
 
    <button id='next'> 
 
    next 
 
    </button> 
 
    
 
</div>