Бизнес блог Александра Быкадорова

Как сделать слайдер без плагина. Простой способ

Слайдер сайдбара

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

Привет — привет, на связи снова я — Александр Быкадоров.

Как сделать слайдер без плагина за 10 минут

Все Вы знаете, что недавно я сменил дизайн блога. Остались еще некоторые недоработки. Верстальщик тупо «динамит». То ли действительно занят, то ли не хочет исправлять недоработки своей работы.

А поработать есть над чем.

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

Да и вообще: где это было видано, чтобы блоггер версткой занимался )))

Нет уж, увольте: я и так больше двух лет угрохал на то, что во все нюансы вникал. Нет чтобы продвижением заниматься, еще больше полезного контента выдавать, так нет же — я все возюкался в коде, что то настраивал, улучшал.

Все это позади. Отвлекся я от основной темы.

Зачем нужен слайдер на блоге?

Однако, нет — нет, но меня тянет на разные «подвиги». Так уж я устроен, что люблю до разных вещей доходить сам. Вот и в этот раз, не обошлось без этого.

Задумал я установить на своем блоге, в сайдбаре слайдер…

Ах да, зачем нужен слайдер на блоге? И что такое слайдер вообще?

Слайдер — меняющиеся со временем в автоматическом и ручном режиме разные заставки, картинки. Что бы было понятнее — взгляните в правую колонку моего блога (сайдбар).

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

Слайдер здорово экономит рабочее место блога.

На самом деле, если он грамотно реализован — то загрузка блога будет минимальной. В сети есть большое количество разных плагинов, которые отлично реализуют данную возможность. Но раз сейчас «мода» на избавление от разных плагинов, я так же решил не отставать от этого.

Сейчас у меня на блоге трудится 9 плагинов. Был у меня соблазн настроить вывод слайдера плагином, но я решил, что стоит браться «за старое». Не хочу засорять блог плагинами и все тут.

Поискав информацию в сети, я нашел отличное решение.

Код для слайдера

Сразу: с места — в карьер.

Держите мой код, который я вставил в сайдбар:

<marquee onmouseover=»this.scrollAmount=’0.5′» onmouseout=»this.scrollAmount=’3′» scrollamount=»3″ hspace=»10″ direction=»up» width=»250″ height=»250″>

<br>

<a target=»_blank» href=»http://netnachalnika.ru/wppage/blog-svoimi-rukami-nachalo/»><img alt=»Блог своими руками:Начало» src=»//alexandrbykadorov.ru/wp-content/themes/bykadorov/img/ads1.jpg»/>

<a target=»_blank» href=»http://netnachalnika.ru/wppage/obman_setevogo_marketinga/»><img alt=»7 Величайших обманов сетевого маркетинга» src=»//alexandrbykadorov.ru/wp-content/themes/bykadorov/img/ads2.jpg»/>

<a target=»_blank» href=»http://netnachalnika.ru/fishki_bloga/»><img alt=»Фишки блоге» src=»//alexandrbykadorov.ru/wp-content/uploads/2014/09/sekr_fishki.png»/>

<a target=»_blank» href=»http://netnachalnika.ru/book/»><img alt=»Рейтинг блога» src=»//alexandrbykadorov.ru/wp-content/uploads/2013/04/book-217×300.jpg»/>

<a target=»_blank» href=»http://netnachalnika.ru/wppage/effect_blog/»><img alt=»Запись вебинара: Эффективный блог-легко» src=»//alexandrbykadorov.ru/wp-content/uploads/2014/09/effect_blog_foto.png»/>

</marquee>

Давайте разберемся что за что отвечает:

scrollamount=»3″ — здесь можете поставить число от 1 до 10, оно отвечает за скорость прокрутки (смены) Ваших слайдов (картинок)

hspace=»10″ — расстояние (в пикселях) от правого и левого края, сюда же можете добавить еще один схожий код, а именно vspace=»10″, который указывает на расстояние сверху и снизу .

direction=»up» — между кавычками можно вписать down, left, right — это направлении движения Вашего слайдера, т.е. откуда и куда будут выходить слайды.

width=»250″ height=»250″ — тут все просто. Это размер поля вывода слайдов. Подбирается экспериментальным путем.

<a target=»_blank» href=»Ссылка куда будет переадресовывать при нажатии«><img alt=»Ваше описание для Вас» src=»Ссылка на картинку«/> — этот код, не должен ввести людей, немного разбирающихся в html коде в ступор.

Как видите, этих кусочков, которые выводят картинки у меня четыре штуки. Вы их можете добавить сколь угодно.

Таким образом, мне удалось реализовать функцию слайдера без установки плагина. Данный код работает в любых браузерах , не нагружая блог — здорово.

На этот слайдер » я повесил» те бесплатности, которые я раздаю на своем блоге, а именно:

  1. Курс «Блог своими руками: Начало»
  2. «7 Величайших обманов сетевого маркетинга»
  3. Запись моего вебинара: «Эффективный блог — легко»
  4. «Секретные фишки популярного блога»

Т.е. если бы не слайдер, мне бы пришлось бы размещать все эти слайды (изображения) в сайдбар, выделив каждому свободное место, что накладно.

Куда ставить код на блоге?

Вопрос вполне резонный. Как куда? Туда где он Вам нужен. Если он Вам нужен в сайдбаре, то Вам необходимо пройти в тему Вашего блога, далее «Внешний вид» — «Редактор» и найти справа в колонке такую запись «Sidebar.php» — именно здесь и необходимо редактировать код, для того, чтобы разместить код слайдера.

Внимание: все изменения в коде Вы делаете на свой страх и риск. Т.е. необходимо сначала просто скопировать код и сохранить его первозданный вид, дабы потом, если что либо пойдет не по сценарию, Вы могли его восстановить.

Так же существуют темы для блогов, которые позволяют без проблем размещать код в том же сайдбаре, что называется «по щелчку пальцев».

Идем снова в админку и там, в том же меню «Внешний вид», выбираем «Виджеты».

Теперь просто перетаскиваем вкладочку «Текст» в то место в сайдбаре, где бы мы хотели видеть свой слайдер. Вставляем свой код, редактируем, сохраняем.

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

Если все прошло гладко — слайдер тут же начнет работать.

Ну а если не так — пишите, будем разбираться вместе.

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

Всем пока.

Понравился блог?
Получайте статьи на ПОЧТУ!

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

Александр Быкадоров

Большое спасибо, что читаете мои статьи и оставляете комментарии к ним. Активные комментаторы заносятся на доску почета.
Подробности здесь.
 
Хотите быть первым в курсе новостей, конкурсов на моем блоге?
Подпишитесь на канал RSS для получения новостей, нажав тут.

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

Социальные комментарии Cackle
  • Давненько не заходила и просто ахнула, Александр! Шапка классная, вы — красавчик, только почему в профиль?
    А лицом к народу?
    Ну ладно,лицом не хотите, тогда рассылку анонсов делайте обязательно, я проголосовала «за».
    И насчет слайдера ахнула тоже, мне такой1 давно хочется, пыталась делать, да не получилось. Так что спасибки, я себе сделаю обязательно.

    Ответ
    • Галина, доброго дня.
      Рад что Вам понравился дизайн моего блога. Как уже говорил — возможно это не последняя версия моего блога в этом году.
      Насчет голосования — спасибо, я уже сейчас понимаю, что делал ошибку, не рассылая анонсы своим подписчикам. Пока что, 85% проголосовали за отправку анонсов.
      Рад, что слайдер будет полезен.

      Ответ
      • еще бы подписчиков побольше, правда?
        Не знаю, как у вас, ко мне плохо на рассылку подписываются.

        Ответ
        • Да, есть такое дело…
          Но всегда есть платные источники привлечения трафика.
          Ведь так?

          Ответ
        • Галина, вы почитайте другие статьи Саши — там есть информация, как собирать этих подписчиков!

          Ответ
          • Да, кстати, я писал где то, точно, Юра — спасибо.
            На самом деле собирать подписчиков надо.
            Самое простое — брать платных подписчиков.
            Т.е. выпускать нормальную такую бесплатность и через контекстную рекламу гнать на них трафик.
            Да, это стоит деньги, но во первых они будут целевыми + позже «вернут» деньги.

            Ответ
  • Не люблю слайдеры) Вы это знаете, Александр!)
    Помните ваш старый слайдер — я всегда был против него))
    Но статья полезная для других))

    Ответ
    • Да, я знаю, Азик.
      В старом дизайне он был не нужен, а здесь — необходимость. Возможно реализация, не самая лучшая (хотя опять же — кодом), а так вещь здорово экономящая место в сайдбаре.
      Вот как я могу, к примеру вывести 5 разных курсов, а ? ))))

      Ответ
      • Вот именно, подобные слайдеры в первую очередь доносят информацию и экономлят место на сайте!
        Так что я двумя руками за!

        Ответ
    • А мне наоборот нравятся слайдеры — бывает и сам попадаю в необходимую статью через них.

      Ответ
  • Слайдеры — полезная вещь, мне понравилась эта штука. Я видел их на многих продвинутых сайтах — банки, сотовые компании и другие. Александр у вас подписка на фидбернер неудобна тем, что открывается в этом же окне. Я сейчас подписался на ваши статьи, но у меня потерялся ваш сайт и пришлось снова заходить, искать нужную статью, чтобы оставить комментарий. У меня на блоге открывается маленькое диалоговое окно — так удобнее.

    Ответ
    • Имеете ввиду, что в коде надо прописать «_blank» ?
      Т.е. подписка должна открываться в новом окне?
      Что то помню такой момент, спасибо огромнейшее !

      Ответ
  • Хороший способ Александр. Я сам сейчас стараюсь заменить как можно больше функций, чтобы уменьшит по минимуму плагинов.

    Ответ
    • Роман, доброго дня.
      Да, способ действительно может понадобится «в хозяйстве». Лично я применил на практике.
      Уйдя от плагинов, мой блог грузится за 1,5 секунды, а раньше — …

      Роман, подскажите — Вас перекинуло на страницу с подарками, когда Вы оставили комментарий?

      Ответ
  • А я уже хотел у тебя Александр повыспрашивать как обычно, что за плагин ты себе поставил чтобы крутились курсы в сайдбаре. А оказывается это код. Буду иметь ввиду и применять при необходимости

    Ответ
    • Есть сторонники и противники слайдеров в блоге.
      Как по мне, я уже говорил — он очень здорово экономит рабочее место в блоге, тем более в сайдбаре.
      Но то, что код, лучше плагина — это однозначно.
      Хотя что такое плагин — это тот же код, другой вопрос, что он не всегда «ровно» ложится на блог и жутко потом его тормозит.

      На себе провелил — пока устраивает полностью.
      Подписчики идут именно через этот ротатор, т.е. слайдер — а стало быть результат достигнут.

      Ответ
    • Доброго дня, Егор.
      Подскажите мне, а так же читателям моего блога, достойную замену этого кода.
      Искренне буду благодарен.

      Ответ
      • Добрый день, Александр! Если честно, то я не понимаю страха перед использованием плагинов. Всё-таки ныне хорошие скорости передачи данных и безлимитные тарифы у провайдеров. Мой фаворит — bxSlider. Весит мало, настроек много, плюс ко всему он ещё и адаптивен) это не реклама, потому что я не разработчик этого плагина, к сожалению 😆

        Ответ
        • Не у всех хорошие скорости, особенно с мобильных устройств Егор, но за рекомендацию спасибо, нужно бы посмотреть на досуге.

          Ответ
        • А, ну все ясно, Егор 😉

          Скорости передачи данных и безлимитные тарифы — все это здорово, но ведь это еще и загрузить надо, причем на стороне хостера.
          И когда скорость блога достигает 20 секунд, начинаешь задумываться — ой, а с чего бы это ?

          А потом убераешь все то, что особо «не тормозит блог» — начинаешь офигивать.

          Ответ
      • Возможно, вы говорили о плагинах для WP, то здесь я с вами соглашусь — они могут грузить блог. Но я имею в виду js-плагин слайдера, который нужно встраивать ручками

        Ответ
        • Александр, сайт не тормозит от js-плагинов вроде bxSlider) Блог начинает тормозить от ресурсоёмких плагинов WP или от избытка плагинов WP. Тем не менее, вы не поскупились на качественные большие картинки в шапке и футере сайта, которые тоже вполне себе влияют на скорость загрузки сайта))

          Ответ
        • Эти картинки кешируются один раз — и в дальнейшем на нагрузку не влияют.
          Для мобильных устройств вообще насколько я понимаю эти картинки должны быть оптимизированны под определенный размер — что также не будет нести нагрузки на мобильные браузеры (разве что пока еще не дописан функционал).

          Ответ
  • Забавный, конечно, Александр, у вс получился слайдер… вот только тэг , насколько я помню, считается устаревшим и не рекомендуется к использованию…

    Ответ
  • Кстати, вам надо срочно что-то делать с формой комментирования… какая-то кривая она у вас.

    Ответ
    • Все нужно делать планомерно, а не срочно — иначе удалив один изьян — появится другой.

      Ответ
  • Друзья, товарищи — большое спасибо за то, что Вы вступаете в обсуждение темы, которая касается созданию слайдеров на блоге.

    Есть предположения, что данный код — не хорош, устаревший.
    Предлагайте свои варианты того, как можно сделать слайдер без плагинов (кодом).

    Есть одно предложение сделать его bxSlider, честно говоря — я с ним не работал.
    Знаю одно, плагинам нет больше доверия, ибо они здорово тормозят блог — знаю это не по наслышке.

    Так что жду Ваших предложений, друзья.

    Ответ
    • Слайдер создается просто — один блок заворачиваем в другой, одному даем абсолютное позиционирование, другому — относительное. Все что выходит за пределы — скрываем придав свойство оверфлов к внешнему блоку.
      Контент внутри (в данном случае картинки, ссилки, описания) выводим с помощью списка, с которого в стиле снимаем стилизацию.

      С этим все понятно, ничего сложного. Также обычными CSS делаем оформление блоков (о благо, что можем делать каскад блоков на свое усмотрение сколько захотим!).

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

      Интересно думаю тебе будет посмотреть часть лекции, которая отвечает за создание слайдера с урока, который мне очень понравился (на ютубе) = Основы html-верстки страниц. Лекция для ЧГТУ

      Ответ
  • Вроди и не сложно совсем. Но я бы в е равно не рискнула ковыряться в кодах. Последний раз у меня вся тема полистела после того, как я пыталась удалить ссылки в подвале.

    Ответ
    • Юлия, доброго дня.
      Обязательно (!!!) перед ковырянием делайте дубликат файла, это ведь так просто — не правда ли?
      А потом — можно делать изменения и ничего не произойдет.

      Ответ
  • Как интересно, я тоже теперь такое хочу! Хотела бы, чтобы мои записи самые интересные прокручивались.
    А есть такое вообще, чтобы в сайдбаре высвечивались те статьи, которые читатели читают чаще всего?) Или это вручную отбирать надо?
    А еще хотела бы сделать как у тебя тут, Архив и популярное…как такое делать, пока что тоже не знаю.)

    Ответ
    • Диана, можно подобное сделать и плагином, а можно просто обратится к фрилансеру.
      Либо же, найти в сети. Наверняка, кто то предлагает способ, как это сделать.

      Ответ
  • Если правильно понимаю, то код можно вставлять в виджет «Текст» и не соваться в общий код виджетов? В таком случае это совершенно не сложно.
    В кодах почти не разбираюсь, но вариант со вставкой в виджет мне вполне подойдет.

    Ответ
    • Совершенно верно. Пробуйте и пишите здесь, что получилось.
      Ведь не все захотят лезть в дебри кода.
      Я на своем блоге (тестовом)проверял — у меня работало.

      Ответ
  • Вот спасибо, а то у меня кейсы пополняются,а место в сайдбаре уменьшается)) Платный убрать нельзя, а бесплатные не хочется) Как раз то что нужно. Тем более код не так грузит блог. Спасибо 😉

    Ответ
    • У меня работает исправно. Скорость — в норме.

      Ответ
    • Вот и правильно, слайдер нужно сделать в обьязательном порядке — ведь инструкция проста и четка.

      Ответ
  • Сань,спасибо за код.Только что протестировал его на тестовом сайте.
    Получилось отлично,кое что под себя под корректирую.
    Благодарю.

    Ответ
  • А удобно сейчас у тебя на блоге стало.
    Полистал слайдер и выскочила нужная статья.

    Ответ

Добавить комментарий

Ваш email не будет опубликован. Обязательные поля помечены *