Проблема с простым слайдером jquery

Поэтому в качестве средства изучения jquery я создаю свой собственный слайдер, в котором каждое изображение перемещается влево, создавая приятный эффект, потому что я изменяю свойство left контейнера абсолютно позиционированных изображений.

Однако мне не удается заставить его двигаться, я просто фиксирую ширину каждого изображения в ползунке и соответствующим образом перемещаю контейнер.

Мой код:

$(document).ready(function() {
  var interval = 2000; //will move to left 450px each X seconds
  var sliders = $('.slider_image'); //counts number of sliders
  var image_width = $('.slider_image').width();
  var index = 0;
  var show_index = 0;
  var scrolledPx = 0;

  setInterval(function() {

    if (scrolledPx >= image_width * sliders.length - 1) {

      $('.sliders_container').animate({
        'left': '0px'
      }, 2000);
      scrolledPx = 0;

    } else {

      $('.sliders_container').animate({
        'left': '-= ' + image_width + ''
      }, 1000);
      scrolledPx += image_width;
    }

  }, interval);
});

/*SECTION SLIDER MARG START*/

.section_slider_marg_maincontainer {
  width: 100%;
  height: 275px;
  outline: 2px solid white;
  position: relative;
  overflow: hidden;
}

.section_slider_marg_items_container {
  width: auto;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  display: flex;
}

.section_slider_marg_item {
  height: 100%;
  width: 450px;
  outline: 2px solid red;
  background-size: cover;
}


/*SECTION SLIDER MARG END*/

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class = "section_slider_marg_maincontainer" style = "">
  <div class = "section_slider_marg_items_container sliders_container" style = "">
    <div class = "section_slider_marg_item slider_image" style = "background-image:url('img/Res1.jpg');">1</div>
    <div class = "section_slider_marg_item slider_image" style = "background-image:url('img/Res1.jpg');">2</div>
    <div class = "section_slider_marg_item slider_image" style = "background-image:url('img/Res1.jpg');">3</div>
    <div class = "section_slider_marg_item slider_image" style = "background-image:url('img/Res1.jpg');">4</div>
    <div class = "section_slider_marg_item slider_image" style = "background-image:url('img/Res1.jpg');">5</div>
    <div class = "section_slider_marg_item slider_image" style = "background-image:url('img/Res1.jpg');">6</div>
  </div>
</section>

Возможно ли, что из-за того, что вы используете одно и то же изображение для каждого слайда, кажется, что он не движется? Не уверен, какое изображение вы используете, то есть просто ли это цвет.

— 16.07.2018 19:08

Я отредактировал стиль, чтобы сделать его более очевидным

— 16.07.2018 19:40

javascript jquery css

16.07.2018 18:44

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Ответы 1

<style>
.section_slider_marg_maincontainer {
  width: 100%;
  height: 275px;
  outline: 2px solid white;
  position: relative;
  overflow: hidden;
}

.section_slider_marg_items_container {
  width: auto;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  display: flex;
}

.section_slider_marg_item {
  height: 100%;
  width: 450px;
  outline: 2px solid red;
  background-size: cover;
}

.slider_image {display: none}

/* Slideshow container */
.sliders_container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

</style>
</head>
<body>

<div class = "section_slider_marg_items_container sliders_container">

 <div class = "section_slider_marg_item slider_image">
  <img src = "res1.jpg"></div>

<div class = "section_slider_marg_item slider_image">
  <img src = "res1.jpg"></div>



<a class = "prev" onclick = "plusSlides(-1)">&#10094;</a>
<a class = "next" onclick = "plusSlides(1)">&#10095;</a>

</div>
<br>


<script>
var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("slider_image");

  if (n > slides.length) {slideIndex = 1}    
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";  
  }

  slides[slideIndex-1].style.display = "block";  

}
</script>

Проверьте это и дайте мне знать, работает ли это

16.07.2018 19:48