Чистый css3 слайдер с правой стороны не работает правильно

Я пробую написать чистый css и html слайдер для моего веб-сайта. Он должен выглядеть как this one. Он должен включать не только фотографии, но и кнопки и текст. Поэтому я подумал о <div> (этот код ниже показывает поведение divs, когда они скользят слева направо и справа налево). И все прекрасно, когда они появляются и прячутся с левой стороны. Но проблема в том, что они скользят вправо. Затем появляется полоса прокрутки и расширяется ширина браузера.Чистый css3 слайдер с правой стороны не работает правильно

Как исправить эту ошибку?

.mySliderContainer { 
 
    position: relative; 
 
    margin: 0 auto; 
 
    width: 100%; 
 
} 
 

 
.mySliderBanner { 
 
    position: absolute; 
 
    display: inline-block; 
 
    width: 100%; 
 
    height: 100px; 
 
} 
 

 
#mySliderBannerFirst { 
 
    background-color: tomato; 
 
    animation: first_banner 10s ease-out infinite; 
 
} 
 

 
@keyframes first_banner { 
 
    0% { 
 
     right: 0px; 
 
    } 
 
    23% { 
 
     right: 0px; 
 
    } 
 
    33% { 
 
     right: 100%; 
 
    } 
 
    46% { 
 
     right: 100%; 
 
    } 
 
    56% { 
 
     right: 0px; 
 
    } 
 
    89% { 
 
     right: -100%; 
 
    } 
 
    100% { 
 
     right: 0px; 
 
    } 
 
}

<!DOCTYPE html> 
 
<html> 
 
    <head></head> 
 
    <body> 
 
     <div class="mySliderContainer"> 
 
      <div id="mySliderBannerFirst" class="mySliderBanner"></div> 
 
     </div> 
 
    </body> 
 
</html>

источник

2016-03-23 Gandalf the Gay

Это не ошибка, это нормальное поведение, так как при перемещении элемента за пределы окна просмотра, он автоматически начинает прокручивать.

Update ваш CSS, как это и дать ему overflow: hidden (и она нуждается height: 100px; тоже), чтобы скрыть полосу прокрутки,

.mySliderContainer { 
    position: relative; 
    margin: 0 auto; 
    width: 100%; 
    height: 100px; 
    overflow: hidden; 
}

Образец

.mySliderContainer { 
 
    position: relative; 
 
    margin: 0 auto; 
 
    width: 100%; 
 
    height: 100px; 
 
    overflow: hidden; 
 
} 
 

 
.mySliderBanner { 
 
    position: absolute; 
 
    display: inline-block; 
 
    width: 100%; 
 
    height: 100px; 
 
} 
 

 
#mySliderBannerFirst { 
 
    background-color: tomato; 
 
    animation: first_banner 10s ease-out infinite; 
 
} 
 

 
@keyframes first_banner { 
 
    0% { 
 
     right: 0px; 
 
    } 
 
    23% { 
 
     right: 0px; 
 
    } 
 
    33% { 
 
     right: 100%; 
 
    } 
 
    46% { 
 
     right: 100%; 
 
    } 
 
    56% { 
 
     right: 0px; 
 
    } 
 
    89% { 
 
     right: -100%; 
 
    } 
 
    100% { 
 
     right: 0px; 
 
    } 
 
}

<!DOCTYPE html> 
 
<html> 
 
    <head></head> 
 
    <body> 
 
     <div class="mySliderContainer"> 
 
      <div id="mySliderBannerFirst" class="mySliderBanner"></div> 
 
     </div> 
 
    </body> 
 
</html>

источник

2016-03-23 16:58:05 LGSon

В mySliderContainer Установите переполнение до скрытого.

.mySliderContainer { 
position: relative; 
margin: 0 auto; 
width: 100%; 
overflow: hidden;

}

источник

2016-03-23 16:58:34 user1936504

Чистый css3 слайдер с правой стороны не работает правильно

ответ

Смежные вопросы