Простой слайдер для установки в материал | Скрипт для сайта - Скрипты для uCoz | Делай сайт
Приветствую Вас, Гость! Регистрация
Георгиевская ленточка
Вторник, 06.12.2016
Скрипты для uCoz » Слайдер для сайта uCoz » Простой слайдер для установки в материал | Скрипт для сайта

Аудиоплеер для сайта uCozАудиоплеер с плейлистом для сайта
Видеоплеер для сайта uCozВидеоплеер с плейлистом для сайта
Меню для сайта uCozВертикальное меню для сайта uCoz
Выпадающее меню для сайта uCozГоризонтальное меню для сайта uCoz
Круглое меню для сайта uCozВид материалов для сайта uCoz
Вид материалов Аудио для uCozВид материалов Видео для uCoz
Галерея для сайта uCozГенераторы для сайта uCoz
Контейнер для контентаКнопки для сайта uCoz
Слайдер для сайта uCozСчётчик для сайта uCoz
Часы для сайта uCozТекстовые эффекты
Таблица цветов для сайта uCozЭффекты для сайта uCoz
Эффекты курсораЭффекты увеличения
Мини чат для сайта uCozРадио для сайта uCoz
Скрипты для юКозИгры для сайта uCoz
Окна для сайта uCozИнформеры для сайта uCoz
Флеш и анимации для сайтаКалендарь для сайта uCoz
Мониторинг серверов для ucozСлайдшоу для сайта uCoz



Адаптивный сайт - aTmpl



Простой слайдер для установки в материал | Скрипт для сайта

Простенький слайдер для материала страниц




Слайдер работет без скриптов .js в работе слайдера принимают участие только свойства CSS3.Слайдер довольно прост в настройке,в местах регулировок установлены комментарии для упрощения настроек.Количество изображений,ширина слайдера и высота могут быть любой.Дополнительно я его делал так что размеры применяемых изображений не имеют значения,то есть не нужно делать отдельно маленькие и большие.Сейчас в нём установлены изображения 1920Х1080,а применяемые свойства сами упаковывают изображения под нужный размер.Думаю опытный сразу заметит что дело здесь не в самом слайдере а в способе показать работу псевдокласса

  • :target.

    Это довольно полезное свойство CSS3,ради него я и сделал этот слайдер с помощью которого хочу обратить внимание на возможности применения якорей на сайте.Применяя псевдокласс можно изменять действия разных элементов,тоесть не только картинки но и цвет,размер,да всё што угодно.Полезная вещь попробуйте поэкспериментировать.К сожалению редакторы проверки кода не могут работать с псевдоадресами которыми являются якоря в слайдере,вы сможете только увидеть внешний вид слайдера.Создайте на сайте демо страницу,сделайте её не доступной и проверяйте коды.Но подозрительные и неизвестные скрипты я всётаки рекомендую проверять в редакторе,иначе сайт может глюкануть,а редактору от этого хуже не станет.




    Код слайдера для установки

    <style>
    /* -- Общий блок -- */
    #blockvsegoslaidera {
    /* -- Делаем посередине -- */
    margin:0 auto;
    padding:0;
    }
    /* -- Большой блок -- */
    #blockpokaza {
    /* -- Отступ блока -- */
    margin: 0 5px;
    /* -- Ширина блока -- */
    width:500px;
    /* -- Высота блока -- */
    height:500px;
    /* -- Упаковка изображения в блок -- */
    background-size:100% 100%;
    -moz-background-size:100% 100%;
    -webkit-background-size:100% 100%;
    /* -- Тени блока -- */
    -o-background-size:100% 100%;
    -o-box-shadow:0px 0px 7px rgba(0,0,0,0.2),
    0px 0px 0px 1px rgba(188,188,188,0.1);
    box-shadow:0px 0px 7px rgba(0,0,0,0.2),
    0px 0px 0px 1px rgba(188,188,188,0.1);
    /* -- Тени блока плавно проявляются -- */
    -webkit-transition:box-shadow 0.3s ease-in-out;
    -moz-transition:box-shadow 0.3s ease-in-out;
    -o-transition:box-shadow 0.3s ease-in-out;
    transition:box-shadow 0.3s ease-in-out;
    /* -- Закругляем края блока -- */
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -o-border-radius: 8px;
    -ms-border-radius: 8px;
    }
    /* -- Большой блок при наведении мышки -- */
    #blockpokaza:hover {
    /* -- Тени блока при наведении мышки -- */
    -o-box-shadow:0px 0px 9px rgba(0,0,0,0.4),
    0px 0px 0px 1px rgba(188,188,188,0.1);
    box-shadow:0px 0px 9px rgba(0,0,0,0.4),
    0px 0px 0px 1px rgba(188,188,188,0.1);
    }
    /* -- Маленькие блоки -- */
    .blockupravlenia {
    /* -- Высота поля блоков -- */
    height:150px;
    /* -- Отступ с низу -- */
    margin-bottom:10px;
    }
    /* -- Маленькие блоки активны -- */
    .blockupravlenia a {
    /* -- Плавающее положение -- */
    float:left;
    /* -- Отступы чтобы не слипались -- */
    margin: 0 5px;
    /* -- Вид курсора при наведении на блоки -- */
    cursor: pointer;
    /* -- Высота маленьких блоков -- */
    height: 150px;
    /* -- Ширина маленьких блоков -- */
    width: 160px;
    /* -- Тени маленьких блоков -- */
    -o-box-shadow:0px 0px 7px rgba(0,0,0,0.2),
    0px 0px 0px 1px rgba(188,188,188,0.1);
    box-shadow:0px 0px 7px rgba(0,0,0,0.2),
    0px 0px 0px 1px rgba(188,188,188,0.1);
    /* -- Плавность проявления теней -- */
    -webkit-transition:box-shadow 0.3s ease-in-out;
    -moz-transition:box-shadow 0.3s ease-in-out;
    -o-transition:box-shadow 0.3s ease-in-out;
    transition:box-shadow 0.3s ease-in-out;
    /* -- Округляем края -- */
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -o-border-radius: 8px;
    -ms-border-radius: 8px;
    }
    /* -- Маленькие блоки при наведении -- */
    .blockupravlenia a:hover {
    /* -- Тени маленьких блоков -- */
    -o-box-shadow:0px 0px 9px rgba(0,0,0,0.4),
    0px 0px 0px 1px rgba(188,188,188,0.1);
    box-shadow:0px 0px 9px rgba(0,0,0,0.4),
    0px 0px 0px 1px rgba(188,188,188,0.1);
    }
    /* -- Маленький блок с картинкой1 -- */
    .blockupravlenia .Auto1 {
    /* -- Ссылка на картинку -- */
    background: url('http://delaisait.ucoz.ru/script/img/1/Auto1.jpg');
    /* -- Упаковка картинок в размер -- */
    background-size:100% 100%;
    -moz-background-size:100% 100%;
    -webkit-background-size:100% 100%;
    -o-background-size:100% 100%;
    }
    /* -- Маленький блок с картинкой2 -- */
    .blockupravlenia .Auto2 {
    /* -- Ссылка на картинку -- */
    background: url('http://delaisait.ucoz.ru/script/img/1/Auto2.jpg');
    /* -- Упаковка картинок в размер -- */
    background-size:100% 100%;
    -moz-background-size:100% 100%;
    -webkit-background-size:100% 100%;
    -o-background-size:100% 100%;
    }
    /* -- Маленький блок с картинкой3 -- */
    .blockupravlenia .Auto3 {
    /* -- Ссылка на картинку -- */
    background: url('http://delaisait.ucoz.ru/script/img/1/Auto3.jpg');
    /* -- Упаковка картинок в размер -- */
    background-size:100% 100%;
    -moz-background-size:100% 100%;
    -webkit-background-size:100% 100%;
    -o-background-size:100% 100%;
    }
    /* -- Маленький блок с картинкой1 при смене -- */
    #Auto1:target ~ #blockizmenenia #blockpokaza {
    /* -- Ссылка на картинку -- */
    background: url('http://delaisait.ucoz.ru/script/img/1/Auto1.jpg');
    /* -- Упаковка картинок в размер -- */
    background-size:100% 100%;
    -moz-background-size:100% 100%;
    -webkit-background-size:100% 100%;
    -o-background-size:100% 100%;
    }
    /* -- Маленький блок с картинкой2 при смене -- */
    #Auto2:target ~ #blockizmenenia #blockpokaza {
    /* -- Ссылка на картинку -- */
    background: url('http://delaisait.ucoz.ru/script/img/1/Auto2.jpg');
    /* -- Упаковка картинок в размер -- */
    background-size:100% 100%;
    -moz-background-size:100% 100%;
    -webkit-background-size:100% 100%;
    -o-background-size:100% 100%;
    }
    /* -- Маленький блок с картинкой3 при смене -- */
    #Auto3:target ~ #blockizmenenia #blockpokaza {
    /* -- Ссылка на картинку -- */
    background: url('http://delaisait.ucoz.ru/script/img/1/Auto3.jpg');
    /* -- Упаковка картинок в размер -- */
    background-size:100% 100%;
    -moz-background-size:100% 100%;
    -webkit-background-size:100% 100%;
    -o-background-size:100% 100%;
    }
    </style>
    <! -- Общий блок -- >
    <table border="0" id="blockvsegoslaidera">
    <tr>
    <td>
    <! -- Привязка к смене -- >
    <span id="Auto1"></span>
    <span id="Auto2"></span>
    <span id="Auto3"></span>
    <! -- Блок управления сменой -- >
    <div class="blockupravlenia">
    <a href="#Auto1" class="Auto1"></a>
    <a href="#Auto2" class="Auto2"></a>
    <a href="#Auto3" class="Auto3"></a>
    </div>
    <div id="blockizmenenia">
    <div id="blockpokaza">
    </div>
    </div>
    </div>
    </td>
    </tr>
    </table>


    Вид слайдера материала



    Проверьте вид слайдера в редакторе

    Редактор отобразит только внешний вид,он не понимает ссылок на якоря.









  • Русские шрифты



    Ссылка:
    BB code:




  • ©
  • | Просмотров: 4405 | Добавил: IZOTOP | Рейтинг: 5.0/1
    | Теги: установить слайдер, сделать слайдер, Slyder, слайдер, uCoz

    Всего комментариев: 1
    0   Спам
    1 Steelie_Ukraine   (22.12.2013 14:45)
    Аватар Steelie_Ukraine Здравствуйте.
    Помогите пожалуйста:
    1) Сделать так, чтоб данный слайдер сразу, без кликов отображал первую картинку, а не пустой серый квадрат?
    2) Чтоб при клике на слайдер, он не центровался по экрану и вообще не прокручивал страницу.
    Спасибо.


    Добавлять комментарии могут только зарегистрированные пользователи.
    [ Регистрация | Вход ]