Search the Community

Showing results for tags 'слайдер'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • HTML и CSS
    • Для начинающих
    • Препроцессоры, постпроцессоры и шаблонизаторы
    • Методологии
    • Фреймворки и библиотеки
  • JavaScript
    • Для начинающих
    • Фреймворки и библиотеки
    • Скрипты и плагины
  • Разработка сайтов
    • Для начинающих
    • Инструменты разработки, сборки и автоматизации
    • Аудит и анализ кода
    • Программное обеспечение разработчика
    • Веб-дизайн
    • Мобильные платформы
    • Open Source
  • Серверное программирование
    • Для начинающих
    • PHP
    • Платформы и языки программирования
    • Базы данных
    • Скрипты, готовые движки, CMS, конструкторы
  • Полезное
    • Библиотека полезных приемов и решений
    • Ресурсы
  • Сервер
    • Техническая поддержка
    • Веб-сервер
    • Базы данных
    • Хостинг
    • Домены
  • Интернет-маркетинг, SEO
    • Поисковая оптимизация
    • Поисковые системы
    • Продвижение и монетизация веб-сайта
    • Сервисы статистики и аналитики
    • Услуги и сервис
    • Покупка и продажа
  • Коммерческие услуги
    • Freelance
    • Работа
    • Услуги и сервис
  • Давайте поговорим о ...
    • Общий
    • Хобби, отдых и развлечение
    • Человек и общество
    • Флейм
  • Наш форум
    • Конкурсы
    • Работа форума

Calendars

  • События в Украине
  • События в России
  • События форума
  • События партнёров
  • Все события

Blogs

  • CMS (Content Management System)
  • Руководство верстальщика
  • Блог HTMLforum.io

Marker Groups

  • Members
  • Front-end
  • Back-end
  • Education
  • Looking for job
  • Offering job

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Web site


ICQ


Jabber


Skype


From


Interests

Found 42 results

  1. Ребята, всем доброго времени суток) Помогите пожалуйста со слайдером! В javascript плохо разбираюсь(( Нашла подходящее мне решение, но никак не могу настроить под себя. Нашла здесь: http://lantana-studio.ru/howto/simpleslider/ У меня содержимое слайдера вылезло из контейнера, фото прикреплю Вот код HTML <div class="slider"> <div class="slider__block d-flex__row"> <div class=""> <img src="img/otziv-img.png" alt="Фото" class="slider__img"> </div> <div class="slider__block_text"> <div class="slider__block_text-row d-flex__widthHeight-center"> <p class="slider__block_fio"> 1Диана Апасова </p> <p class="slider__block_vk"> vk.com/apasova </p> <p class="slider__block_place"> Москва → София </p> </div> <div class="slider__block_text-description"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in </div> </div> </div> <div class="slider__block d-flex__row"> <div class=""> <img src="img/otziv-img.png" alt="Фото" class="slider__img"> </div> <div class="slider__block_text"> <div class="slider__block_text-row d-flex__widthHeight-center"> <p class="slider__block_fio"> 2Диана Апасова </p> <p class="slider__block_vk"> vk.com/apasova </p> <p class="slider__block_place"> Москва → София </p> </div> <div class="slider__block_text-description"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in </div> </div> </div> <div class="slider__block d-flex__row"> <div class=""> <img src="img/otziv-img.png" alt="Фото" class="slider__img"> </div> <div class="slider__block_text"> <div class="slider__block_text-row d-flex__widthHeight-center"> <p class="slider__block_fio"> 3Диана Апасова </p> <p class="slider__block_vk"> vk.com/apasova </p> <p class="slider__block_place"> Москва → София </p> </div> <div class="slider__block_text-description"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in </div> </div> </div> <a class="prev" onclick="minusSlide()">◀</a> <a class="next" onclick="plusSlide()">▶</a> </div> <div class="slider-dots"> <span class="slider-dots_item" onclick="currentSlide(1)"></span> <span class="slider-dots_item" onclick="currentSlide(2)"></span> <span class="slider-dots_item" onclick="currentSlide(3)"></span> </div> CSS .slider { position: relative; } .slider__block { width: 840px; height: 200px; margin: 0px auto; padding: 10px 20px; box-shadow: 0 5px 8px -5px #000; } .slider__img { margin: 20px 20px 0px 0px; } .slider__block_text { margin-top: 15px; } .slider__block_fio { text-transform: uppercase; font-size: 1.067rem; font-family: 'MuseoSansCyrl-900'; margin-right: 33px; margin-left: -64px; } .slider__block_vk { text-transform: uppercase; font-size: 0.8rem; font-family: 'MuseoSansCyrl-900'; margin-right: 140px; color: #23aae2; border-bottom: 2px solid #cce6f6; } .slider__block_place { text-transform: uppercase; font-size: 0.8rem; font-family: 'MuseoSansCyrl-100'; color: #3eb0e4; } .slider__block_text-description { font-size: 0.933rem; font-family: 'MuseoSansCyrl-100Italic'; color: #363636; } /* Кнопки вперед и назад */ .slider .prev, .slider .next { cursor: pointer; position: absolute; top: 0; top: 50%; width: auto; margin-top: -22px; padding: 16px; color: #000; font-weight: bold; font-size: 18px; transition: 0.6s ease; border-radius: 0 3px 3px 0; } .slider .next { right: 0; border-radius: 3px 0 0 3px; } /* При наведении на кнопки добавляем фон кнопок */ .slider .prev:hover, .slider .next:hover { background-color: rgba(0, 0, 0, 0.8); } /* Кружочки */ .slider-dots { text-align: center; margin-top: 20px; } .slider-dots_item{ cursor: pointer; height: 12px; width: 12px; margin: 0 2px; background-color: #ddd; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; } .active, .slider-dots_item:hover { background-color: #aaa; } /* Анимация слайдов */ .slider .slider__block { -webkit-animation-name: fade; -webkit-animation-duration: 1.5s; animation-name: fade; animation-duration: 1.5s; } @-webkit-keyframes fade { from { opacity: .4 } to { opacity: 1 } } @keyframes fade { from { opacity: .4 } to { opacity: 1 } } JS /* Индекс слайда по умолчанию */ var slideIndex = 1; showSlides(slideIndex); /* Функция увеличивает индекс на 1, показывает следующй слайд*/ function plusSlide() { showSlides(slideIndex += 1); } /* Функция уменьшяет индекс на 1, показывает предыдущий слайд*/ function minusSlide() { showSlides(slideIndex -= 1); } /* Устанавливает текущий слайд */ function currentSlide(n) { showSlides(slideIndex = n); } /* Основная функция слайдера */ function showSlides(n) { var i; var slides = document.getElementsByClassName("slider__block"); var dots = document.getElementsByClassName("slider-dots_item"); if (n > slides.length) { slideIndex = 1 } if (n < 1) { slideIndex = slides.length } for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace("active", ""); } slides[slideIndex - 1].style.display = "block"; dots[slideIndex - 1].className += "active"; } Прошу не судить строго, я только в начале своего пути)) Буду очень благодарна, за помощь!!
  2. Здравствуйте, вопрос к уважаемым специалистам. Только приступил к изучению html+css. Знаю что можно реализовать такой слайдер на чистом html+css, но мне интересно, как сделать такой слайдер с помощью OWL Carousel 2? В частности, как правильно для данной секции написать html код и как правильно прописать стили для слайдера? По одному ролику на YouTube получилось сделать так, дальше моих знаний уже не хватает. Отмечу, что делаю разметку страницы, до написания стилей еще не доходил. Вот мой код данной разметки, а тут макет. Буду благодарен за помощь, так как застрял именно со слайдером, во всей остальной разметке вроде разобрался.
  3. Подскажите какой-нибудь очень простой слайдер с кнопками управления. И без js.
  4. Aliona108

    Слайдер.

    Проблема со слайдером. При заходе на стартовою страницу слайдер ведет себя не корректно. Посмотрите пожалуйста в чем проблема.. Скину архив всего сайта, чтобы была понятна проблема целиком. Проект первый Низовцева Алена.7z
  5. Ребят поскольку я только начинающий, подскажите как формировать ссылку с переменой, То есть как сделать чтобы к силки добавлялось значение с переменой !DOCTYPE html> <html lang="ua-UA"> <head> <meta charset="UTF-8"/> <title>Люстра в моїй кiмнатi</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1 align="center">Управлiння люстри в моїй кiмнатi</h1> <div class="zaholovok red" id="r">ЧЕРВОНИЙ</div> <input type="range" id="fan11" min="0" max="1023" value="0" step="1" oninput="fan1()"> <div class="zaholovok green" id="g">ЗЕЛЕНЙ</div> <input type="range" id="fan22" min="0" max="1023" value="0" step="1" oninput="fan2()"> <div class="zaholovok blue" id="b">СИНIЙ</div> <input type="range" id="fan33" min="0" max="1023" value="0" step="1" oninput="fan3()"> <div class="zaholovok wait" id="w">БIЛИЙ</div> <input type="range" id="fan44" min="0" max="1023" value="0" step="1" oninput="fan4()"> <a href="http://192.168.0.106/ledr?r="+ id="r">ЗАСТОСУВАТИ</a> То есть как сделать чтобы к силки добавлялось значение с переменой <script type="text/javascript" src="function.js"></script> </body> </html> function fan1() { var rang=document.getElementById('fan11'); var p=document.getElementById('r'); p.innerHTML=rang.value; } function fan2() { var rang=document.getElementById('fan22'); var p=document.getElementById('g'); p.innerHTML=rang.value; } function fan3() { var rang=document.getElementById('fan33'); var p=document.getElementById('b'); p.innerHTML=rang.value; } function fan4() { var rang=document.getElementById('fan44'); var p=document.getElementById('w'); p.innerHTML=rang.value; }
  6. Мне нужно помощь по установке данного слайдера: http://kenwheeler.github.io/slick/ Я сделал всё как в инструкции по установке, но он всё-равно не работает. Можете показать код со всеми картинками в слайдере, чтоб я мог распознать свою ошибку?
  7. www.zebra-tara.ru на главной слайдер организован через owl carousel 2 Не понимаю, почему пролистывание мышкой влево - работает: если схватить за центр слайда и протянуть влево, а вправо - нет: выполняется переход по ссылке слайда
  8. Подскажите пожалуйста. Проблема в том что в owl-carousel 2 не работают табы. Задача состоится в том что нужно сверстать слайдер, в слайдере сверстать табы. табы сами по себе рабочие, если вынести разметку(табов) за пределы слайдера то все работает, но если в слайдере табы перестают работать ? мб сталкивался кто то с такой проблемой ?
  9. Здравствуйте подскажите как сделать такой слайдер.Чтобы активный вылетал вперед, это я понимаю на актив меню. Только css нужно делать?У меня например в вёрстке 10 элементов.Показываются 5 как на картинке, но 1 и последний должен быть такого размера и с z-index.В общем только css можно сделать.Либо в слайдере есть какие либо опции? https://gyazo.com/fa6bd54d98ebda1be6efd19325418d8a И вообще как лучше сделать,спасибо
  10. Доброго дня форумчане, ситуация такая- Есть сайт http://codex-themes.com/scalia/one-page/ где красиво реализована система смены слайдов. Как можно заметить, происход переход следующим образом : Элементы в слайде начинают анимацию свёртки -> происходит смена слайда -> происходит анимация развертки элементов нового слайда. Подскажите есть ли какие-нить уроки/статьи как такое сделать, и можете порекомендовать слайдер, где такое можно сделать через опции, ну хотя бы задержку перед переход на следующий слайд. Писать свой велосипед не хотелось бы, но видимо придется, если вы мне не поможете советом. Спасибо.
  11. В общем создаю сайт с приложениями. Имеется страница состоящая из 2 блоков на весь экран. Необходим слайдер скриншотов+текст справа от слайдера которые будут находиться в 1 блоке(верхнем). Наилучшим примером будет страница какого-либо товара в магазине Steam.
  12. Есть сайт в разработке fitmama.club на главной странице имеется слайдер, который при заходе на страницу ведет себя нормально, первое время, через минуту слайды съезжают вниз
  13. На выходных сверстал, если можно так выразиться, еще одну страницу. Макет в png http://codeliner.ucoz.com/fadelicious/home.png Макет в psd https://yadi.sk/i/Td7IVc0pqKKNc Сверстанная веб-страница http://codeliner.ucoz.com/fadelicious/index.html Прошу объективной критики и дельных советов на будущее
  14. В макете присутствует слайдер картинок. В интернете полно рецептов, как создать или где взять готовый слайдер - и это все с использованием javascript и, часто, jquery. Я хоть и в процессе изучения javascript, но понимаю, что конкретно при верстке обходятся без сложных скриптов - это дело веб-разработчика. Например, при верстке строки поиска нужно добавить форму, кнопку, текстовое поле - а куда это отправляется и как обрабатывается - дело десятое. Может, надо ставить какую-то загрузку. И здесь считаю целесообразным задать еще один вопрос (если надо, создам отдельную тему) - что делать в аналогичном случае, если в макете видео?
  15. yulshaz@mail.ru

    Слайдер

    Добрый вечер,форумчане! Подскажите,при помощи чего лучше подключить данный слайдер?и как добавить на него столько текста?подключить бутстрап, просьба - не предлагать!Заранее спасибо! http://prntscr.com/906imc
  16. virtas

    Слайдер

    В поисках слайдера с такими же движущими эффектами http://pixelundcode.com/
  17. Не могу найти подходящий слайдер для кастомизации. Скриншот требуемого результата : http://joxi.ru/GrqzJ13uD01Kmz. Не много опыта со слайдерами есть, но в примерах на оффсайтах слайдеров не могу подобрать похожее. Проблема заключается в нижнем темном блоке: 1) как его вообще прикрутить; 2) стрелка-треугольник должна двигаться и указывать на нужную фотографию ; 3) все должно быть адаптивно - то есть не на десктопах порядок будет "фото"->"информация"->"статус бары". Хотя бы намекните в каком конкретно направлении копать...
  18. fireman691

    Слайдер

    Сначала слева вылетает первый текст, потом следом второй и все это очень быстро, потом справа вылетает картинка Нужен слайдер который может выполнить вот эти требования. Подскажите пожалуйста
  19. Нужно сделать подобный слайдер. Кликаем на первый слайд (синий), он уезжает вперед растворяясь (или как-то еще), одновременно с этим серый и зеленый слайды переезжают вперед, а на месте серого появляется синий слайд, зеленый соответственно становится первым. Блоки тянутся по высоте и отступы у них в процентах. Есть ли готовые плагины, которые реализуют подобное? Не обязательно адаптивные. Почему-то перерыв кучу всего, я так и не нашла нужного — либо мой английский совсем плох, либо подобных решений совсем мало.
  20. Вот такой должен быть слайдер. Сделал его таки образом, что при нажатии на радиобаттон слайдеры должны двигаться. Но почему-то это не получается http://codepen.io/anon/pen/JdEEdv
  21. Всем привет. Ребят, нужна помощь, не могу сама справиться. Адаптирую старый сайт. В нём есть слайдер roundabout.js версия 1.1. Так как responsive поддерживается с версии 2.1, установила её, но здесь как-то странно высчитывается позиция left в position:absolute, где-то на 100рх больше, из-за чего картинки вываливаются из своего блока и появляется горизонтальный скрол. Ребята, кто работал с данным плагином, есть там возможность откорректировать left ?
  22. Вот так должен выглядеть слайдер: Видно, что слайды по бокам прячутся почти на половину ширины. У меня помещаются только 4 блока а другие 2 выпадают http://codepen.io/anon/pen/PwXZGG 1) Как сделать так, чтобы было как на картинке? 2) Как сделать чтобы товары двигались друг за другом при нажатии на кнопки "LEFT", "RIGHT" в соответствующие стороны?
  23. Есть слайдер http://codepen.io/anon/pen/YPRQjo Как сделать на нем автоматическое перелистывание? В гугле много примеров на jQuery. Но хотелось бы сделать это на чистом JS или CSS (если такое возможно). При переключении слайдов переход должен быть плавным. (Хотел, чтобы свойство opacity менялось от 0 к 1 через анимацию, но что-то не получается)
  24. Собственно, не работают радио-кнопки у слайдера (внизу) http://codepen.io/anon/pen/PwxGxE Также интересует вопрос как сделать рабочими стрелочки(по центру)?
  25. Здравствуйте. Подскажите, может кто знает готовый слайдер с подобным функционалом. Чтоб были и элементы листания по одному слайду и обычный скролл которым можно потихоньку двигать. Как вариант может хотя бы скролл, который двигает по целому слайду и перемешается на большее делении сразу.