CSS слайдер не работает в IE

0

Я использую слайдер CSS на моей странице ebay (поскольку ebay не позволяет загружать скрипты и т.д.), Но я обнаружил, что он не будет работать в IE. Coyldn't выяснить, как это исправить. Есть ли способ обойти это? Или есть слайдер без скриптов и работает в IE8+?

Вот css:

 img {
border: none;
}
a {
outline: none;
}
/* Fades in the slideshow. Hides the initial animation on the li tag.*/
@-webkit-keyframes fadeIn {
0% {
opacity: 0;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}

ul#slider {
-webkit-border-radius: 10px;
margin: 0px;
padding: 0px;
list-style: none;
position: relative;
width: 700px;
height: 438px;
overflow: hidden;
}
ul#thumb {
overflow: none;
margin: 0px 0px 0px 0px;
padding: 0px;
list-style: none;
position: relative;
background: #000;
overflow: auto;
width: 700px;
}
ul#thumb a {
-webkit-transition: opacity .2s ease-in-out;
border: 1px solid #979797;
width: 70px;
height: 50px;
display: block;
overflow: hidden;
float: right;
margin: 10px 0px 0px 10px;
opacity: 0.75;
}
ul#thumb a:hover {
opacity: 1;
}
ul#slider li {
width: 700px;
height: 438px;
position: absolute;
}
ul#slider li p {
position: absolute;
bottom: -1px;
left: 0;
z-index: inherit;
color: #fff;
background: rgba(0, 0, 0, .5);
width: 100%;
}
ul#slider li p span {
line-height: 0.5em;
padding: 10px;
display: block;
}
/* Animation for the :target image. Slides the image in. */
@-webkit-keyframes moveTarget {
0% {
left:-700px;
}
100% {
left:0px;
}
}
ul#slider li:target {
-webkit-animation-name: moveTarget;
-webkit-animation-duration: .5s;
-webkit-animation-iteration-count: 1;
top:0px;
left: 0px;
z-index: 10;
}
/*
Animation for the current image. Slides it out the frame and back to the starting position.
Adds a lower z-index than the now current image.
*/
@-webkit-keyframes moveIt {
0% {
left:0px;
}
50% {
left:700px;
}
100% {
left:-700px;
z-index: 5;
}
}
ul#slider li:not(:target) {
-webkit-animation-name: moveIt;
-webkit-animation-duration: 1.5s;
-webkit-animation-iteration-count: 1;
top:0px;
left: 0px;
}

И HTML:

    <ul id="slider"> <li id="1"> <img src="(image link)" alt="" width="700" height="438" />
</li><li id="2"> <img src="(image link)" alt="" width="700" height="438" />
</li>
<li id="3"> <img src="(image link)" alt="" width="700" height="438" />
</li>
<li id="4"> <img src="(image link)" alt="" width="700" height="438" />
</li>
<li id="5"> <img src="(image link)" alt="" width="700" height="438" />
</li>
</ul>
<ul id="thumb">
<li><a href="#1"><img src="(image link)" alt="" width="70" height="50" /></a></li>
<li><a href="#2"><img src="(image link)" alt="" width="70" height="50" /></a></li>
<li><a href="#3"><img src="(image link)" alt="" width="70" height="50" /></a></li>
<li><a href="#4"><img src="(image link)" alt="" width="70" height="50" /></a></li>
<li><a href="#5"><img src="(image link)" alt="" width="70" height="50" /></a></li>
</ul>
</div>
  • 0
    animation - это CSS3, поддерживается только в IE10 +, а ваш код предназначен только для старых браузеров webkit (Chrome / Safari / Opera), поэтому в Firefox он даже не будет работать.
Теги:
internet-explorer

3 ответа

1
Лучший ответ

К сожалению, перекрестный браузер, чистый слайд слайдера CSS, в настоящее время не является реалистичным вариантом. Использование этого слайдера вызовет проблемы в более ранних версиях Internet Explorer независимо от того, что вы делаете. Если вам нужна разумная поддержка браузера, вам придется взглянуть на ползунок, в котором используется Javascript.

1

Возможно, вы должны проверить canIuse.com, чтобы увидеть совместимость браузера. Это может быть полезно!

0

Все эти префиксы -webkit показывают, что все CSS, которые вы скопировали и вставляете, предназначено для работы только с браузерами webkit (Google Chrome, Safari и т.д.)

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

Ещё вопросы

Сообщество Overcoder
Наверх
Меню