Cant Переместить мое изображение вправо с помощью JQuery (Image Slider)

Question

Image Slider Проблема на самом деле я новичок в jquery.My цели является созданием блестящего изображения slider.I уже создать ползунок изображения с помощью JQuery из многих учебные пособия.

часть кода slider.js

$(document).ready(function(){ 
 
     $(".slider li:first-child").addClass("active"); 
 
     setTimeout(autoAddClass, 5000); 
 
     
 
     
 
     $('.next').click(function() { 
 
       nextslide();  
 
     }); 
 
      
 
      
 
     $('.previous').click(function() { 
 
       
 
     previousslide(); 
 
     
 
     }); 
 
     
 
       
 
}); 
 

 
    
 
function nextslide() 
 
{ 
 
      
 
    
 
    $('.slider li:first-child').hide('slide', {direction: 'left'}, 1000); 
 
     
 
    //$('.slider li:first-child').fadeOut().next().fadeIn().end().appendTo('.slider');  
 
} 
 
    
 
function previousslide(){ 
 
     $('.slider li:first-child').fadeOut(); 
 
     $('.slider li:last-child').prependTo('.slider').fadeOut(); 
 
     $('.slider li:first-child').fadeIn(); 
 
     setTimeout(autoAddClass, 5000); 
 
} 
 
    
 
    
 
function autoAddClass(){ 
 
    var next = $(".active").removeClass("active").next(); 
 
    if(next.length) 
 
     $(next).addClass('active'); 
 
    else 
 
     $('.slider li:first-child').addClass('active'); 
 
    setTimeout(autoAddClass, 5000); 
 
}

*{ 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.full_width{ 
 
    /*display: inline-block;*/ 
 
    display: block; 
 
    width: 100%; 
 
} 
 
.full_width.language_header{ 
 
    height: 50px; 
 
    background-color:#000; 
 
    /*margin-bottom: -5px;*/ 
 
} 
 

 
.full_width.slider_header{ 
 
    height: 600px; 
 
    background-color:#fff; 
 
    /*margin-bottom: -5px;*/ 
 
    overflow: hidden; 
 
} 
 

 
.main_content{ 
 
    /*display: inline-block;*/ 
 
     display: block; 
 
\t width:100%; 
 
\t float:left; 
 
} 
 

 
.wrapper{ 
 
    margin: 0 auto; 
 
    max-width: 1125px; 
 
    width: 100%; 
 
} 
 

 
.main_slider{ 
 
    width: 100%; 
 
    float: left; 
 
} 
 

 

 
.active{ 
 
    display: block; 
 
} 
 

 
ul{ 
 
    list-style: none; 
 
} 
 
li{ 
 
    display: block; 
 
    display: none; 
 
} 
 

 
.previous{ 
 
    color: #000; 
 
} 
 

 
.next{ 
 
    color: #000; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 
 
<div class="full_width slider_header"> 
 
    <div class="wrapper"> 
 
    <div class="main_content"> 
 
     
 
     <div class="main_slider"> 
 
     <a href="javascript:;" class="previous"> Previous </a> 
 
     <a href="#" class="next">Next </a> 
 
    <ul class="slider"> 
 
    <li><img height="100%" width="100%" alt="#Welcome" src="img/pic1.jpg"></li> 
 
    <li><img height="100%" width="100%" alt="#Welcome" src="img/pic3.jpg"></li> 
 
    <li><img height="100%" width="100%" alt="#Welcome" src="img/pic2.jpg"></li> 
 
    <li><img height="100%" width="100%" alt="#Welcome" src="img/pic4.jpg"></li> 
 
     <li><img height="100%" width="100%" alt="#Welcome" src="img/pic5.jpg"></li> 
 
    </ul> 
 
    </div>

Проблема заключается в том, когда я нажмите следующую кнопку проницаемой (от скриншота) 1-ое изображения будет двигаться дальше направо а вторая - нагрузка. i тока этого не происходит, пожалуйста, помогите.

Answer 1

Итак, вот пример того, что вы можете сделать.
Я упростил вам html. Вам не нужно много классов для слайдера JQuery.
Просто то, что я сделал это:

Это где все происходит волшебство:

.slider img { 
    transition: left 1s; 
} 

Это делает поток слева направо.
Левый может использоваться только с позиции и также установлен.

.slider img { 
    position: absolute; 
} 

анимация происходит, когда мы устанавливаем Css Свойс в Jquery:

$active.css('left', wid); 

Dont запутаться в WID его просто измерение: var wid = $active.width();

Теперь с предыдущей кнопки!

последнее редактирование: теперь это скользящий div с заголовком, который вы можете отредактировать, как вы хотите.

$(".slider .slide:first-child").addClass("active"); 
 
//setInterval(nextslide, 5000); 
 

 

 
$('.next').click(function() { 
 
    nextslide(); 
 
}); 
 

 
$('.previous').click(function() { 
 
    previousslide(); 
 
}); 
 

 
function nextslide() { 
 
    var $active = $('.slider .active'); 
 
    var wid = $active.width(); 
 
    $active.css('left', wid); 
 
    var $next; 
 
    if ($active.next().length != 0) 
 
     $next = $active.next(); 
 
    else 
 
     $next = $('.slider .slide').first() 
 
    $next.addClass("next") 
 
    setTimeout(function() { 
 
     $next.addClass('active'); 
 
     $next.removeClass("next"); 
 
     $active.removeClass('active'); 
 
     $active.css('left', 0); 
 
    }, 1000); 
 
} 
 

 
function previousslide() { 
 
    var $active = $('.slider .active'); 
 
    var $previous; 
 
    if ($active.prev().length != 0) { 
 
     $previous = $active.prev(); 
 
    } else 
 
     $previous = $('.slider .slide').last(); 
 
    
 
    var wid = $previous.width(); 
 
    $previous.css('left', wid); 
 
    setTimeout(function() { 
 
     $active.removeClass("active"); 
 
     $active.addClass("previous"); 
 
     $previous.addClass('active'); 
 
     $previous.css('left', 0); 
 
    }, 1000); 
 
    setTimeout(function() { 
 
     $active.removeClass("previous"); 
 
    }, 2000); 
 
}

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.slider .slide { 
 
    transition: left 1s; 
 
    position: absolute; 
 
    height: 100%; 
 
    width: 100%; 
 
    left: 0; 
 
    background-color: white; 
 
} 
 
.slide img { 
 
    max-width: 100%; 
 
} 
 
.slider .next { 
 
    z-index: 98; 
 
} 
 
.slider .previous { 
 
    z-index: 98; 
 
} 
 
.slider .active { 
 
    z-index: 99; 
 
} 
 
.slider { 
 
    position: relative; 
 
    height: 400px; 
 
    width: 400px; 
 
    overflow: hidden; 
 
    border: solid black 2px; 
 
    border-radius: 5px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<main> 
 
    <div class="btn-group"> 
 
     <button class="previous">previus</button> 
 
     <button class="next">Next</button> 
 
    </div> 
 
    <div class="slider"> 
 
     <div class="slide"> 
 
     <h4>Now with text and kittens!</h4> 
 
     <img src="https://www.math.ku.edu/~wsanders/Kittens/new%20kittens/Cute-little-kittens-550x365.jpg" /> 
 
     </div> 
 
     <div class="slide"> 
 
     <h4>I hope this helps you out</h4> 
 
     <img src="http://maxcdn.thedesigninspiration.com/wp-content/uploads/2012/08/Cuddling-Kittens-002.jpg" /> 
 
     </div> 
 
     <div class="slide"> 
 
     <h4>Its not so hard to modify the code. You should really try it yourself.</h4> 
 
     <img src="https://tyrannyoftradition.files.wordpress.com/2012/05/cutest-kitten-hat-ever-13727-1238540322-17.jpg" /> 
 
     </div> 
 
    </div> 
 
</main>