Красивый раздвигающийся слайдер изображений с текстом внутри.


Здравствуйте, друзья. Предлагаю вам слайдер на CSS без использования Java и библиотеки jQuery. Так что он не будет сильно влиять на загрузку блога. Установить его не сложно. Всё делается прямо в редакторе сообщения или в гаджете HTML/JavaScript.

Очень симпатично смотрится на странице. При наведении курсора на изображение,
картинки раздвигаются и открывается скрытый текст, который тоже оформлен в красивом блоке. Посмотрите, пожалуйста здесь, как это выглядит.

Если вы нашли применение такому варианту оформления, копируйте себе в блокнот код, приведённый ниже.

<style>
.Slidebox{
float:center;
}
.cover {
position: relative;
width: 590px;
height: 282px;
margin: 20px auto;
background-color: #f7f7f7;
z-index: 1;
padding: 10px;
-webkit-box-shadow: 0 2px 10px rgba(0,0,0,0.3);
-mox-box-shadow: 0 2px 10px rgba(0,0,0,0.3);
box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}
.left_gate{
position: absolute;
background: #DBDCDE;
bottom: 0; right: 50%;
left: 0;
top: 0;
border:1px solid #F0F0F0;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
-o-transition:all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.cover:hover .left_gate{
right: 100%;
left: -50%;
}

.right_gate{
position: absolute;
background: #DBDCDE;
bottom: 0;
left: 50%;
right: 0;
top: 0;
border:1px solid #F0F0F0;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.cover:hover .right_gate{
left: 100%;
right: -50%;
}
.slide_in {
overflow: hidden;
}
.slide_in .left_gate {
background: url(картинка слева )#DBDCDE;
border:1px solid #F0F0F0;
}
.slide_in .right_gate {
background: url(картинка справа )#DBDCDE;
border:1px solid #F0F0F0;
}
.cover img {
margin-top: 15px;
}
</style>

<br />
<div class="Slidebox">
<div class="cover slide_in">
<div class="left_gate">
</div>
<div class="right_gate">
</div>
Здесь ваш спрятанный текст.
</div>
</div>
</div>


Подберите свои изображения и вставьте их адрес в строки, отмеченные красным цветом. Первое это картинка слева, второе - справа.

Ширину и высоту всего блока я отметила синим цветом.  Задний фон тоже. Все эти значения можно поменять на свои.

Мои картинки я взяла размером 300 x 300 px. Так они корректнее отобразились. Тут нужно будет поэкспериментировать если измените какие-то стили в коде.

Устанавливается код раздвигающегося слайдера непосредственно в редакторе сообщений в нужном месте, в режиме HTML.

здесь можно оформить подписку на новые шпаргалки

Введите Ваш email


22 комментария:

  1. Виктория, я сделала на тестовом блоге. Слайдер сам получился, раздвигается, виден текст. Но картинок нет. Вместо них пустота! Ровно картинки 300х300 сделать не могу. Получилось приблизительно. Может быть в этом все дело?

    ОтветитьУдалить
  2. Ирина, можно сделать чуть больше или меньше. А у тебя тестовый индексируется поисковиками. Если нет то и картинки могут не отображаться.

    ОтветитьУдалить
  3. Виктория, нет он не индексируется! Значит вот в чем дело. Тогда на моих блогах все получится! СПАСИБО! В новом посте поставлю слайдер. Тебе сообщу. СПАСИБО!

    ОтветитьУдалить
  4. Ирина, но всё же картинки постарайся подогнать-это важно. В той же программе Paint на компе это просто сделать.

    ОтветитьУдалить
  5. Вика, привет. Спасибо большое. Интересный вариант, получился на пробном блоге http://000149.blogspot.ru/2016/10/blog-post_29.html. Буду иногда использовать.

    ОтветитьУдалить
  6. Очень интересный эффект!!! Спасибо Вика!!!

    ОтветитьУдалить
  7. Любовь и Татьяна, спасибо вам за отзыв. Вы со своей фантазией всегда здорово всё реализуете. Это я когда тестирую всё на скорую руку.
    Татьяна, кстати, подобным образом на Вашем блоке можно и советы какие-то писать подобным способом иногда.

    ОтветитьУдалить
    Ответы
    1. Спасибо Вика, я как раз об этом подумала ))

      Удалить
    2. У Вас всё получится.

      Удалить
  8. Ирина, ты не правильно вставила адреса картинок. У тебя так
    background: https://sites.google.com/site/aiknigairina/sat-ok/0a15e71c8631cb47d41bc60fd01a1a73.jpg
    а надо
    ackground: url( https://sites.google.com/site/aiknigairina/sat-ok/d644297035a2824ced775d4a7682c23f_i-3486.jpg)

    ОтветитьУдалить
  9. Виктория! УРА! Все получилось! Посмотри Блог Кота Васьки. Я думала, что слово URL и скобки надо убрать. Сейчас и на тестовом исправлю. Может тоже получится. Еще я хотела у тебя спросить этот пост на блоге Васьки уже 101 и я в Google Search Console добавила новую карту сайта, как ты меня учила - atom.xml?redirect=false&start-index=101&max-results=100. А в Яндекс вебмастер что надо добавлять?

    ОтветитьУдалить
  10. Ирина, ничего в кодах не надо убирать. В яндекс добавляешь свой robots.txt полностью. и сайтмап вот так http://www.shpargalochki.ru/Sitemap

    ОтветитьУдалить
  11. Виктория помогите пожалуйста!!!! Не могу разобраться где брать адрес картинки

    ОтветитьУдалить
    Ответы
    1. Ольга, а где у вас находится изображение которое хотите загрузить?

      Удалить
  12. Понятно. Советую Вам загрузить фото в черновик Блоггер. И потом в редакторе перейти в режим HTML и скопировать там адрес. Черновик пока можно сохранить. Некоторые так делают. Код будет большой но нужно взять только вот такой участок href="https:// тут много много всего и заканчивается jpg. Если картинка у Вас уже опубликована и размещена в блоге-просто кликнете по ней правой кнопкой мыши и выберете копировать URL и вставляйте.
    Вообще лучше фотки с компьютера хранить не стороннем хостинге. Ведь со временем их очень много накапливается.
    Еще вариант о хранении картинок можно прочитать здесь. http://www.shpargalochki.ru/2014/08/google-sajt-kak-hranilishhe-fajlov.html

    ОтветитьУдалить
  13. Огромное Вам спасибо за ваши рекомендации, они мне помогли.А где на вашем блоге можно найти информацию про то как разместить слайд - шоу

    ОтветитьУдалить
    Ответы
    1. Ольга, приятно слышать, что информация оказалась полезной и у Вас всё получилось. Про слайд-шоу можно почитать
      http://www.shpargalochki.ru/2016/05/krasivyj-slajder-izobrazhenij.html
      http://www.shpargalochki.ru/2015/06/kak-sozdat-slaid-shou-na-yndeks-fotkah.html
      Галерея изображений http://www.shpargalochki.ru/2015/09/prostaja-galereja-miniatjur-s-jeffektom-uvelichenija-kartink.html
      Можно сделать в виде презентации http://www.shpargalochki.ru/2014/07/sdelat-prezentaciju-v-google-docs.html

      Удалить
  14. Спасибо Интересно смотрится, надо будет опробовать))

    ОтветитьУдалить
  15. А можно сделать прозрачные "Ворота"? Чтобы за картинкой было видно текст.

    ОтветитьУдалить
    Ответы
    1. Black Inari не совсем Вас поняла. Вы имеете ввиду без картинки или что.

      Удалить

Пользовательский поиск