Текстовой слайдер с описанием на CSS + JS
 | |
| Вашему вниманию предложено несколько вариантов на текстовой слайдер, где один работает на CSS, и с кнопками с применением jQuery и HTML кода. Вероятно для многих такой формат слайда покажется необычным, но вы его много раз видели, просто не задавались, так как всегда слайдер и его ассоциаций были с картинками. Здесь идет чисто описание, в которое аналогично можно установить изображение или ссылку на переход. Многие интернет магазины применяют его на отзывы, где выставляют самые хорошие отзывы на материал. И потом каркас устанавливают под тот продукт, который выставлен на продажу, где все очень удобно, все компактно и на месте. Здесь больше всего нужно подключать фантазию, где он может пригодится, а по сути на многих страницах. Как пример это отдельно созданная страница с материалом или с функциями. И чтоб много место не занимать можно поставить вкладки или слайдер, который автоматически проматывает все описание с заголовками. Безусловна такая форма слайдера становится все более популярным и востребованным, поэтому в этом материале представлено сразу несколько вариаций на схожие форматы, а точнее красивый текстовый слайдер для вашего сайта. Фактически он использует скольжение текста на интернет ресурсе, что можно установить в любом месте и особенно на главной странице. Приступаем к установке: Первый вариант:  HTML Код <div class="kangemdenes"> <div class="negational-cukasencun-kebangem"> <h2>ZorNet - портал для вебмастера</h2> <p>Здесь идет первое описание №1</p> </div> <div class="negational-cukasencun-kebangem"> <h2>Шаблоны для сайта</h2> <p>Пишем краткое описание №2 </p> </div> <div class="negational-cukasencun-kebangem"> <h2>Скрипты для сайта</h2> <p>Кратко по теме описываемый и ставим ссылку №3</p> </div> <div class="negational-cukasencun-kebangem"> <h2>JavaScript и jQuery</h2> <p>Еще одно краткое пояснение по тематике интернет ресурса №4</p> </div> <div class="negational-cukasencun-kebangem"> <h2>Раздел предназначен для вебмастера</h2> <p>Описание под номером №5</p> </div> <div class="negational-cukasencun-kebangem"> <h2>Материал JavaScript</h2> <p>Описание с ключевыми словами №6</p> </div> <div class="negational-cukasencun-kebangem"> <h2>Создание HTML и CSS.</h2> <p>Пишем по своей тематике для пользователя №7</p> </div> <div class="negational-cukasencun-kebangem"> <h2>Разработка и создание</h2> <p>Продолжительный слайд в текстовом формате</p> </div> </div> CSS Код .negational-cukasencun-kebangem { width: 501px; height: 165px; background-color: #f9f9f9; position: relative; border: 2px solid rgba(251, 246, 246, 0.22); border-radius: 8px; box-shadow: 0 0 5px #2b2929; padding: 18px 37px; float: left; margin: 8px 8px 0px 0px; } @font-face { font-family: Roboto Condensed src: url(https://fonts.googleapis.com/css?family=Roboto+Condensed); } .negational-cukasencun-kebangem h2 { font-size: 13px; color: #1a1a1a; } .negational-cukasencun-kebangem p { font-size: 12px; color: #1a1a1a; font-family: 'Roboto Condensed', sans-serif; } .kangemdenes { height: 260px; position: relative; width: 640px; } @-webkit-keyframes anim_kangemdenes { 0% { opacity:0; } 6% { opacity:1; } 24% { opacity:1; } 30% { opacity:0; } 100% { opacity:0; } } @-moz-keyframes anim_kangemdenes { 0% { opacity:0; } 6% { opacity:1; } 24% { opacity:1; } 30% { opacity:0; } 100% {opacity:0;} } .negational-cukasencun-kebangem{opacity:0; position:absolute; top:0; -webkit-animation-name: anim_kangemdenes; -webkit-animation-duration: 56.0s; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: normal; -webkit-animation-delay: 0; -webkit-animation-play-state: running; -webkit-animation-fill-mode: forwards; -moz-animation-name: anim_kangemdenes; -moz-animation-duration: 56.0s; -moz-animation-timing-function: linear; -moz-animation-iteration-count: infinite; -moz-animation-direction: normal; -moz-animation-delay: 0; -moz-animation-play-state: running; -moz-animation-fill-mode: forwards; } .negational-cukasencun-kebangem:nth-child(2), .negational-cukasencun-kebangem:nth-child(2){ -webkit-animation-delay: 8.0s; -moz-animation-delay: 8.0s; } .negational-cukasencun-kebangem:nth-child(3), .negational-cukasencun-kebangem:nth-child(3){ -webkit-animation-delay: 16.0s; -moz-animation-delay: 16.0s; } .negational-cukasencun-kebangem:nth-child(4), .negational-cukasencun-kebangem:nth-child(4){ -webkit-animation-delay: 24.0s; -moz-animation-delay: 24.0s; } .negational-cukasencun-kebangem:nth-child(5), .negational-cukasencun-kebangem:nth-child(5){ -webkit-animation-delay: 32.0s; -moz-animation-delay: 32.0s; } .negational-cukasencun-kebangem:nth-child(6), .negational-cukasencun-kebangem:nth-child(6){ -webkit-animation-delay: 40.0s; -moz-animation-delay: 40.0s; } .negational-cukasencun-kebangem:nth-child(7), .negational-cukasencun-kebangem:nth-child(7){ -webkit-animation-delay: 48.0s; -moz-animation-delay: 48.0s; } .negational-cukasencun-kebangem:nth-child(8), .negational-cukasencun-kebangem:nth-child(8){ -webkit-animation-delay: 56.0s; -moz-animation-delay: 56.0s; } @-webkit-keyframes anim_titles { 0% { left:100%; opacity:0; } 5% { left:10%; opacity:1; } 20% { left:10%; opacity:1; } 25% { left:100%; opacity:0; } 100% { left:100%; opacity:0; } } @-moz-keyframes anim_titles { 0% { left:100%; opacity:0; } 5% { left:10%; opacity:1; } 20% { left:10%; opacity:1; } 25% { left:100%; opacity:0; } 100% { left:100%; opacity:0; } } Если про стилистику, то вся она настраивается в CSS, где светлый формат можно переделать на темный с выводом той палитры цвета, которая при вуалирует на интернет ресурсе, где устанавливают этот слайд. Демонстрация Второй вариант:  В этом варианте нужно подключить библиотеку, но если у вас хостинг на конструкторе uCoz, то она при создание сайта автоматически подключена. Первым делом подключаем JS Код <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script> <script src='https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js'></script> HTML Код <div class="kadunedem-suisdanieg"> <div class="sabuanieb-gehangen"> <div class="nangendem-baxadukas"> <div class="vasangen-demaxav vasaverum-posngem"> <div class="geosngem-detecub-kecause"> <h2>ZorNet - ресурс для вебмастера</h2> <hr> Это первое большое описание, где поставим ссылку. </div> </div> </div> </div> <div class="sabuanieb-gehangen"> <div class="nangendem-baxadukas"> <div class="vasangen-demaxav vasaverum-posngem"> <div class="geosngem-detecub-kecause"> <h2>Соотношение цены сайта</h2> <hr> Большое описание на интернет портале </div> </div> </div> </div> <div class="sabuanieb-gehangen"> <div class="nangendem-baxadukas"> <div class="vasangen-demaxav vasaverum-posngem"> <div class="geosngem-detecub-kecause"> <h2>Кроткие сроки для сайта</h2> <hr> Описание плюс идут ссылки. </div> </div> </div> </div> <div class="sabuanieb-gehangen"> <div class="nangendem-baxadukas"> <div class="vasangen-demaxav vasaverum-posngem"> <div class="geosngem-detecub-kecause"> <h2>ZorNet для вебмастера</h2> <hr> Описание на материал. </div> </div> </div> </div> <div class="sabuanieb-gehangen"> <div class="nangendem-baxadukas"> <div class="vasangen-demaxav vasaverum-posngem"> <div class="geosngem-detecub-kecause"> <h2>Заголовок под номером 1</h2> <hr> Следует описание под заголовком. </div> </div> </div> </div> <div class="sabuanieb-gehangen"> <div class="nangendem-baxadukas"> <div class="vasangen-demaxav vasaverum-posngem"> <div class="geosngem-detecub-kecause"> <h2>Ключевое слово</h2> <hr> Аналогично, пишем здесь краткое пояснение. </div> </div> </div> </div> <div class="sabuanieb-gehangen"> <div class="nangendem-baxadukas"> <div class="vasangen-demaxav vasaverum-posngem"> <div class="geosngem-detecub-kecause"> <h2>ZorNet - портал для вебмастера</h2> <hr> Кратко и по теме </div> </div> </div> </div> </div> CSS Код .kadunedem-suisdanieg { overflow: hidden; width: 798px; font-size: 14px; color: #191818; } .vasangen-demaxav { width: 748px; } h2 {font-size: 15px; color: #1a1a1a; } .sabuanieb-gehangen .nangendem-baxadukas { display: flex; align-items: center; } figure { margin: 0; } .geosngem-detecub-kecause { padding: 0em 3em; } hr { margin: 0.5em 0em; height: 4px; background: #eee; border: none; } hr { width: 0; max-width: 8em; transition: all 2500ms ease; } .sabuanieb-gehangen.is-selected .geosngem-detecub-kecause p { transform: translateY(0px); transition-delay: 500ms; position: relative; opacity: 1; } .sabuanieb-gehangen.is-selected hr { max-width: 8em; transition-delay: 10000ms;} JQUERY Код var slideEl = $(".kadunedem-suisdanieg"); slideEl.flickity({ imagesLoaded: true, wrapAround: true, autoPlay: true, pauseAutoPlayOnHover: true }); Это делается для того, чтобы показать последние новости, если у веб разработчика новостной блог или чтоб сразу была замечена очень важная информация, и для этого подключают слайд, чтоб как можно быстрее ее донести. Демонстрация Вообщем после того, как кто тот говорил, что это невозможно, так как этот текстовой слайдер и так корректно показывает. То один из вариантов предлагается в архиве, там идет вся установка. Внимание: первый материал с форума, где был задан такой вопрос. Возможно ли реализовать паузу при наведении на слайдер? И так поняли этот рабочий слайдер был предоставлен, что здесь в материале. | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 4 | |
Всё, сорян - сам спросил, сам разобрался
 | |
