изображения не отображаются на простом слайдере

ProgramBox

изображения не отображаются на простом слайдере

Post author:admin
Запись опубликована:18 марта, 2023
Post category:Вопросы по программированию

#javascript #slider

#javascript #слайдер

Вопрос:

итак, я скопировал фрагмент кода из учебника из видео на YouTube для простого проекта слайдера, я несколько раз просматривал код и не могу понять, что с ним не так. изображения не отображаются, и если я изменю код, который находится в строке 46 JS, на starterslide, появляются изображения, но как только я дойду до третьего изображения и использую клавишу со стрелкой вправо, я получу простую белую страницу.

 const sliderImages = document.querySelectorAll(".slide")
  ,   arrowLeft    = document.querySelector ("#arrow-left")
  ,   arrowRight   = document.querySelector ("#arrow-right")
  ;
var   current = 0
  ;


function reset() {
    for(let i = 0; i < sliderImages.length; i  ) {
        sliderImages[i].style.display = "none";
    }
}

function startSlide() {
    reset();
    sliderImages[0],style.display = "block";
}

function slideLeft () {
    reset();
    sliderImages[current -1].style.display = "block";
    current--;
}

function slideRight(){
    reset();
    sliderImages[current   1].style.display = "block";
    current  ;
}


arrowLeft.addEventListener("click", function() {
    if (current === 0) {
    current = sliderImages.length;
    }
    slideLeft();
});

arrowRight.addEventListener("click", function() {
    if (current === sliderImages.lenght - 1){
    current = -1;
    }
    slideRight();
});


startSlide();

 body, #slider, .wrap, .slide-content{
    margin:0;
    padding:0;
    font-family: Arial, Helvetica, sans-serif;
    width:100%;
    height:100vh;
    overflow-x: hidden;
}

.wrap {
    position:relative
}

.slide {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.slide1 {
    background-image: url("images slider/pexels-alan-daysh-5198585.jpg");
    
}

.slide2 {
    background-image: url("images slider/pexels-barikive-5282392.jpg");
}

.slide3 {
    background-image: url("images slider/pexels-kei-scampa-3009487.jpg");
}

.slide-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.slide-content span{
    font-size: 5rem;
    color: white;
}

.arrow {
    cursor: pointer;
    position: absolute;
    top: 50%;
    margin-top: -35px;
    width: 0;
    height: 0;
    border-style: solid;
}

#arrow-left {
    border-width: 30px 40px 30px 0;
    border-color: transparent white transparent transparent;
    left: 0;
    margin-left: 30px;
}

#arrow-right{
    border-width: 30px 0 30px 40px;
    border-color: transparent transparent transparent white;
    right: 0;
    margin-right: 30px;
}

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel='stylesheet' href='style.css'>
    <title>Fullscreen Slider</title>
</head>
<body>
    <div class="wrap">
        <div id="arrow-left" class="arrow"></div>
            <div id="slider">
            <div class="slide slide1">
                <div class="slide-content">
                    <span>Image one</span>
                </div>
             </div>
             <div class="slide slide2">
                <div class="slide-content">
                    <span>Image two</span>
                </div>
             </div>
             <div class="slide slide3">
                <div class="slide-content">
                    <span>Image three</span>
                </div>
            </div>
        </div>
        
        <div id='arrow-right' class='arrow'></div>
    </div>
</body>
<script src='script.js'></script>
</html>

Ответ №1:

в коде неправильно указана длина.Я исправил, и теперь он работает нормально,

Показать фрагмент кода

 let sliderImages = document.querySelectorAll(".slide");
arrowLeft = document.querySelector("#arrow-left");
arrowRight = document.querySelector("#arrow-right");
current = 0;


function reset() {
  for (let i = 0; i < sliderImages.length; i  ) {
    sliderImages[i].style.display = "none";
  }
}

function startSlide() {
  reset();
  sliderImages[0].style.display = "block";
}

function slideLeft() {
  reset();
  sliderImages[current - 1].style.display = "block";
  current--;
}

function slideRight() {
  reset();
  sliderImages[current   1].style.display = "block";
  current  ;
}


arrowLeft.addEventListener("click", function() {
  if (current === 0) {
    current = sliderImages.length;
  }
  slideLeft();
});

arrowRight.addEventListener("click", function() {
  if (current === sliderImages.length - 1) {
    current = -1;
  }
  slideRight();
});


startSlide();

 body,
#slider,
.wrap,
.slide-content {
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
  width: 100%;
  height: 100vh;
  overflow-x: hidden;
}

.wrap {
  position: relative
}

.slide {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.slide1 {
  background-image: url("https://images.unsplash.com/photo-1519455953755-af066f52f1a6?ixlib=rb-1.2.1amp;ixid=eyJhcHBfaWQiOjEyMDd9amp;auto=formatamp;fit=cropamp;w=2261amp;q=80");
}

.slide2 {
  background-image: url("https://images.unsplash.com/photo-1519455953755-af066f52f1a6?ixlib=rb-1.2.1amp;ixid=eyJhcHBfaWQiOjEyMDd9amp;auto=formatamp;fit=cropamp;w=2261amp;q=80");
}

.slide3 {
  background-image: url("https://images.unsplash.com/photo-1519455953755-af066f52f1a6?ixlib=rb-1.2.1amp;ixid=eyJhcHBfaWQiOjEyMDd9amp;auto=formatamp;fit=cropamp;w=2261amp;q=80");
}

.slide-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.slide-content span {
  font-size: 5rem;
  color: white;
}

.arrow {
  cursor: pointer;
  position: absolute;
  top: 50%;
  margin-top: -35px;
  width: 0;
  height: 0;
  border-style: solid;
}

#arrow-left {
  border-width: 30px 40px 30px 0;
  border-color: transparent white transparent transparent;
  left: 0;
  margin-left: 30px;
}

#arrow-right {
  border-width: 30px 0 30px 40px;
  border-color: transparent transparent transparent white;
  right: 0;
  margin-right: 30px;
}

 <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Fullscreen Slider</title>
</head>

<body>
  <div class="wrap">
    <div id="arrow-left" class="arrow"></div>
    <div id="slider">
      <div class="slide slide1">
        <div class="slide-content">
          <span>Image one</span>
        </div>
      </div>
      <div class="slide slide2">
        <div class="slide-content">
          <span>Image two</span>
        </div>
      </div>
      <div class="slide slide3">
        <div class="slide-content">
          <span>Image three</span>
        </div>
      </div>

    </div>

    <div id='arrow-right' class='arrow'></div>
  </div>
</body>

</html>

Ответ №2:

Предпочитаю использовать операцию по модулю

 const
  sliderImages = document.querySelectorAll(".slide")
, arrowLeft    = document.querySelector("#arrow-left")
, arrowRight   = document.querySelector("#arrow-right")
  ;
var current = 0 ;
function setSlideMov(mov) {
  current = (current   mov   sliderImages.length) % sliderImages.length
  sliderImages.forEach((sl,i)=> {
    sl.style.display = (i==current) ? 'block' : 'none' 
  })
}
arrowLeft.addEventListener("click", function () { setSlideMov(-1) })
arrowRight.addEventListener("click", function () { setSlideMov( 1) })

setSlideMov(0);

в контексте:

Показать фрагмент кода

 const
  sliderImages = document.querySelectorAll(".slide")
, arrowLeft    = document.querySelector("#arrow-left")
, arrowRight   = document.querySelector("#arrow-right")
  ;
var current = 0 ;
function setSlideMov(mov) {
  current = (current   mov   sliderImages.length) % sliderImages.length
  sliderImages.forEach((sl,i)=> {
    sl.style.display = (i==current) ? 'block' : 'none' 
  })
}
arrowLeft.addEventListener("click", function () { setSlideMov(-1) })
arrowRight.addEventListener("click", function () { setSlideMov( 1) })

setSlideMov(0);

 body,
#slider,
.wrap,
.slide-content {
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
  width: 100%;
  height: 100vh;
  overflow-x: hidden;
}
.wrap {
  position: relative
}
.slide {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.slide1 {
  background-image: url("https://picsum.photos/id/251/500/300.jpg");
}
.slide2 {
  background-image: url("https://picsum.photos/id/257/500/300.jpg");
}
.slide3 {
  background-image: url("https://picsum.photos/id/253/500/300.jpg");
}
.slide-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.slide-content span {
  font-size: 5rem;
  color: white;
}
.arrow {
  cursor: pointer;
  position: absolute;
  top: 50%;
  margin-top: -35px;
  width: 0;
  height: 0;
  border-style: solid;
}
#arrow-left {
  border-width: 30px 40px 30px 0;
  border-color: transparent white transparent transparent;
  left: 0;
  margin-left: 30px;
}
#arrow-right {
  border-width: 30px 0 30px 40px;
  border-color: transparent transparent transparent white;
  right: 0;
  margin-right: 30px;
}

 <div class="wrap">
  <div id="arrow-left" class="arrow"></div>
  <div id="slider">
    <div class="slide slide1">
      <div class="slide-content">
        <span>Image one</span>
      </div>
    </div>
    <div class="slide slide2">
      <div class="slide-content">
        <span>Image two</span>
      </div>
    </div>
    <div class="slide slide3">
      <div class="slide-content">
        <span>Image three</span>
      </div>
    </div>
  </div>
  <div id='arrow-right' class='arrow'></div>
</div>

Вопрос:

Ответ №1:

Комментарии:

Ответ №2:

Вам также может понравиться

Диапазон дат сопоставления от до различных фреймов данных в R

Laravel — Почему на локальном хостинге только домашняя страница маршрута работает над моим проектом

.htaccess не читается с помощью XAMPP