Слайдер карусель зі звичайного слайдера

Слайдер карусель зі звичайного слайдера

Доброго вам дня! Бажаю всім бути здоровими.

Частина третя про слайдерах. У статті мова піде про каруселі. Карусель слайдер шоу той же, що і звичайний слайдер тільки із серії зображень. Ставити собі таке задоволення чи ні це ваша справа і право, але погодьтеся коли на вашому блозі вже більше 60-70 постів і 20 хоча б ви вважаєте з них стоять, то перед вами проблема, як можна більш доступнішою розташувати ваші ранні пости для відвідування.

Весь сенс у слайдері, це звернути увагу на ранні пости або самі інформаційні. Інакше кажучи якомога довше затримати відвідувача зацікавивши його матеріалом. І заінтригувати його можна тим, що пости не лежать десь на полицях, як в бібліотеці, а самі вистрибують, змінюються і рясніють картинками, так і просяться візьми і кликни. Всі ми люди дикуни, побачив блискучу упаковку і рука тягнеться. Ось хоча б Макдональдс - ну банально, не смачно, не свіжіше, абсолютно не корисно зате чергу з дикунів. Голодні чи що? Та ні, на упаковку самого фастфуду купилися.

Плагін 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 слайдера в одній каруселі

Зайдемо в налаштування поставимо наші розміри, виберіть опцію без рамок (або з рамками, кому як), менше простору корисного займає.

Слайдер карусель зі звичайного слайдера

Слайдер карусель зі звичайного слайдера

Слайдер карусель зі звичайного слайдера

Наступний слайдер створюється в панелі M-vSlider, тиснемо зліва на «M-vSlider Setup» і переходимо в панель, тут в поле вписуємо назву другого слайдера, можна по темі. я написав 2 по англійськи

Слайдер карусель зі звичайного слайдера

і додаємо кнопкою, потрапляємо в панель налаштувань другого слайдера, наша пісня гарна й нова - починаймо її знову ...

Після завантаження і редакцію останнього слайдера переходимо в початкову панель і бачимо таку картину

Слайдер карусель зі звичайного слайдера

На скріншоті відзначений порядок копіювання коду, копіюємо обидва відразу, зліва направо, про це нижче ...

Ось тепер нам знадобиться Adobe Dreamweaver CS6 відкриваємо його

Слайдер карусель зі звичайного слайдера

і ділимо на два екрани, Код та Дизайн

Слайдер карусель зі звичайного слайдера

Весь код в лівому вікні прибираємо, нам він не потрібен, тиснемо кнопка вставка / таблиця

Слайдер карусель зі звичайного слайдера

Задаємо розміри таблиці, ширина вибираєте як у вас. все інше як у мене 🙂. на скрині. Далі копіюємо коди як на скрині з слайдером, копіюємо і вставляємо по черзі. З першого по останній. Вставляємо замість цього символи   в код таблиці перший код першого слайдера.