»

 Будь в курсе событий:

slideshow na chistom css

Слайдшоу на чистом CSS
Слайдшоу на чистом CSS

Если вам по какой-то причине поднадоело встроенное джимдовское слайдшоу, то можно сделать свое собственное при помощи только лишь одного CSS.

Слайдшоу на чистом CSS

Найти для Jimdo скрипт слайдшоу не так сложно, но чтобы работа выполнялась только при помощи CSS - это уже решение не из легких. Я знаю, что пользователи наслаждаются стандартной галереей, которая встроена в саму CMS. По мне, так она приелась. Хочется чего-то нового, не такого как у всех. Почему выбор пал только на CSS? В Jimdo дела с *.js для меня вообще темный лес. Не знаю почему так, но загрузка скриптов на сам Jimdo лично на моем опыте заканчивалась либо ничем, либо печально :( Не скажу что все так плохо, но дорабатывать есть что.

Но хватит о мелочах, давайте перейдем непосредственно к самому уроку и выясним, что и как работает. Чтобы приступить к уроку, оговорюсь заранее. Не забывайте пользоваться современными браузерами, так как CSS3 - это более новая технология и требует она индивидуального подхода.

Шаг 1. CSS слайдшоу кидаем в хедер

Предлагаю внести в хедер следующий код, предварительно заключив его в <style type="text/css">...</style>.

css
@-webkit-keyframes fadeIn {
        0% {
                opacity: 0;
                
        }
        
        50% { 
                opacity: 0;
        }
        
        100% { 
                opacity: 1;
        }
}

#box {
        text-align: left;
        width: 700px; /* Длина блока слайдшоу */
        margin: 30px auto 0 auto;
        background: #000;
        overflow: hidden;
        border: 10px solid #000;
        -webkit-box-shadow: #131313 0px 2px 10px;
        -moz-box-shadow: #131313 0px 3px 10px;
        box-shadow: #131313 0px 3px 10px;        
        -webkit-animation-name: fadeIn; 
        -webkit-animation-duration: 3s; 
        -webkit-animation-iteration-count: 1;
        -webkit-animation-delay: 0s;
}

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: 35px;
        height: 35px;
        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: 0;
        left: 0;
        z-index: inherit;
        color: #fff;
        background: rgba(0, 0, 0, .5);
        width: 100%;
}

ul#slider li p span {
        line-height: 1.2em;
        padding: 10px;
        display: block;
}

@-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;
}

@-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;
}

Все комментарии в коде сводятся к двум фразам: /* длина и высота блока слайдшоу */. Эти параметры нужны для того, чтобы вы всегда смогли подогнать под размер вашего сайта данное слайдшоу. Над этим участком кода вам сильно думать не нужно. Оно и понятно, поменяли размер и дальше в бой.

Шаг 2. Ставим HTML код

Перед установкой слайшоу рекомендую закачать на любой файловый хостинг ваши изображения, либо просто на специально созданную заранее страницу на Jimdo, скрытую от посторонних глаз. Все ссылки на изображения скопируйте в блокнот и переходите далее к правке html кода. Смотрим пример:

html
  <div id="box">
      <ul id="slider">
        <li id="1">
                <!-- Определяем url картинки, а также длину и высоту блока -->
          <img src="image1.jpg" alt="альтернативное имя 1" height="438" width="700" />
          <p>
            <span>Текстовый блок 1</span>
          </p>
        </li>
        <li id="2">
                <!-- Определяем url картинки, а также длину и высоту блока -->
          <img src="image2.jpg" alt="альтернативное имя 2" height="438" width="700" />
          <p>
            <span>Текстовый блок 2</span>
          </p>
        </li>
        <li id="3">
                <!-- Определяем url картинки, а также длину и высоту блока -->
          <img src="image3.jpg" alt="альтернативное имя 3" height="438" width="700" />
          <p>
            <span>Текстовый блок 3</span>
          </p>
        </li>
        <li id="4">
                <!-- Определяем url картинки, а также длину и высоту блока -->
          <img src="image4.jpg" alt="альтернативное имя 4" height="438" width="700" />
          <p>
            <span>Текстовый блок 4</span>
          </p>
        </li>
      </ul>
          <!-- Здесь задаем размер миниатюр, размеры в px лучше не менять -->
      <ul id="thumb">
        <li>
          <a href="#1">
            <img src="image1.jpg" alt="альтернативное имя 1" height="50" width="50" />
          </a>
        </li>
        <li>
          <a href="#2">
            <img src="image2.jpg" alt="альтернативное имя 2" height="50" width="50" />
          </a>
        </li>
        <li>
          <a href="#3">
            <img src="image3.jpg" alt="альтернативное имя 3" height="50" width="50" />
          </a>
        </li>
        <li>
          <a href="#4">
            <img src="image4.jpg" alt="альтернативное имя 4" height="50" width="50" />
          </a>
        </li>
      </ul>
    </div>


Каждое новое изображение слайдшоу формирует новый id и список <li id="1">. Поэтому при добавлении новой картинки присваевайте ей новый идентификатор и формируйте список правильно, как показано на примере выше. Я думаю, не так сложно догадаться, что нужно добавлять блок самой картинки, а так же следом блок миниатюры. Причем ссылка на миниатюру может быть такой же, как и на основное изображение, так как в коде задаются размеры, которые меняют изображение автоматически. Чтобы увидеть как будет выглядеть ваше слайдшоу, необходимо просто навести на ссылку: пример.

 

Если у вас остались вопросы после прочтения урока, задавайте их.

Оставить комментарий

Комментарии: 6
  • #1

    Александр (Воскресенье, 23 Февраль 2014 20:50)

    сделал Слайдшоу на чистом CSS , подскажите там черная рамка , хотелось бы ее сделать полупрозрачной

  • #2

    Александр (Воскресенье, 23 Февраль 2014 22:32)

    точнее как увеличить кол-во фото , в хмл вроде разобрался

  • #3

    Farengate Pulse (Понедельник, 24 Февраль 2014 13:26)

    Уточните еще раз свой вопрос? Не совсем понял в чем именно разобрались, а в чем нет?

  • #4

    Игорь (Четверг, 20 Ноябрь 2014 16:51)

    Подскажите ,сделал вроде все правильно , только получилось что включается только 3 картинка и остается ,не происходит переключения на другие картинки

  • #5

    Farengate Pulse (Пятница, 21 Ноябрь 2014 17:54)

    Дайте ссылку на страницу, где вы вставили слайдер

  • #6

    Михаил (Понедельник, 30 Ноябрь 2015 12:03)

    Хороший слайдер, но пользуюсь этим обычно - http://siteacademy.ru/index.php/css/42-how-to-create-a-fast-hover-slideshow-with-css3