Все технические форумы на одном сайте Удобный поиск информации с популярных форумов в одном месте
Вопрос: Плавная остановка карусели

Имеется подобие слайда с картинками, которое прокручивается в бесконечном цикле.
Приостанавливается при наведении курсором на нее.
Как реализовать следующие:
  1. Запускается
  2. Крутится секунд 10
  3. Плавно останавливается теряя скорость прокрутки
HTML5
1
2
3
4
<div id="carusel" style="border:solid;width:500px;overflow:auto">
  <div id="scrolled"> <img src="#" width="300px" height="200px" style="background-color:green;float:left;" alt="image 0"> <img src="#" width="350px" height="200px" style="background-color:yellow;float:left;" alt="image 1"> <img src="#" width="250px" height="200px" style="background-color:blue;float:left;"
    alt="image 2"> <img src="#" width="310px" height="200px" style="background-color:red;float:left;" alt="image 3"> </div>
</div>
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
$(document).ready(function() {
  var marg = 2; // отступы между фотками
  var hght = 100; // высота карусели 
  speed = 12; // скорость прокрутки
  
 
 
  var imgs = $("#scrolled > img");
  var scrl = $("#scrolled");
  var crsl = $("#carusel");
  wdth = 0;
  imgs.css("margin", "0 " + marg);
  crsl.css({
    overflow: "hidden",
    "height": hght
  });
  $.each(imgs, function(index, value) {
    wdth += ($(imgs[index]).width() + (marg * 2) + 5);
  })
  scrl.width(wdth);
 
  function rightScroll() {
    var firstImg = $("#scrolled > img:first");
    var lastImg = $("#scrolled > img:last");
    var scroll = crsl.scrollLeft();
    crsl.scrollLeft(scroll + speed);
    if (scroll > firstImg.width()) {
      crsl.scrollLeft(scroll - (firstImg.width() + (marg * 2)));
      firstImg.clone(true).insertAfter(lastImg);
      $(firstImg).remove();
      
    }
  }
  crsl.mouseover(function() {
    clearInterval(timer);
  }).mouseout(function() {  
    timer = setInterval(rightScroll, 10);
  })
  timer = setInterval(rightScroll, 10);
});
Ответ:
Сообщение от BANO
вот моя реализация
почти то что надо, значения я поменяю, и кокрас будет
Благодарю

Добавлено через 23 часа 25 минут
Подскажите как остановить карусель, после остановки или по нажатию.
А то как я курсор убираю она заного начинает крутиться

Добавлено через 30 секунд
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
$(document).ready(function() {
  var marg = 2; // отступы между фотками
  var hght = 100; // высота карусели 
  speed = 15; // скорость прокрутки
 
 
  var imgs = $("#scrolled > img");
  var scrl = $("#scrolled");
  var crsl = $("#carusel");
  wdth = 0;
  var down = 1,
    downS = false;
  imgs.css("margin", "0 " + marg);
  crsl.css({
    overflow: "hidden",
    "height": hght
  });
  $.each(imgs, function(index, value) {
    wdth += ($(imgs[index]).width() + (marg * 2) + 5);
  })
  scrl.width(wdth);
 
  function rightScroll() {
    var firstImg = $("#scrolled > img:first");
    var lastImg = $("#scrolled > img:last");
    var scroll = crsl.scrollLeft();
    var d = speed * down;
    ss.innerHTML = down;
    down = downS ? Math.max(0, down - .01) : 1;
    crsl.scrollLeft(scroll + d);
    if (scroll > firstImg.width()) {
      crsl.scrollLeft(scroll - (firstImg.width() + (marg * 2)));
      firstImg.clone(true).insertAfter(lastImg);
      $(firstImg).remove();
    }
  }
  crsl
    .mouseover(function() {
      downS = true;
    })
    .mouseout(function() {
      downS = false;
    })
  timer = setInterval(rightScroll, 10);
});
Добавлено через 46 минут
решил проблему

Javascript
1
ExitTimer("10");
Вопрос: Прокрутка к элементу в карусели

Здравствуйте, есть карусель на несколько блоков(количество блоков динамическое), при запуске карусель вращается по кругу. При срабатывании функции, карусель должна покрутится до нужного блока и что-бы он стал в центре. Я взял "swiper" карусель контента и плагин "scrollTo", но никак не могу рассчитать расстояние насколько его крутить, что-бы нужный блок стал в середину.

Помогите, пожалуйста уже сутки убил на это не могу разобраться.
Ответ:
Сообщение от Skyle2013
Здравствуйте, есть карусель на несколько блоков(количество блоков динамическое), при запуске карусель вращается по кругу. При срабатывании функции, карусель должна покрутится до нужного блока и что-бы он стал в центре. Я взял "swiper" карусель контента и плагин "scrollTo", но никак не могу рассчитать расстояние насколько его крутить, что-бы нужный блок стал в середину.
Помогите, пожалуйста уже сутки убил на это не могу разобраться.
Потому что надо описание к плагину читать, а не велосипеды прикручивать. Там есть встроенные методы и свойства в самом swiper.
Метод прокручивает до определенного слайда так что он становиться крайним справа, если допустим нужно чтобы 10 слайд был по центру тогда 15 где то с краю:

Код Javascript
1
mySwiper.slideTo(15, 1000);
Вопрос: Фильтр сортировки съедает карусель

Всем привет! Есть сайт на wordpress тема которого построена с помощью visual composer. На сайте присутствует фильтр товаров (код ниже)
ul class="product-filter">
  <li class="active animate-left-to-right animate_finished">
    <button data-filter="*" value="All">Все</button>
  </li>
  <li>
    <button data-filter="discount">Hoodies&Sweatshirts</button>
  </li>
  <li>
    <button data-filter="vegetarian">Skirts</button>
  </li>
  <li>
    <button data-filter="new">Новинки</button>
  </li>
  <li class="animate-left-to-right animate_finished">
    <button data-filter="sale">Акция</button>
  </li>
</ul>

А под фильтром в отдельном блоке расположена карусель. Если переходить по заголовкам фильтра, то owl карусель исчезает (если вместо карусели выбрать сеточную структуру элементов, то все ок, но мне нужна именно карусель!). Почему так может происходить и где искать конфликты?
Ответ: ligisayan,
смотрите плагин фильтрации, какие блоки он отключает или просто измените класс в котором находится карусель. на вашем тестовом сайте сложно произвести локализацию проблемы - поэтому вам скорее всего в раздел работа.
Вопрос: Создать карусель

Помогите пожалуйста создать карусель на основе имеющегося. Есть готовая карусель изображений. И есть небольшой код где php формирует вывод списка. Помогите этот список интегрировать в карусель чтобы список выводимый был в виде карусели.

<?php foreach ($latestMembers as $member) { ?>
			<li>
                <div class="joms-avatar">
					<span>Имя пользователя: <?php echo $member->getDisplayName(); ?></span>
					<span>Статус пользователя: <?php echo $member->getStatus(); ?></span>
					<span>Статус: 
					<?php
						$isOnline = $member->isOnline();
						if ($isOnline) {
							echo 'В сети'; 
						} else {
							echo 'Оффлайн'; 
						}
					?>
					</span>
					<a href="<?php echo CRoute::_('index.php?option=com_community&view=profile&userid='.$member->id );?>"><img src="<?php echo $member->getThumbAvatar(); ?>"></a>
                </div>
			</li>
		<?php } ?>
Ответ: нашел карусель установил . Теперь не могу позиционировать имя пользователя в левом верхнем углу.
Вопрос: Вопрос по карусели

имеется карусель и 10 изображений, которые автоматически сменяют друг друга
Возможно ли сделать так, чтобы при обновлении страницы, картинки в карусели менялись не локально (начало работы с 1ой картинки при обновлении страницы) , т.е их положение и смена обрабатывалось самим сайтом?
Например, открыв страницу карусель пролистала до 5ой картинки и при обновлении продолжила с 5ой, а не началась заново.
Ответ: ultrahomie,
как ваша карусель инициализируется и есть ли api при смене картинок чтоб сохранить текущий индекс мне неведомо.
var indx = +localStorage.x || 0; при загрузке
потом indx куда-то в инициализацию
а
localStorage.x = index куда -то в плагин
Вопрос: Необходимо каким-то образом реализовать карусель модулей

Всем добрый день, уважаемые форумчане!
возник вопрос, которым Гугл я уже замучала.
необходимо каким-то образом реализовать карусель модулей.
поясню - у меня есть несколько HTML-модулей
модуль 1 / модуль 2 / модуль 3 / модуль 4 / модуль 5
в видимой области находится 3 модуля и они должны прокручиваться.
существует ли какой-нибудь модуль-плагин для такой цели либо может быть это как-то реализовать через Javascript?
Ответ: katjuha6, нужно брать любой скрипт карусели и верстать позицию с помощью этого скрипта. Где один модуль - один элемент карусели.
Вопрос: Карусель из фотографий

Всем привет. Нужна карусель из фотографий, где центральная фотография большая, а по бокам - поменьше. Планируется использовать 3 фотографии в зоне видимости. Помогите найти.
Ответ: Как оказалось, мне нужны не картинки, а блоки с контентом, где в том числе есть и картинки. Как я понял, эта каруселька работает ТОЛЬКО с картинками. Как-нибудь можно изловчиться и доработать эту карусель для контента, т.к. других карусель, как я понял, нет.
Вопрос: Как адаптировать карусель под мобильные устройства?

Есть карусель

Мне нужно добиться ее адаптивного отображения, но чтобы фотки оставались адекватными (не растягивались,обрезались и становились кривыми) - как этого можно добиться?

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

Ответ: Если Вам очень нравится внешний вид конкретно этого плагина, то можно проверить разрешение экрана пользователя и для десктопной версии загружать\показывать этот плагин, а для мобильной версии выбрать плагин карусели, который по своему дизайну подходит для мобильного устройства и уже для них адаптирован, например
Вопрос: Бесконечная прокрутка по кнопке

Здравствуйте. Можно ли как-то сделать бесконечную прокрутку по кнопке?
Есть такой цикл который выводит кастомный пост, его и нужно там подгружать:
PHP
1
2
3
<?php query_posts( array( 'post_type' => 'goryachiyePredl' ) ); if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
        <?php the_content();>
        <?php endwhile; endif; wp_reset_query(); ?>
Помогите, пожалуйста, бо перерыл весь интернет...
Ответ: vanyakilkil, если вы имеете ввиду что-то типа кнопки "Показать ещё", то это делается через ajax, вот .
За работоспособность не ручаюсь. Искать надо не "бесконечная прокрутка", а "ajax подгрузка" или вроде того. Не исключено, то с js и бубном нужно будет и потанцевать.
Вопрос: Карусель на сайте

Здравствуйте. На сайте имеется "карусель" (прокручивание элементов меню в виде картинок и переход по их ссылкам). Вопрос таков: как можно при переходе по ссылкам - оставить такое-же положение карусели (а то она сбивается при перезагрузке и снова в самом начале находится)? Код ниже:
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<div class="menu-info">
    <h>Сведения об образовательной организации</h>
</div>
<div class="carousel shadow"> 
    <div class="carousel-button-left"><a href="#"></a></div> 
    <div class="carousel-button-right"><a href="#"></a></div> 
    <div class="carousel-wrapper"> 
        <div class="carousel-items"> 
            <div class="carousel-block">
                <a href="/page/5/">
                    <img src="/media/img/icons-pages/1.png" alt="" />
                    Основные сведения
                </a>
            </div>
            <div class="carousel-block">
                <a href="/page/7/">
                    <img src="/media/img/icons-pages/2.png" alt="" />
                    Структура и органы управления образовательной организацией
                </a>
            </div>
            <div class="carousel-block">
                <a href="/page/8/">
                    <img src="/media/img/icons-pages/3.png" alt="" />
                    Документы
                </a>
            </div>
            <div class="carousel-block">
                <a href="/page/10/">
                    <img src="/media/img/icons-pages/4.png" alt="" />
                    Образование
                </a>
            </div>
            <div class="carousel-block">
                <a href="/page/16/">
                    <img src="/media/img/icons-pages/5.png" alt="" />
                    Образовательные стандарты
                </a>
            </div>
            <div class="carousel-block">
                <a href="/page/9/">
                    <img src="/media/img/icons-pages/6.png" alt="" />
                    Руководство. Педагогический состав
                </a>
            </div>
            <div class="carousel-block">
                <a href="/page/24/">
                    <img src="/media/img/icons-pages/7.png" alt="" />
                    Материально-техническое обеспечение и оснащённость образовательного процесса
                </a>
            </div>
            <div class="carousel-block">
                <a href="/page/18/">
                    <img src="/media/img/icons-pages/8.png" alt="" />
                    Стипендии и иные виды материальной поддержки
                </a>
            </div>
            <div class="carousel-block">
                <a href="/page/25/">
                    <img src="/media/img/icons-pages/9.png" alt="" />
                    Платные образовательные услуги
                </a>
            </div>
            <div class="carousel-block">
                <a href="/page/26/">
                    <img src="/media/img/icons-pages/10.png" alt="" />
                    Финансово-хозяйственная деятельность
                </a>
            </div>
            <div class="carousel-block">
                <a href="/page/17/">
                    <img src="/media/img/icons-pages/11.png" alt="" />
                    Вакантные места для приёма (перевода)
                </a>
            </div>
            <div class="carousel-block">
                <a href="/page/19/">
                    <img src="/media/img/icons-pages/12.png" alt="" />
                    Студенту
                </a>
            </div>
            <div class="carousel-block">
                <a href="/program/">
                    <img src="/media/img/icons-pages/13.png" alt="" />
                    Реализуемые образовательные программы
                </a>
            </div>
            <div class="carousel-block">
                <a href="/page/11/">
                    <img src="/media/img/icons-pages/14.png" alt="" />
                    Воспитательная работа
                </a>
            </div>
            <div class="carousel-block">
                <a href="/page/15/">
                    <img src="/media/img/icons-pages/15.png" alt="" />
                    Локальные нормативные акты
                </a>
            </div>
            <div class="carousel-block">
                <a href="/page/4/">
                    <img src="/media/img/icons-pages/16.png" alt="" />
                    Защита персональных данных
                </a>
            </div>
        </div>
    </div>
</div>
Style
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
.carousel  {
   max-width: 1080px; /* ширина всего блока */
   //margin: 50px auto;
   width:100%;
}
.carousel-wrapper {
   margin: 10px 30px; /* отступы для стрелок */
   overflow: hidden; /* скрываем содержимое, выходящее за рамки основной области */
   position:relative;
}
.carousel-items {
   width: 10000px; /* устанавливаем большую ширину для набора элементов */
   position: relative; /* позиционируем блок относительно основной области карусели */
}
.carousel-block {
   float: left; /* выстраиваем все элементы карусели в ряд */
   width: 200px; /* задаём ширину каждого элемента */
   padding: 10px 10px 10px 0px; /* делаем оступы, чтобы элементы не сливались */
   //-webkit-filter: grayscale(100%);
   //filter: grayscale(100%);
}
 
.carousel-block:hover {
    opacity: 0.9;
}
.carousel-block img{
    display:block;
}
 
/*********** BUTTONS ***********/
.carousel-button-left a, .carousel-button-right a {
   width: 25px; 
   height: 26px; 
   position: relative;
   top: 60px; 
   cursor: pointer; 
   text-decoration:none;
   opacity: 0.4;
}
 
.carousel-button-left a:hover, .carousel-button-right a:hover {
    opacity: 0.6;
}
.carousel-button-left a {
   float: left; 
   background: url(../img/carousel/carousel-left.png); 
}
 
.carousel-button-right a {
   float: right;
   background: url(../img/carousel/carousel-right.png); 
}
 
/*********** SHADOW ***********/
.shadow{
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.6);
}
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
//Обработка клика на стрелку вправо
$(document).on('click', ".carousel-button-right",function(){ 
    var carusel = $(this).parents('.carousel');
    right_carusel(carusel);
    return false;
});
//Обработка клика на стрелку влево
$(document).on('click',".carousel-button-left",function(){ 
    var carusel = $(this).parents('.carousel');
    left_carusel(carusel);
    return false;
});
function left_carusel(carusel){
   var block_width = $(carusel).find('.carousel-block').outerWidth();
   $(carusel).find(".carousel-items .carousel-block").eq(-1).clone().prependTo($(carusel).find(".carousel-items")); 
   $(carusel).find(".carousel-items").css({"left":"-"+block_width+"px"});
   $(carusel).find(".carousel-items .carousel-block").eq(-1).remove();    
   $(carusel).find(".carousel-items").animate({left: "0px"}, 200); 
   
}
function right_carusel(carusel){
   var block_width = $(carusel).find('.carousel-block').outerWidth();
   $(carusel).find(".carousel-items").animate({left: "-"+ block_width +"px"}, 200, function(){
      $(carusel).find(".carousel-items .carousel-block").eq(0).clone().appendTo($(carusel).find(".carousel-items")); 
      $(carusel).find(".carousel-items .carousel-block").eq(0).remove(); 
      $(carusel).find(".carousel-items").css({"left":"0px"}); 
   }); 
}
 
$(function() {
//Раскомментируйте строку ниже, чтобы включить автоматическую прокрутку карусели
//  auto_right('.carousel:first');
})
 
// Автоматическая прокрутка
function auto_right(carusel){
    setInterval(function(){
        if (!$(carusel).is('.hover'))
            right_carusel(carusel);
    }, 1000)
}
// Навели курсор на карусель
$(document).on('mouseenter', '.carousel', function(){$(this).addClass('hover')})
//Убрали курсор с карусели
$(document).on('mouseleave', '.carousel', function(){$(this).removeClass('hover')})
Я думаю такое реально сделать на JQuery, поэтому и написал в этот раздел. Спасибо
Ответ: AsakuraKazumi, да, самописная. Получается при клике на стрелки - нужно куда то записывать параметры, или действительно делать расчёт не по пикселям, а по параметрам меню