Slick slider растягивается на большое разрешение

95
22 апреля 2021, 23:20

Есть такой слайдер.

<link rel="stylesheet" type="text/css" href="http://www.1-11.ru/js/slick/slick/slick-theme.css"/>
<link rel="stylesheet" type="text/css" href="http://www.1-11.ru/js/slick/slick/slick.css"/>
<script type="text/javascript" src="http://www.1-11.ru/js/slick/slick/slick.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $('.slider7_container').slick({
    arrows: true,
    autoplay: true,
    autoplaySpeed: 5000,
    infinite: true,
    speed: 500,
    fade: true,
    prevArrow: '<span u="arrowleft" class="jssora01l" style="left:8px;  z-index:1;"></span>',
    nextArrow: '<span u="arrowright" class="jssora01r" style="right:8px; "></span>',
    cssEase: 'linear'
  });
});

    <div class="slider7_container" style="max-width:1440px; position: relative; top: 0px; left: 0px;">
    <div><a href="http://www.1-11.ru/oformlene-kabineta"><img style="width:100%;" alt=" " title=" " u="image" src="http://www.1-11.ru/images/banners/001_new.jpg" /></a></div>
    <div><a href="http://www.1-11.ru/oformlene-kabineta"><img style="width:100%;" alt=" " title=" " u="image" src="http://www.1-11.ru/images/banners/002_new.jpg" /></a></div>
    <div><a href="http://www.1-11.ru/oformlene-kabineta"><img style="width:100%;" alt=" " title=" " u="image" src="http://www.1-11.ru/images/banners/003_new.jpg" /></a></div>
    <div><a href="http://www.1-11.ru/oformlene-kabineta"><img  style="width:100%;" alt=" " title=" " u="image" src="http://www.1-11.ru/images/banners/004_new.jpg" /></a></div>
    <div><a href="http://www.1-11.ru/oformlene-kabineta"><img style="width:100%;" alt=" " title=" " u="image" src="http://www.1-11.ru/images/banners/005_new.jpg" /></a></div>
    </div>

Он находиться внутри <td width="75%" height="100%" valign="top">
Проблема в том, что если я убираю размер у class="slider7_container" Слайдер растягивается на ширину 30000px и не берет ширину родителя.

Неудачный скрипт, для изменения ширины.

function ScaleSlider() {
        var parentWidth = $('.slider7_container').parent().width();
        if (parentWidth) {
            //var width = document.documentElement.clientWidth;
            var width = window.screen.width;
            var width_new = width*3/4;
            //$(".slider7_container").width(parentWidth);
            $(".slider7_container").width(width_new);
        }
        else
            window.setTimeout(ScaleSlider, 100);
    }
    //Scale slider after document ready
    ScaleSlider();
    //Scale slider while window load/resize/orientationchange.
    $(window).bind("load", ScaleSlider());
    $(window).bind("resize", ScaleSlider());
    $(window).bind("orientationchange", ScaleSlider());
    //responsive code end

Answer 1
.slider7_container{
  max-width: 1500px;
}
READ ALSO
Как мне сделать чтобы блоки шли в 3 ряда а потом опускалися в низ и опять в три ряда

Как мне сделать чтобы блоки шли в 3 ряда а потом опускалися в низ и опять в три ряда

Я делаю новостную афишу и хочу чтобы блоки и информацией шли в три ряда то есть 3x3 но когда я добовляю 4 блок получается что он уходит левее

94
Приложение для работы с вконтакте

Приложение для работы с вконтакте

Я много слушаю музыку с ноутбука (vk), поэтому всегда хотел создать приложение, которое автоматически (горячие клавиши) переключает мне музыку...

107
Спрятать полосу прокрутки

Спрятать полосу прокрутки

Как можно спрятать полосу прокрутки, но в то же время иметь возможность скроллить блок? Нужно реализовать что-то похожее на прокрутку диалогов...

98