Search the Community

Добрый день. Есть необходимость свертсать слайдер на главной странице: 1) пролистывание на 1 страницу осуществляется по наведению мыши на текущий слайд т.е. 1 наведение 1 слайд; 2) пролистывания с эффектом fade (один тухнет другой появляется) Все остальное время слайдер стоит просто. Попробовал написать использую bootstrap4 carousel, но столкнулся с тем что я не знаю как сделать эффект fade на нем, а если и получалось то текущий слайд резко исчезает, а новый появляется медленно и еще почему то при наведении на последний слайд курсора пролистывание идет через первый слайд (он показывается, но только на короткий промежуток времени) на jsfiddle код работает почему то как часы, но не у меня хотя мой же. Решил использовать swiper так как пользовался ранее, все замечательно работает, но косяк с позиционированием элементов. текст на слайдах заходит за контейнер в котором он находится и просто исчезает (в мобилках в основном). Ссылки на jsfiddle соответственно на карусель, второй на свипер. https://jsfiddle.net/AShukilovich/aqyrj8xz/2/ https://jsfiddle.net/AShukilovich/8kvo4qwm/1/ (почему то не хочет свипер подгружаться, на локалке все корректно)

Здравствуйте дамы и господа!) У меня к Вам такой вопрос, как можно правильно реализовать следующее: Мне нужно, чтобы при клике на строку/слово в тексте, галерея BOOTSTRAP Galerey переключалась на требуемый слайд и у слова, связанного с активным слайдов появлялось выделение в виде смены цвета текста, и подчеркиванием. Так же мне нужно, чтобы это работало и было связано с автоматической сменой слайдов. Т.е. слайды к примеру менялись бы каждые секунд 5-ть, при этом слова в тексте автоматически бы выделялись в зависимости от активного слайда. К примеру текст такой: И такая галерея: <div class="col-xs-12 col-sm-12 col-lg-offset-1 col-lg-4 carousel slide article-slide" id="searchAndReplace"> <div class="carousel-inner cont-slider"> <div class="item active"> <img class="img-responsive" alt="Google company" title="Google company" src="<%=request.getContextPath() %>/lib/upload/img/270220172230.png"> </div> <div class="item "> <img class="img-responsive" alt="Real phone" title="Real phone" src="<%=request.getContextPath() %>/lib/upload/img/270220172245.png"> </div> </div> </div> Как такое реализовать ? Заранее благодарю Вас за ответ!

помогите пожалуйста как это исправить? сайт: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);

Здравствуйте! Подскажите, пожалуйста, какой плагин лучше использовать для подобной карусели. Может кто-нибудь из опыта порекомендует. Обычно встречаются карусели картинок с одинаковой шириной, а тут для блока ширина разная. В этом основная проблема.