Search the Community

Собственно, не работают радио-кнопки у слайдера (внизу) http://codepen.io/anon/pen/PwxGxE Также интересует вопрос как сделать рабочими стрелочки(по центру)?

Здравствуйте. Подскажите, может кто знает готовый слайдер с подобным функционалом. Чтоб были и элементы листания по одному слайду и обычный скролл которым можно потихоньку двигать. Как вариант может хотя бы скролл, который двигает по целому слайду и перемешается на большее делении сразу.

В общем беда такая: Сделал я слайдер который отображает сразу 2 картинки рядом. И смещаются они по одной. все хорошо. Но надо сделать так чтобы при наведении курсора они замирали ВСЕ. А пока что у меня замирает только та из двух, на которую навел мышкой (:hover). Остальные продолжают двигаться. в результате происходит разброд и шатание. http://jsfiddle.net/Elizaurus/qccag8x1/4/

День добрый. Дайте совет, как можно вложить div, с текстом, в слайдер в котором прописаны стили для background, которые сжимают его, по мере разрешения экрана. Текст вылазит из-за position: absolute и bottom:40px http://hotels.fatrabbit.ru/

Здравствуйте. Подскажите как можно отцентрировать слайдер, то есть при уменьшении разрешения, картинка не обрезалась по левому краю! Очень нужна помощь ! kibersant.fatrabbit.ru

Здравствуйте, есть проблема со слайдером на сайте prav.dp.ua . Если на главную сразу попадаешь то слайдер долго грузиться и не факт что загрузиться но если перейти на другую страницу то слайдер работает нормально. Скажите пожалуйста как это исправить ?

Можете ли пожалуйста скинуть ссылку на такой слайдер http://itmages.ru/image/view/1697662/febafd16 ? заранее спасибо

Потихоньку начал заниматься сайтом (диплом закрываю, появилось свободное время), решил добавить слайдер и нашел подходщий: http://www.gayadesign.com/scripts/presentationCycle/index.php?style=2 Вродебы полностью его интегрировал, но скрипт не подключается. Что получается: http://jsfiddle.net/jontsk/ceK2K/ Исходники есть на сайте по первой ссылке.

Здравствуйте! Имеется вот такой слайдер: /* Начало кода для слайдера */div.slider{ float:left; margin:0 0 0 10% }.viewport{ width: 30em; height: 17em; overflow: hidden; position: relative; }.slidewrapper{ position: absolute; left:0; top: 0; height: 17em; margin: 0; padding: 0; }.slide{ width: 30em; height: 17em; float: left; list-style: none; margin: 0; padding: 0; background: url(../image/Slider/ptichka.png) no-repeat; background-size: cover;}.slide a{ display:block; position:absolute; bottom:0px; height:80px; background:#333333; opacity:0.7; width:100%; color:#ffffff; font:1.2em Arial, Helvetica, sans-serif; text-decoration:none;}.slide a p{ width:50%; padding:10px;}.second{ background: #00ff00; }.third{ background: #0000ff; }.four{ background: #0C9; }.five{ background: #66F; }.dot{ display: inline-block; width: 14px; height: 14px; padding-left:2px; background: url(../image/krugok.png) no-repeat; background-size: contain;}.dot.active{ background: url(../image/activ-knopka.png) no-repeat; background-size: contain;}.toggles{ margin:10px 0 0 45%;}#prev_slide{ position: relative; bottom:12.5em;}#next_slide{ float:right; position: relative; bottom:12.5em; }/* Конец кода для слайдера */ // JavaScript Documentvar slideWidth=500;var sliderTimer;$(function(){$('.slidewrapper').width($('.slidewrapper').children().size()*slideWidth); sliderTimer=setInterval(nextSlide,2000); $('.viewport,.dot').hover(function(){ clearInterval(sliderTimer); },function(){ sliderTimer=setInterval(nextSlide,2000); }); $('#next_slide').click(function(){ clearInterval(sliderTimer); nextSlide(); sliderTimer=setInterval(nextSlide,1500); }); $('#prev_slide').click(function(){ clearInterval(sliderTimer); prevSlide(); sliderTimer=setInterval(nextSlide,1500); }); $('.dot').click(function(){ $('.dot.active').removeClass('active'); $(this).addClass('active'); var n=$('.dot').index(this); certainSlide(n); });});function nextSlide(){ var currentSlide=parseInt($('.slidewrapper').data('current')); currentSlide++; if(currentSlide>=$('.slidewrapper').children().size()) { currentSlide=0; } $('.dot.active').removeClass('active'); $('.dot').eq(currentSlide).addClass('active'); $('.slidewrapper').animate({left: -currentSlide*slideWidth},800).data('current',currentSlide);}function prevSlide(){ var currentSlide=parseInt($('.slidewrapper').data('current')); currentSlide--; if(currentSlide<0) { currentSlide=$('.slidewrapper').children().size()-1; } $('.dot.active').removeClass('active'); $('.dot').eq(currentSlide).addClass('active'); $('.slidewrapper').animate({left: -currentSlide*slideWidth},800).data('current',currentSlide);}function certainSlide(n){ var currentSlide=n; $('.slidewrapper').animate({left: -currentSlide*slideWidth},800).data('current',currentSlide);}Вопрос как настроить slideWidth в em? в px работает на ура

Подскажите пожалуйста вот такой слайдер

Здравствуйте! Нужна маска для слайдера, любой необходимой формы. Картинки в слайдере крутятся, маска статична. Для IE7+ Пример без маски: С маской: Не смог применить http://habrahabr.ru/post/190246/ Прошу помощи))

Прошу помощи 1. Есть слайдер, который через определенное время присваивает класс .active текущему слайду (всего 3 слайда). 2. Есть 3 других блока, которые находятся за пределами слайдера. Нужно: Чтобы одновременно с присвоением класса .active слайдеру, такой же класс присваивался соответствующему по позиции блоку который находится за пределами слайдера.

Добрый день! Подскажите пожалуйста слайдер, который бы работал по следующему принципу: - Есть некий блок с "Новинками" товаров - У каждого товара (внутреннего блока) задана фиксированная ширина (в px) - При уменьшении окна браузера, если то количество товаров, которое было показано первоначально, не влезает в родительский блок, то добавляется еще один слайд (кнопка слайдера), а количество товаров соответственно уменьшается (отступы между блоками товаров должен автоматически выровниться по ширине. Чтобы понять, как это должно работать, можно обратиться к рисунку:

Доброго времени суток. Взял работу, и в ней у меня возникла проблема. В макете имеется такой слайдер → http://imgdisk.ru/images/HAfbw.png Раньше много раз имел дело со слайдерами, но не с такими. Проблема в светлом окошке над слайдером. Как реализовать перелистывание не только картинок, но и контента в этом окне? Подскажите(любым способом) как это реализовать? Может быть у кого-то есть ссылка на уже готовый слайдер такого типа?

Ребят, кто знающий, подскажите существует ли горизонтальный слайдер + аккордион только на css? Нужно именно чтобы был вида как slidorion Другие, как бы просто с вкладками находил, а вот именно такой нет.

Как реализовать такой слайдер? Чтобы за ним был оранжевый цвет, а перед ним серый? Можно простенькие примеры, пожалуйста.

Ребята, подскажите плиз, может кто встречал такое решение. В общем, нужен скрипт, чтобы внутри полноэкранного (100% резина) блока менялись слайды (такие же полноэкранные), в которых несколько слоев-картинок с размерами в %, абсолютно позиционированных, и реагирующих на движение крысы по принципу параллакса (с разной скоростью то есть). Другими словами, в одностраничный сайт надо вкрутить полноэкранный слайдер, и чтобы в каждом слайде работал параллакс, реагирующий на мышь. По отдельности ни параллакс ни слайдер не представляют проблемы, но вот заставить все работать одновременно не выходит.

Не знаю как правильно назвать,подскажите пожалуйста, как можно сделать «full background горизонтальный слайдер» как на этом сайте http://www.waterevive.com/ ? только мне надо сделать только горизонтальный, переходы вверх-вниз мне не нужны, и на этой сайте используют Ascensor.js – там все меню прописывается в нем, и редактировать его у меня не получается, очень все запутанно, так как все параметры меню целиком прописаны в скриптах, нужен другой способ похожей «навигации»…

Добрый всем денек! Пересмотрел кучу вариантов по созданию слайдеров для контента, все они сильно запутанные, особенно для новичков, и вот решил собрать его самостоятельно и разобраться в этой штуке. Пока получается такой вариант, все переключается но контент стоит на месте: <body> <div id="slider"> <div id="content"> <div id="slide01"> <div id="slide02"> <div id="slide03"> <div id="slide-inner"> <div class="page" id="page1"><img src="img/exclusive_yachts_00.png"></div> <div class="page" id="page2"><img src="img/exclusive_yachts_01.png"></div> <div class="page" id="page3"><img src="img/exclusive_yachts_02.png"></div> </div> </div> </div> </div> </div> <ul id="nav"> <li class="button" id="button1"><a href="#content-inner-1">1</a></li> <li class="button" id="button2"><a href="#content-inner-2">2</a></li> <li class="button" id="button3"><a href="#content-inner-3">3</a></li> </ul> </div> </body> ol, ul { list-style: none; } #slider { width: 900px; } #content { background-color: #3CC; width: 900px; overflow: hidden; height: 400px; } #slide-inner { width: 2700px; height: 400px; } #slide-inner img { width: 900px; height: auto; } #slide01:target #slider-inner{ -webkit-transition: all 400ms ease; -moz-transition: all 400ms ease; -o-transition: all 400ms ease; transition: all 400ms ease; margin-left: 0px; } #slide02:target #slider-inner{ -webkit-transition: all 400ms ease; -moz-transition: all 400ms ease; -o-transition: all 400ms ease; transition: all 400ms ease; margin-left: -900px; } #slide03:target #slider-inner{ -webkit-transition: all 400ms ease; -moz-transition: all 400ms ease; -o-transition: all 400ms ease; transition: all 400ms ease; margin-left: -1800px; } .page { } #nav { } #nav li{ float: left; margin-right: 10px; background-color: #66F; } #nav li a{ display: block; padding: 5px; color: #FFF; text-decoration: none; font-family: AG_Helvetica, sans-serif, "trebuchet MS"; } #nav li a:hover{ } но почему то оно не пашет... может кто то сможет помочь?