Създаване и водене на безплатен блог на платформата Blogger. Препоръки и съвети.

Търсене

Breaking

понеделник

Интересен слайдер за блог на чист CSS

слайдер  на чист CSS
Здравейте, всички. Днес няма да откривам пред никого Америка, няма да изненадам потребителите си с нов фокус и няма да взривявам мозъците на тези, които плуват като водолази в CSS. Ще ви кажа един прост начин да инсталирате слайдер, използвайки прости CSS функции, без да се налага да използвате JS (javascript).


    Слайдерът е с бутони за навигация, без автоматично превключване, на чист CSS. Без допълнителни библиотеки. С цялата си простота изглежда доста прилично. Лесен за инсталиране. Ще се справи дори и начинаещ блогър.


    Код


    <div class="slider">
      <input type="radio" name="switch" id="btn1" checked>
      <input type="radio" name="switch" id="btn2">
      <input type="radio" name="switch" id="btn3">

      <div class="switch">
        <label for="btn1"></label>
        <label for="btn2"></label>
        <label for="btn3"></label>
      </div>

      <div class="slider-inner">
        <div class="slides">

          <img src="https://media.tvzvezda.ru/news/vstrane_i_mire/content/201711170756-ht5v.htm/1.jpg"/>

          <img src="https://icdn.lenta.ru/images/2017/10/30/17/20171030172107800/pic_1422d45d2e2fb896ddc1b5ecdbb69c7a.jpg"/>

    <img src="https://files.adme.ru/files/news/part_61/616755/preview-21983715-650x341-98-1484577240.jpg"/>
        </div>
      </div>
    </div>
    <style>
    .slider {
      position: relative;
      width: 680px;
      margin: 50px auto;
      box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.75);
    }
    .slider input[name="switch"] {
      display: none;
    }
    .switch {
      position: absolute;
      left: 0;
      bottom: -40px;
      text-align: center;
      width: 100%;
    }
    .switch label {
      display: inline-block;
      width: 8px;
      height: 8px;
      cursor: pointer;
      margin: 0 3px;
      box-shadow: 0 0 2px 0 rgba(0, 0, 0, .8);
      border-radius: 50%;
      border: 5px solid #2f363c;
      background-color: #738290;
    }
    #btn1:checked~.switch label[for="btn1"] {
      background-color: white;
    }
    #btn2:checked~.switch label[for="btn2"] {
      background-color: white;
    }
    #btn3:checked~.switch label[for="btn3"] {
      background-color: white;
    }
    .slider-inner {
      overflow: hidden;
    }
    .slides {
      width: 300%;
      transition: all 0.5s;
    }
    .slides img {
      width: 680px;
      height: 340px;
      float: left;
    }
    #btn1:checked~slider-inner slides {
      transform: translate(0);
    }
    #btn2:checked~.slider-inner .slides {
      transform: translate(-680px);
    }
    #btn3:checked~.slider-inner .slides {
      transform: translate(-1360px);
    }
    </style>

    Уточнения:


    ➤За да видите слайдера, поставете кода му в този инструмент.

    ➤В кода са маркирани адресите на моите изображения. Заменете ги със свои;

    ➤Слайдерът е предназначен за 3 слайда. Смятам , че са достатъчно. Размерите им са 680px; на 340px;

    ➤Редактираният код се инсталира в притурката HTML / JavaScript над публикациите в блога;

    ➤Ако вложите в слайдера изображенията, предвидени за дадена публикация, ще спестите място в нея.

    Очаквам предложения как да вградим слайдера с тялото на публикация. Надявам се да се отзовете.

    Ще съм благодарна да оцените моя труд и кликнете върху звездичките по-долу. Или гласувайте за блога на:

    BGtop

    Здраве за всички вас! Не забравяйте да правите добро на други хора!

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

    Публикуване на коментар