Доброго времени суток! Желаю всем здравствовать.
Часть третья о слайдерах. В статье речь пойдёт о карусели. Карусель слайдер шоу то же, что и обычный слайдер только из серии изображений. Ставить себе такое удовольствие или нет это ваше дело и право, но согласитесь когда на вашем блоге уже более 60-70 постов и 20 хотя бы вы считаете из них стоящими, то перед вами проблема, как можно более доступнее расположить ваши ранние посты для посещения.
Весь смысл в слайдере, это обратить внимание на ранние посты или самые информационные. Иначе говоря как можно дольше задержать посетителя заинтересовав его материалом. И заинтриговать его можно тем, что посты не лежат где-то на полках, как в библиотеке, а сами выпрыгивают, меняются и пестрят картинками, так и просятся возьми и кликни. Все мы люди дикари, увидел блестящую упаковку и рука тянется. Вот хотя бы Макдональдс — ну банально, не вкусно, не свежее, совершенно не полезно зато очередь из дикарей. Голодные что ли? Да нет, на упаковку самого фастфуда купились.
А теперь о слайдере. Я много их перелопатил, а если посчитать то 197 штук и из всех избрал Плагин M-vSlider , не потому что он самый крутой. А потому что самый удобный и не такой замороченный. В интернете существует мнение, чем меньше плагинов, тем быстрее работает сайт. Потому посты в которых авторы предлагают пользоваться кодами да вручную сконопаченными скриптами на расхват. Отчасти это верно, но только от части. Часть истины здесь есть, процентов 50. Взяли вы какой-то код, скрипт написан мастером кулибиным, доработан левшой ( правой он в носу ковырялся) и пошло поехало, в хроме работает , в мазиле открывается, в опере чего-то тормозит. Замеряешь по скрости, то быстро грузится, а то по 8-10 секунд, при добавлении, какого-нибудь виджета с кодом ( допустим рекламным) часть сайта разваливается. Вот и получается, лучше взять плагин, который всегда можно включить-отключить, чем прописать кучу кодов, а потом не знать за что хвататься.
Плагин M-vSlider я опробовал во всех режимах и скорость проверял до установки и после, разницы не заметил вообще, потому как сначала грузится тело сайта, а затем сам слайдер.
А теперь на счёт каруселей, много интересного есть, но опять же слишком трудоёмко, код прописывать, изображения, там добавлять скрипт, там код, здесь прописывать url картинки. При всех движениях проще и удобнее , во всяком случае для меня, сделать карусель самому из слайдера M-vSlider.
В обычных каруселях крутятся от силы 12 картинок, причём в самых навороченных, то есть 12 постов светится. В нашем слайдере сделанном собственными руками можно сделать 30 и это не предел, больше не пробовал.
Слайдер карусель
Ну-с, приступим. Первое действие установка, нашли в поиске, установили и активировали. Теперь нам нужно определится
- где будет слайдер карусель
- размеры карусели
- посты для карусели
- подготовить картинки для карусели
- Дримвивер для создания таблицы
Определений вроде бы и много, но это на первый взгляд, на самом деле всё это займёт минут 15-20. Согласен, что в первый раз час или два уйдёт, но и то на подготовку картинок 90% времени, а на сборку карусели мин 10 вполне хватает.
Меряем наш контент, для того чтоб знать размер ширины карусели. Лучше всего для этого подойдёт отличный инструмент FastStone Image Viewer
Размер нужен приблизительный, у меня около 620 пикселей, всё равно потом отредактируем на сайте при установке точнее. Теперь определимся с картинками , если сделать в ряд 5 изображений, то картинки будут по мельче, четыре — покрупнее.
Делаю 4 . Берём 2 пикселя за расстояние между картинками, если четыре изображения, значит 5 х 2 = 10 теперь 610/4= 152.5 получилось короче говоря 152 пикселя ширина картинки. Ширину потом отредактируем более точно по месту.
Значит разумнее всего брать изображение 152 х 144, берём это за основу.
Выбираем изображения согласно постам по смыслу. Идём в Power Point выбираем формат по симпатичнее, для всех изображений одного типа и вырезаем либо Snagit либо FastStone Image Viewer
Лучше и удобнее делать серии по 5 картинок, чтоб не запутаться, отобрали 5 статей, 5 изображений приготовили нужного размера. Как вы уже догадались у нас будет 4 слайдера в одной карусели
Зайдём в настройки поставим наши размеры, выберим опцию без рамок ( или с рамками, кому как ), меньше пространства полезного занимает.
Справа в редакциях слайдов загрузим картинки (загрузчик wordpress) вставим url — адрес поста и короткий текст , характеризующий пост.
таким образом грузим серию из 5-6 слайдов с адресами постов. Естественно всё сохраняем. Это первый слайдер в карусели, затем так второй делаем и последующие. Допустим 4 слайдера по 5-6 слайдов.
Следующий слайдер создаётся в панели M-vSlider, жмём слева на «M-vSlider Setup» и переходим в панель, здесь в поле вписываем название второго слайдера, можно по теме , я написал 2 по английски
и добавляем кнопкой, попадаем в панель настроек второго слайдера, наша песня хороша — начинай сначала…
Закончив загрузку и редакцию последнего слайдера переходим в начальную панель и видим такую картину
На скриншоте отмечен порядок копирования кода, копируем оба сразу, слева направо, об этом ниже…
Вот теперь нам понадобится Adobe Dreamweaver CS6 открываем его
и делим на два экрана, Код и Дизайн
Весь код в левом окне убираем, нам он не нужен, жмём кнопка вставка / таблица
Задаём размеры таблицы, ширина выбираете как у вас , всё остальное как у меня 
, на скрине. Далее копируем коды как на скрине с слайдером, копируем и вставляем по очереди. С первого по последний. Вставляем вместо этого символы в код таблицы первый код первого слайдера .
Для того чтобы ID включающий слайдер не отображался над слайдером (символы ) пишем в скопированный код (лучше всего код вставить в блокнот, для удобства и редакции, после окончательной редакции полностью скопировать и вставить в таблицу вместо тега ) символы коментария, чтоб браузер не отображал часть кода. Вот как это выглядит
1 2 3 4 5 6 |
[m-vslider id="1"] |
Код в квадратных скобках мы спрячем от браузера, отделим тегами , то есть
1 |
И вот теперь вставляем в Дримвивер, в таблицу
Так же делаем с остальными скопированными кодами, можете вставить 4 раза один и тот же отредактированный код, затем поменять числовые значения в коде (1;2;3;4), делайте как вам удобнее.
Готово, для удобства поиска этого кода целиком, предлагаю поставить вначале и в конце коментарий , вот так это будет в наглядную, кстати можете сделать свой слайдер как у меня со своими данными и код взять здесь, чтоб не прописывать самому, код пойдёт для всех типовых слайдер каруселей, с вашими картинками и url-ами
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
|
Вот так на Дримвивере
Скопировали код, идём в консоль wordpress/редактор /home.php и вставляем вверху после первой строчки ( у меня так, тренируйтесь у себя). Это если хотим видеть на главной вверху, можно поставить после первого поста, в середине или внизу, выбирайте и тренируйтесь, как в песне «Везде нужна сноровка, закалка,тренировка…»
Если вся карусель не доехала до границы контента по ширине, регулируйте размер таблицы вначале кода table width= 620, или наоборот заехала за… Цифру уменьшаете или увеличиваете.
Вот и всё, слайдер карусель своими руками из обычного слайдера.
Всем пока, до встречи.