Почему слайдер дергается и как можно решить эту проблему?
Добрый день, подскажите как решить такую проблему: нужен слайдер центральный слайд которого был бы ~800 пик, а остальные(2 сбоку ) имели ширину поменьше и были половинчатыми(см. codepen), ну и находились вертикально по центру родителя, в принципе, эта задача решена, но проблема в другом. У меня сейчас на слайдере создается эффект захождения вперед и резный возврат назад.(эффект дергания). Если сделать все изображения одинаковой ширины - никакой проблемы нет, все плавно и красиво. Есть ли вообще вариант решения этой проблемы на этом слайдере slick? Или подкиньте готовы вариант, если у вас имеется линки на них. https://codepenio/anon/pen/VbjWez
Происходит резкая смена ширины фото и резкая смена transform(т.к. она относительно ширины, а ширина меняется резко). Добавила transition(в самом конце css) - эта смена стала происходить плавно. Можете попробовать разные задержки на transition, возможно получится желаемый результат:
$('.main__slider').slick({
arrows: false,
infinite: true,
speed: 300,
centerPadding: '0',
slidesToShow: 1,
centerMode: true,
variableWidth: true,
focusOnSelect: true
});.slick-slide {
margin-left: 35px;
margin-right: 35px;
cursor: pointer;
position: relative;
width: 400px;
}
.slick-slide img {
width: 100%;
}
.slick-slide.slick-center {
width: 600px;
}
.slick-slide.slick-center::after {
opacity: 0;
}
.slick-slide::after {
content: "";
display: block;
position: absolute;
background: #000;
transition: opacity 0.5s;
opacity: 0.65;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.slick-track{
transition: transform 1s;
}
.slick-slide{
transition: width .5s;
}<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" />
<div class="main__slider">
<div>
<img src="http://worldoftanksblitz.org/wp-content/uploads/2014/10/wallpaper_7_ipad2.jpg" alt="">
</div>
<div>
<img src="http://worldoftanksblitz.org/wp-content/uploads/2014/10/wallpaper_7_ipad2.jpg" alt="">
</div>
<div>
<img src="http://worldoftanksblitz.org/wp-content/uploads/2014/10/wallpaper_7_ipad2.jpg" alt="">
</div>
<div>
<img src="http://worldoftanksblitz.org/wp-content/uploads/2014/10/wallpaper_7_ipad2.jpg" alt="">
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script>Вы немного не стой стороны зашли. Лучше всего подключить все необходимые стили для slick в такой последовательности:
<link href="css/slick.css" rel="stylesheet">
<link href="css/slick-theme.css" rel="stylesheet">
<script src="js/slick.min.js"></script>Скачать их можно тут http://kenwheeler.github.io/slick/
А после этого уже переопределить стили если необходимо, например поменять стрелки. Тогда корректно будут работать все функции слайдера.
-
13:29
Кофе для программистов: как напиток влияет на продуктивность кодеров?
-
22:13
Рекламные вывески: как привлечь внимание и увеличить продажи
-
19:13
-
16:04
Стратегії та тренди в SMM - Технології, що формують майбутнє сьогодні
-
17:27
Выделенный сервер, что это, для чего нужен и какие характеристики важны?
-
22:17
-
18:08
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
-
18:54
-
17:35
- Почему SERVER_ADDR имеет не тот IP 47868 visits
- Как заменить $_SERVER[REMOTE_ADDR] на IP клиента в PHP за двумя Nginx? 30563 visits
- Хочу вывести несколько строк из массива в один div, выводит только много undefined; подскажите, что делать? 23864 visits
- Как через css изменить цвет png изображения? 10388 visits
- Blob video url download 9998 visits
- Php curl запрос через прокси с авторизацией 9260 visits
- Работа с captcha vk api 8139 visits
© "hostciti.net" 15.3.2025 | 23:13