помощь в доработке CSS в слайдере

Тема в разделе "Вёрстка (HTML, CSS)", создана пользователем Forter, 14 май 2014.

Статус темы:
Закрыта.
  1. Forter

    Forter

    Регистрация:
    27 мар 2013
    Сообщения:
    8
    Симпатии:
    0
    Привет!
    Нужна помощь, совет в доработке CSS слайдера.
    В Mozilla Firefox и SRWare Iron работает без проблем

    В Internet Explorer 10 и Opera 1210 просто отсутствует

    Заранее спасибо в помощи.
    Код прилагаю
    HTML:
    /* Слайдер */
    .slides{
    height:300px;
    margin:50pxauto;
    overflow:hidden;
    position:relative;
    width:900px;
    }
    .slides ul{
    list-style:none;
    position:relative;
    }
    
    /* Кадрыанимации #anim_slides */
    @-webkit-keyframes anim_slides{
    0%{
    opacity:0;
    }
    6%{
    opacity:1;
    }
    24%{
    opacity:1;
    }
    30%{
    opacity:0;
    }
    100%{
    opacity:0;
    }
    }
    @-moz-keyframes anim_slides{
    0%{
    opacity:0;
    }
    6%{
    opacity:1;
    }
    24%{
    opacity:1;
    }
    30%{
    opacity:0;
    }
    100%{
    opacity:0;
    }
    }
    
    .slides ul li{
    opacity:0;
    position:absolute;
    top:0;
    
    /* анимация css3 */
    -webkit-animation-name:anim_slides;
    -webkit-animation-duration:24.0s;
    -webkit-animation-timing-function:linear;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-direction:normal;
    -webkit-animation-delay:0;
    -webkit-animation-play-state:running;
    -webkit-animation-fill-mode:forwards;
    
    -moz-animation-name:anim_slides;
    -moz-animation-duration:24.0s;
    -moz-animation-timing-function:linear;
    -moz-animation-iteration-count:infinite;
    -moz-animation-direction:normal;
    -moz-animation-delay:0;
    -moz-animation-play-state:running;
    -moz-animation-fill-mode:forwards;
    }
    
    /* Задержки css3 */
    .slides ul li:nth-child(2),.slides ul li:nth-child(2)div{
    -webkit-animation-delay:6.0s;
    -moz-animation-delay:6.0s;
    }
    .slides ul li:nth-child(3),.slides ul li:nth-child(3)div{
    -webkit-animation-delay:12.0s;
    -moz-animation-delay:12.0s;
    }
    .slides ul li:nth-child(4),.slides ul li:nth-child(4)div{
    -webkit-animation-delay:18.0s;
    -moz-animation-delay:18.0s;
    }
    .slides ul li img{
    display:block;
    }
    
    /* Кадрыанимации #anim_titles */
    @-webkit-keyframes anim_titles{
    0%{
    left:100%;
    opacity:0;
    }
    5%{
    left:10%;
    opacity:1;
    }
    20%{
    left:10%;
    opacity:1;
    }
    25%{
    left:100%;
    opacity:0;
    }
    100%{
    left:100%;
    opacity:0;
    }
    }
    @-moz-keyframes anim_titles{
    0%{
    left:100%;
    opacity:0;
    }
    5%{
    left:10%;
    opacity:1;
    }
    20%{
    left:10%;
    opacity:1;
    }
    25%{
    left:100%;
    opacity:0;
    }
    100%{
    left:100%;
    opacity:0;
    }
    }
    
    .slides ul li div{
    background-color:#000000;
    border-radius:10px10px10px10px;
    box-shadow:005px#FFFFFF inset;
    color:#FFFFFF;
    font-size:26px;
    left:10%;
    margin:0auto;
    padding:20px;
    position:absolute;
    top:50%;
    width:200px;
    
    /* Анимация css3 */
    -webkit-animation-name:anim_titles;
    -webkit-animation-duration:24.0s;
    -webkit-animation-timing-function:linear;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-direction:normal;
    -webkit-animation-delay:0;
    -webkit-animation-play-state:running;
    -webkit-animation-fill-mode:forwards;
    
    -moz-animation-name:anim_titles;
    -moz-animation-duration:24.0s;
    -moz-animation-timing-function:linear;
    -moz-animation-iteration-count:infinite;
    -moz-animation-direction:normal;
    -moz-animation-delay:0;
    -moz-animation-play-state:running;
    -moz-animation-fill-mode:forwards;
    }
     
  2. Cyrpheus

    Cyrpheus

    Регистрация:
    10 июн 2014
    Сообщения:
    12
    Симпатии:
    2
    Для работы и выявления ошибки желательно увидеть весь слайдер, а не только стиль css. Это заметно облегчит решение проблемы, знание расположение слоев. А в пустую ковыряться в стилях - трата времени.
     
  3. Forter

    Forter

    Регистрация:
    27 мар 2013
    Сообщения:
    8
    Симпатии:
    0
    Спасибо за ответ
    молния с субботы вырубила инет
    только реанимировали
    не совсем понял насчет увидеть весь слайдер
    вот где он находится
    http://love-okna.ru
    http://vamipol.ru
    http://gealst.ru
    вот ещё проблема с добавлением новых кадров-слайдов
    первый исчезает при добавлении пятого
     
  4. alex_storm

    alex_storm дизайн, CSS Команда форума

    Регистрация:
    11 дек 2012
    Сообщения:
    1.120
    Симпатии:
    560
    @-webkit-keyframes anim_slides{
    0%{
    opacity:0;
    }
    }
    Такой стиль написания похож на less
    + -webkit-animation -moz-animation
    Только для webkit и FF
    Если посмотреть здесь, то опера 12.10 не поддерживает animation http://caniuse.com/#search=animation А IE вообще с ним работает через раз:Smile:
    Возьмите нормальный паралакс и не парьте себе мозг
     
  5. Forter

    Forter

    Регистрация:
    27 мар 2013
    Сообщения:
    8
    Симпатии:
    0
    спасибо за совет
    посоветуйте какой слайдер
    кроме того хотелось исключить всевозможные джава скрипты
    с целью исключения конфликтов библиотек
    цель - работа "поиска" работа "увеличение картинки в статьях" и работа "галереи картинок в статьях" вот как здесь http://love-okna.ru/home/okna-rehau/okna-rehau-intelio
     
  6. alex_storm

    alex_storm дизайн, CSS Команда форума

    Регистрация:
    11 дек 2012
    Сообщения:
    1.120
    Симпатии:
    560
    Используйте JS и не парьте мозг
    Слайдер паралакс работает везде, даже в IE8, конфликтов не создает. CSS еще не на таком уровне, чтобы динамику писать и прогить
     
  7. Руслан911

    Руслан911

    Регистрация:
    27 авг 2013
    Сообщения:
    63
    Симпатии:
    21
  8. Fiable

    Fiable

    Регистрация:
    16 авг 2014
    Сообщения:
    171
    Симпатии:
    107
    Я тебе посоветую этот сервис -- http://wowslider.com/ru/ там есть программа, и полное описание установки, без конфликтов.
     
  9. vlavlat

    vlavlat

    Регистрация:
    7 ноя 2012
    Сообщения:
    71
    Симпатии:
    8
    Странно конечно что в этом разделе спрашиваешь, ну да ладно. Если слайдер у тебя находится в коде и не управляется с админки Джумлы, то самый оптимальный вариант использовать Бутстрап слайдер(хотя из него можно сделать неплохой модуль для Joomla)


    А если готовый модуль под джумлу, то тут компонент Widjetkit. У него и слайдеры и галереи и куча эффектов.
     
    Lasted edited by : 30 авг 2014
Статус темы:
Закрыта.