Search the Community

Ребята, без вас никуда! Подскажите, пожалуйста, первый раз адаптирую и стилизую слайдер splide. Сам он работает, но как его стилизовать? В dev tools стилизация тех же стрелок отражается, но когда вношу их в css - не работает. Почему так? Как, например, тогда опустить ниже стрелки? Где устанавливать брейкпоинты и задавать им свойства? На сайте splide такая инфа по адаптиву. https://splidejs.com/guides/options/#breakpoints Вот типа того что-то пробую... https://jsfiddle.net/aqmuyhwd/

Ребят, подскажите, в чем может быть ошибка. На странице два слайдера от splide. Один с классом splide (работающий), другой c классом splid (не работает). Выглядит так, будто не работают стили. Отображается как не маркированный список текста и картинок. Стили добавила единожды: <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@2.4.21/dist/css/splide.min.css" integrity="sha256-EqzwzekQXKNbB5EE4nNBQT+2gWQIWRZQXAd89YdIq8M=" crossorigin="anonymous"> Который не работает: Заранее спасибо!! <div class="foo_columns"> <div class="splid"> <div class="splid__track"> <ul class="splid__list"> <li class="splid__slid"> @@include('./partials/footer/_footer.html', { "caption": "Знакомства", "downPicturePath": "img/foo1.png", "text": "Отношения актеров в кино и реальной жизни" }) </li> <li class="splid__slid"> @@include('./partials/footer/_footer.html', { "caption": "Знакомства", "downPicturePath": "img/foo2.png", "text": "Отношения актеров в кино и реальной жизни" }) </li> <li class="splid__slid"> @@include('./partials/footer/_footer.html', { "caption": "Знакомства", "downPicturePath": "img/foo3.png", "text": "Отношения актеров в кино и реальной жизни" }) </li> <li class="splid__slid"> @@include('./partials/footer/_footer.html', { "caption": "Приколы", "downPicturePath": "img/foo4.png", "text": "Отношения актеров в кино и реальной жизни" }) </li> <li class="splid__slid"> @@include('./partials/footer/_footer.html', { "caption": "Авто", "downPicturePath": "img/foo5.png", "text": "Отношения актеров в кино и реальной жизни" }) </li> </ul> </div> </div> <div class="foo__line"></div> <script> new Splid( '.splid', { type : 'loop', perPage: 1, speed: 2000, autoplay: true, interval: '3000', arrows: true, } ).mount(); </script> </div>

Всем привет. У меня возникла проблема, я не могу поместить прозрачное меню navbar на слайдер bootstrap 4. Получается, что меню вверху, а под ним слайдер( HTML: CSS: Вопрос решил. Слайдер нельзя помещать в хедер. Добавить свойства header { position: absolute; top: 0; left: 0; z-index: 2; width: 100%; }

Всем привет, как можно реализовать такой слайдер на платформе wordpress. скриншот, и ссылка на источник http://www.futsaldynamo.com/ . Функционал слайдера таков: выводит 4 поста сбоку (которые мы укажем в админке ,) и главный большой блок слайдера это картинка и контент текущего слайда ? Спасибо за внимание и помощь , благодарен любому совету.

Каким образом мне переместить последнего человечка в начало слайдера при клике на стрелку? То есть, когда я нажимаю "дальше", последняя картика пропадает и появляеться в начале слайда, а остальніе смещаються вправо.

http://prntscr.com/fcm086 кто нибудь сталкивался с таким слайдером, подкиньте пример решения пожалуйста. В гугле не смог найти подобного слайдера.

Есть футер и есть шапка. Футер не фиксированный. Между ними контент. Первый экран контента один большой слайдер. Как его растянуть на всю секцию первого экрана? Шаблон адаптивный. Максимальная ширина контента 1200px. Пробую прикрутить jquery плагины со слайдерами, но как их вытянуть на высоту 100%? Думал через абсолют, но во всех слайдерах чёрт ногу сломит и где-то глубоко в коде скриптом задаются стили и позиционирование. И не факт, что абсолютом заведётся. То есть в итоге задача растянуть по высоте и ширине слайдер или бэкграунд слайдера, что бы он был на всю ширину экрана и резиновый по высоте. Но контент слайдера должен быть максимально по ширине 1200px при этом бэкграунд на всю ширину. Писать свой слайдер как-то не комильфо. Может у кого-то есть идеи или кто-то знает наверняка как это сделать?

Здравствуйте, есть блок в котором находится слайдер с поставщиками. Не могу понять что, но что-то меня в нем очень сильно раздражает и слайдер сам по себе очень сильно выбивается из общей картинки сайта, Теперь сама суть, может кто-нибудь подкинуть идею, как бы его оформить так, чтобы он не выбивался из общей массы сайта? Ссылка на сайт Понимаю, что это и не проблема с кодом или еще что-то, но просто обратиться кроме как к вам форумчане не к кому и не куда. Рассчитываю на какую-нибудь светлую идейку.

Bootstrap - slider. Необходимо переместить описание. Попробовал сделать это с помощью position:relative и position:absolute. Но получается перемещать только вверх-вниз. А как сделать это вправо-влево? Вот сам сайт

Есть сайт в разработке fitmama.club на главной странице имеется слайдер, который при заходе на страницу ведет себя нормально, первое время, через минуту слайды съезжают вниз

Здравствуйте. Возник вопрос - как добавить слайдер вне шаблона статьи на WP? Или как допилить шаблон, чтобы шел слайдер на всю ширину, потом заголовки, дата и соц. сети, а потом уже контент статьи. Шаблон простой самописный, что будет меняться - так это статьи, их контент и фото. http://joxi.ru/L21jZw0S6zXjkA На скриншоте можно видеть расплющеные фото - это место слайдера, он на всю ширину должен быть. Сам текст начинается ниже - это и есть начало шаблона статьи, пункт 5. Пункт 4 - это я попробовала добавить слайдер. Остальное, кроме пункта 2 - навигация, заголовки, дата - всё попадает автоматически в шаблон. Кусок шаблона статьи <div class="content-wrapper common-content-wrapper"> <!-- ABOUT US BLOCK START --> <div class="content-inner-block-wrapper"> <div class="content-inner-block"> <h3 class="inner-page-heading">Блог</h3> <!-- BREADCRUMBS START --> <div class="breadcrumbs-wrapper clearfix"> <ul class="breadcrumbs-list"> <?php the_breadcrumb(); ?> </ul> <div class="inner-page-navigation-wrapper"> <a href="http://wingchung.com.ua/blog/" class="btn navigation-button">вернуться</a> </div> </div> <!-- BREADCRUMBS END --> </div> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <div class="content-photo-banner-wrapper"> <!-- тут стоят те расплющеные картинки, именно это место слайдера --> <div class="photo-banner-block"> <div class="photo-banner"> <img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="/wp-content/themes/wingchung-theme/img/media/blog/blog-banner-image-2.jpg" alt="" class="photo-banner-image"> </div> <div class="photo-banner"> <img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="/wp-content/themes/wingchung-theme/img/media/blog/blog-banner-image-1.jpg" alt="" class="photo-banner-image"> </div> <div class="photo-banner"> <img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="/wp-content/themes/wingchung-theme/img/media/blog/blog-banner-image-3.jpg" alt="" class="photo-banner-image"> </div> </div> </div> <div class="content-inner-block"> <div class="article-wrapper"> <div class="article-data-block-wrapper scrollflow -slide-right -opacity"> <div class="article-data"> <span class="date">Дата</span> <span class="date-counter"><?php the_date('j F Y'); ?></span> </div> <div class="share-block"> <span class="share-text">Поделиться:</span> <div class="social-networks clearfix"> <script type="text/javascript" src="//yastatic.net/share2/share.js" charset="utf-8"></script> <div class="ya-share2" data-services="facebook,vkontakte" data-bare></div> </div> </div> </div> <div class="article-content-wrapper"> <h3 class="article-heading"><?php the_title(); ?></h3> <div class="article-author"> Текст <span class="author-wrapper"><?php the_author(); ?></span> </div> <!-- а вот начало статьи, он же пункт 5, сюда и вставился тот слайдер --> <?php the_content(); ?> </div> </div> </div> <?php endwhile; ?> <?php else : ?> <?php endif; ?> </div> </div>

Здравствуйте. Меня преследует проблема с добавлением слайдера в шаблон статьи. Сам слайдер устраивает - взяла плагин Owl Slider. Вставляется методом шорт-кода в шаблон index'a, например. Или методом нажатия на кнопку на панели инструментов при написании поста - в single.php в часть the_content. Но проблема вот в чем - макет немного нестандартный. Выглядит так - слайдер(часть the_content) => заголовок, дата, автор => основной текст (часть the_content). То есть как бы макет именно записи блога, тот участок the_content прерывается. Пока не вижу другого способа как вставить слайдер в шаблон. Статьи хранятся в базе, поправить название слайдера для каждой новой статьи нельзя, статей будет много, слайдеров тоже много и разных. Код ниже <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>вот место слайдера ниже <!-- <div class="content-photo-banner-wrapper"> <div class="photo-banner-block"> <div class="photo-banner"> <img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="/wp-content/themes/wingchung-theme/img/media/blog/blog-banner-image-2.jpg" alt="" class="photo-banner-image"> </div> <div class="photo-banner"> <img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="/wp-content/themes/wingchung-theme/img/media/blog/blog-banner-image-1.jpg" alt="" class="photo-banner-image"> </div> <div class="photo-banner"> <img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="/wp-content/themes/wingchung-theme/img/media/blog/blog-banner-image-3.jpg" alt="" class="photo-banner-image"> </div> </div> </div> -->заголовки, даты <div class="content-inner-block"> <div class="article-wrapper"> <div class="article-data-block-wrapper scrollflow -slide-right -opacity"> <div class="article-data"> <span class="date">Дата</span> <span class="date-counter"><?php the_date('j F Y'); ?></span> </div> <div class="share-block"> <span class="share-text">Поделиться:</span> <div class="social-networks clearfix"> <script type="text/javascript" src="//yastatic.net/share2/share.js" charset="utf-8"></script> <div class="ya-share2" data-services="facebook,vkontakte" data-bare></div> </div> </div> </div> <div class="article-content-wrapper"> <h3 class="article-heading"><?php the_title(); ?></h3> <div class="article-author"> Текст <span class="author-wrapper"><?php the_author(); ?></span> </div>текст статьи <?php the_content(); ?> </div> </div> </div> <?php endwhile; ?> <?php else : ?> <?php endif; ?>

Здравствуйте! Ребята, нужна Ваша помощь. Есть тестовый сайт, на котором установлена CMS WordPress и тема Onetake. Установил слайдер Easing Slider во вторую секцию на главную страницу, задал в настройках слайдера ширину 1350 и высоту 760, и поставил галочку на параметр Enable 100% full width. Проблема в том, что в браузере Firefox на картинку наезжает третья секция, но в опере и хроме все хорошо отображается. Почему так происходит, и как это исправить? Помогите пожалуйста.

помогите пожалуйста как это исправить? сайт:http://likekino.net/

здравствуйте помогите пожалуйста,как сделать чтобы на других слайдерах тоже было как на первом демонстрацию можете увидеть на скрине ниже кода /* * Easy Paginate 1.0 - jQuery plugin * written by Alen Grakalic * http://cssglobe.com/'>http://cssglobe.com/ * * Copyright (c) 2011 Alen Grakalic (http://cssglobe.com) * Dual licensed under the MIT (MIT-LICENSE.txt) * and GPL (GPL-LICENSE.txt) licenses. * * Built for jQuery library * http://jquery.com * */(function($) { $.fn.easyPaginate = function(options){ var defaults = { step: 4, delay: 100, numeric: true, nextprev: false, auto:false, loop:false, pause:4000, clickstop:true, controls: 'pagination', current: 'current', randomstart: false }; var options = $.extend(defaults, options); var step = options.step; var lower, upper; var children = $(this).children(); var count = children.length; var obj, next, prev; var pages = Math.floor(count/step); var page = (options.randomstart) ? Math.floor(Math.random()*pages)+1 : 1; var timeout; var clicked = false; function show(){ clearTimeout(timeout); lower = ((page-1) * step); upper = lower+step; $(children).each(function(i){ var child = $(this); child.hide(); if(i>=lower && i<upper){ setTimeout(function(){ child.fadeIn('fast') }, ( i-( Math.floor(i/step) * step) )*options.delay ); } if(options.nextprev){ if(upper >= count) { next.fadeOut('fast'); } else { next.fadeIn('fast'); }; if(lower >= 1) { prev.fadeIn('fast'); } else { prev.fadeOut('fast'); }; }; }); $('li','#'+ options.controls).removeClass(options.current); $('li[data-index="'+page+'"]','#'+ options.controls).addClass(options.current); if(options.auto){ if(options.clickstop && clicked){}else{ timeout = setTimeout(auto,options.pause); }; }; }; function auto(){ if(options.loop) if(upper >= count){ page=0; show(); } if(upper < count){ page++; show(); } }; this.each(function(){ obj = this; if(count>step){ if((count/step) > pages) pages++; var ol = $('<ol id="'+ options.controls +'"></ol>').insertAfter(obj); if(options.nextprev){ prev = $('<li class="prev">Назад</li>') .hide() .appendTo(ol) .click(function(){ clicked = true; page--; show(); }); }; if(options.numeric){ for(var i=1;i<=pages;i++){ $('<li data-index="'+ i +'">'+ i +'</li>') .appendTo(ol) .click(function(){ clicked = true; page = $(this).attr('data-index'); show(); }); }; }; if(options.nextprev){ next = $('<li class="next">Вперед</li>') .hide() .appendTo(ol) .click(function(){ clicked = true; page++; show(); }); }; show(); }; }); }; })(jQuery);

Господа, уже много заданий делал с такими слайдерами, но до сих пор никак не могу прийти к одному варианту. Какой вы используете самый проверенный скрипт для вот такого вот типа слайдера? Без цмсковых плагинов. Хэлп плиз, опять встала эта задача, а сёрфить каждый раз и тратить время надоело Верю что есть настоящие спецы

Добрый день. На сайте слайдер, подскажите пожалуйста похожее решение, я за 3 часа ничего не нашёл. Или как это вообще реализуется?

Подскажите, как можно сделать слайдер вот такой формы: Смысл, конечно, не в слайдере, а в форме блока. С удовольствием бы наложил просто картинку, но там фон не однородный. Подумал сперва, что получится через border-radius, но вышло не много не то: http://jsfiddle.net/npofopr/n3sp9f86/ Тут http://bennettfeely.com/clippy/ вроде тоже плавных углов не сделать. Можно ли через css решить данный вопрос? Или придется использовать canvas или может svg. Если их, то может примеры есть, или какую библиотеку лучше использовать. До этого просто не сталкивался)

Добрый вечер, подскажите как можно выставить фото слайдер background для элементов контента. Пробовал через z-index, получается криво. Нужно чтоб было вот так http://pixs.ru/showimage/VillaSanMa_8067826_14250958.jpg а получается вот так http://sport.teslalight.com.ua/ Спасибо.

Доброе утро, не подключается скрип, все делаю по инструкции, но не работает((( подскажите в чем может быт ошибка, я предполагаю, что не правильно прописываю этот скрипт <script>$(document).ready() ({ $('.bxslider').bxSlider({ pagerCustom: '#bx-pager'}); });</script>ссылка моего слайдера http://sport.teslalight.com.ua/index-slider.html скачал отсюда http://bxslider.com/examples/thumbnail-pager-1

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

Добрый день. Ползунок в jquery ui slider в крайних положениях уходит за пределы трэка ровно наполовину. Какие есть варианты, чтобы он оставался внутри? Ссылка на сайт: http://testing.site-services.ru/

Закрыто

Собственно, я думаю, многие встречались с такой проблемой, как вытаскивание блока с position: absolute; за блок с overflow:hidden; В моем случае, это внутри слайдер http://jsfiddle.net/npofopr/F22FQ/ Собственно при ховере на блок, должен всплывать доп. контент, из-за overflow: hidden; все режется. Как обойти? Нагуглить не получилось, вернее ничего не подошло (такое пробовал http://dabblet.com/gist/7729560 тоже), а как решить с помощью js, пока не нашел. В общем, может у кого есть в закладках, пути решения? Буду рад всему

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